diff options
| -rw-r--r-- | .changeset/fuzzy-donuts-wonder.md | 9 | ||||
| -rw-r--r-- | packages/astro/package.json | 2 | ||||
| -rw-r--r-- | packages/astro/test/0-css.test.js | 14 | ||||
| -rw-r--r-- | packages/astro/test/astro-markdown-css.test.js | 4 | ||||
| -rw-r--r-- | packages/astro/test/astro-partial-html.test.js | 2 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 8 |
6 files changed, 24 insertions, 15 deletions
diff --git a/.changeset/fuzzy-donuts-wonder.md b/.changeset/fuzzy-donuts-wonder.md new file mode 100644 index 000000000..b31023913 --- /dev/null +++ b/.changeset/fuzzy-donuts-wonder.md @@ -0,0 +1,9 @@ +--- +'astro': patch +--- + +**BREAKING** Implement [RFC0012](https://github.com/withastro/rfcs/blob/main/proposals/0012-scoped-css-with-preserved-specificity.md) to preserve authored specificity for Astro scoped styles. + +If you use a mix of global styles and Astro scoped styles, **please visually inspect your site** after upgrading to confirm that styles are working as expected. + +If you previously relied on Astro's scoped styles to increase the specificity of your selectors, please update your selectors to use an additional class. For example, updating `div` to `div.my-class` will match the previous behavior. diff --git a/packages/astro/package.json b/packages/astro/package.json index 3e1e13fec..c8f631217 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -82,7 +82,7 @@ "test:e2e:match": "playwright test -g" }, "dependencies": { - "@astrojs/compiler": "^0.21.0", + "@astrojs/compiler": "^0.22.0", "@astrojs/language-server": "^0.20.0", "@astrojs/markdown-remark": "^0.12.0", "@astrojs/prism": "0.6.1", diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js index 4b2862470..7d7000584 100644 --- a/packages/astro/test/0-css.test.js +++ b/packages/astro/test/0-css.test.js @@ -46,7 +46,7 @@ describe('CSS', function () { expect(el2.attr('class')).to.equal(`visible ${scopedClass}`); // 2. check CSS - const expected = `.blue.${scopedClass}{color:#b0e0e6}.color\\\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`; + const expected = `.blue:where(.${scopedClass}){color:#b0e0e6}.color\\\\:blue:where(.${scopedClass}){color:#b0e0e6}.visible:where(.${scopedClass}){display:block}`; expect(bundledCSS).to.include(expected); }); @@ -69,11 +69,11 @@ describe('CSS', function () { }); it('<style lang="sass">', async () => { - expect(bundledCSS).to.match(new RegExp('h1.astro-[^{]*{color:#90ee90}')); + expect(bundledCSS).to.match(new RegExp('h1\\:where\\(.astro-[^{]*{color:#90ee90}')); }); it('<style lang="scss">', async () => { - expect(bundledCSS).to.match(new RegExp('h1.astro-[^{]*{color:#ff69b4}')); + expect(bundledCSS).to.match(new RegExp('h1\\:where\\(.astro-[^{]*{color:#ff69b4}')); }); }); @@ -308,10 +308,10 @@ describe('CSS', function () { it('resolves Astro styles', async () => { const allInjectedStyles = $('style[data-astro-injected]').text(); - expect(allInjectedStyles).to.contain('.linked-css.astro-'); - expect(allInjectedStyles).to.contain('.linked-sass.astro-'); - expect(allInjectedStyles).to.contain('.linked-scss.astro-'); - expect(allInjectedStyles).to.contain('.wrapper.astro-'); + expect(allInjectedStyles).to.contain('.linked-css:where(.astro-'); + expect(allInjectedStyles).to.contain('.linked-sass:where(.astro-'); + expect(allInjectedStyles).to.contain('.linked-scss:where(.astro-'); + expect(allInjectedStyles).to.contain('.wrapper:where(.astro-'); }); it('resolves Styles from React', async () => { diff --git a/packages/astro/test/astro-markdown-css.test.js b/packages/astro/test/astro-markdown-css.test.js index 8852622f4..d6f98e068 100644 --- a/packages/astro/test/astro-markdown-css.test.js +++ b/packages/astro/test/astro-markdown-css.test.js @@ -29,7 +29,7 @@ describe('Imported markdown CSS', function () { expect(importedAstroComponent?.name).to.equal('h2'); const cssClass = $(importedAstroComponent).attr('class')?.split(/\s+/)?.[0]; - expect(bundledCSS).to.match(new RegExp(`h2.${cssClass}{color:#00f}`)); + expect(bundledCSS).to.include(`h2:where(.${cssClass}){color:#00f}`); }); }); describe('dev', () => { @@ -53,7 +53,7 @@ describe('Imported markdown CSS', function () { const cssClass = $(importedAstroComponent).attr('class')?.split(/\s+/)?.[0]; const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, ''); - expect(allInjectedStyles).to.match(new RegExp(`h2.${cssClass}{color:#00f}`)); + expect(allInjectedStyles).to.include(`h2:where(.${cssClass}){color:#00f}`); }); }); }); diff --git a/packages/astro/test/astro-partial-html.test.js b/packages/astro/test/astro-partial-html.test.js index 484adc21c..83d357693 100644 --- a/packages/astro/test/astro-partial-html.test.js +++ b/packages/astro/test/astro-partial-html.test.js @@ -26,7 +26,7 @@ describe('Partial HTML', async () => { // test 2: correct CSS present const allInjectedStyles = $('style[data-astro-injected]').text(); - expect(allInjectedStyles).to.match(/\.astro-[^{]+{color:red}/); + expect(allInjectedStyles).to.match(/\:where\(\.astro-[^{]+{color:red}/); }); it('injects framework styles', async () => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a839941f8..60a5ed2ff 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -438,7 +438,7 @@ importers: packages/astro: specifiers: - '@astrojs/compiler': ^0.21.0 + '@astrojs/compiler': ^0.22.0 '@astrojs/language-server': ^0.20.0 '@astrojs/markdown-remark': ^0.12.0 '@astrojs/prism': 0.6.1 @@ -526,7 +526,7 @@ importers: yargs-parser: ^21.0.1 zod: ^3.17.3 dependencies: - '@astrojs/compiler': 0.21.0 + '@astrojs/compiler': 0.22.0 '@astrojs/language-server': 0.20.1 '@astrojs/markdown-remark': link:../markdown/remark '@astrojs/prism': link:../astro-prism @@ -2960,8 +2960,8 @@ packages: leven: 3.1.0 dev: true - /@astrojs/compiler/0.21.0: - resolution: {integrity: sha512-g+zkKpTsR0UCDiOAhjv0wQW0cPYd+2Hb5/z+ovIEu7K/v8z2jiQZqvhPvIsjI5ni+5rMFgjjoZWhkMCq+e4bOg==} + /@astrojs/compiler/0.22.0: + resolution: {integrity: sha512-TF3zwbPIgr3UPPkVquKUzSGsIqGKh3Gi34Y29+HZvL+YmrkAk+GAuUkOo2EXDJ6aS2Oxq0k7KO/yQ2LjkWl83A==} dev: false /@astrojs/language-server/0.20.1: |