Fix CSS modules ordering (#8877)

.changeset/silent-goats-invent.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes CSS modules ordering by rendering styles before links

packages/astro/src/runtime/server/render/head.ts

@@ -34,7 +34,13 @@ export function renderAllHeadContent(result: SSRResult) {
 		.filter(uniqueElements)
 		.map((link) => renderElement('link', link, false));
 
-	let content = links.join('\n') + styles.join('\n') + scripts.join('\n');
+	// Order styles -> links -> scripts similar to src/content/runtime.ts
+	// The order is usually fine as the ordering between these groups are mutually exclusive,
+	// except for CSS styles and CSS stylesheet links. However CSS stylesheet links usually
+	// consist of CSS modules which should naturally take precedence over CSS styles, so the
+	// order will still work. In prod, all CSS are stylesheet links.
+	// In the future, it may be better to have only an array of head elements to avoid these assumptions.
+	let content = styles.join('\n') + links.join('\n') + scripts.join('\n');
 
 	if (result._metadata.extraHead.length > 0) {
 		for (const part of result._metadata.extraHead) {

packages/astro/test/0-css.test.js

@@ -170,6 +170,15 @@ describe('CSS', function () {
 				// 2. check CSS
 				expect(bundledCSS).to.match(new RegExp(`.${moduleClass}[^{]*{font-family:fantasy`));
 			});
+
+			it('.module.css ordering', () => {
+				const globalStyleClassIndex = bundledCSS.indexOf('.module-ordering');
+				const moduleStyleClassIndex = bundledCSS.indexOf('._module_ordering');
+				// css module has higher priority than global style
+				expect(globalStyleClassIndex).to.be.greaterThan(-1);
+				expect(moduleStyleClassIndex).to.be.greaterThan(-1);
+				expect(moduleStyleClassIndex).to.be.greaterThan(globalStyleClassIndex);
+			});
 		});
 
 		describe('Vue', () => {
@@ -412,6 +421,17 @@ describe('CSS', function () {
 			);
 		});
 
+		it('.module.css ordering', () => {
+			const globalStyleTag = $('style[data-vite-dev-id$="default.css"]');
+			const moduleStyleTag = $('link[href$="ModuleOrdering.module.css"]');
+			const globalStyleClassIndex = globalStyleTag.index();
+			const moduleStyleClassIndex = moduleStyleTag.index();
+			// css module has higher priority than global style
+			expect(globalStyleClassIndex).to.be.greaterThan(-1);
+			expect(moduleStyleClassIndex).to.be.greaterThan(-1);
+			expect(moduleStyleClassIndex).to.be.greaterThan(globalStyleClassIndex);
+		});
+
 		it('.css?raw return a string', () => {
 			const el = $('#css-raw');
 			expect(el.text()).to.equal('.foo {color: red;}');

packages/astro/test/fixtures/0-css/src/components/ModuleOrdering.jsx

@@ -0,0 +1,7 @@
+import { module_ordering } from './ModuleOrdering.module.css';
+
+export default function Counter() {
+  return (
+    <p className={`module-ordering ${module_ordering}`}>This should be green</p>
+  )
+}

packages/astro/test/fixtures/0-css/src/components/ModuleOrdering.module.css

@@ -0,0 +1,3 @@
+.module_ordering {
+  color: green;
+}

packages/astro/test/fixtures/0-css/src/pages/index.astro

@@ -1,4 +1,6 @@
 ---
+import '../styles/default.css'
+
 import AstroComponent from '../components/Astro.astro';
 import AstroComponentNone from '../components/AstroNone.astro';
 import AstroSass from '../components/AstroSass.astro';
@@ -19,6 +21,7 @@ import VueScoped from '../components/VueScoped.vue';
 import VueScss from '../components/VueScss.vue';
 import ReactDynamic from '../components/ReactDynamic.jsx';
 import SvelteDynamic from '../components/SvelteDynamic.svelte';
+import ModuleOrdering from '../components/ModuleOrdering.jsx';
 
 import '../styles/imported-url.css';
 import '../styles/imported.sass';
@@ -76,6 +79,7 @@ import raw from '../styles/raw.css?raw'
       <ReactDynamic client:load />
       <SvelteDynamic client:load />
       <pre id="css-raw">{raw}</pre>
+      <ModuleOrdering />
     </div>
   </body>
 </html>

packages/astro/test/fixtures/0-css/src/styles/default.css

@@ -0,0 +1,3 @@
+.module-ordering {
+  color: red;
+}