Preserve authored CSS specificity

.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.

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",

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 () => {

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}`);
 		});
 	});
 });

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 () => {