Use accumulated sort order when order production CSS (#5549)

* Use accumulated sort order when order production CSS

* Adding a changeset

* Fix lockfile issue

.changeset/good-terms-walk.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Use accumulated sort order when order production CSS

packages/astro/src/core/build/graph.ts

@@ -7,21 +7,24 @@ export function* walkParentInfos(
 	id: string,
 	ctx: { getModuleInfo: GetModuleInfo },
 	depth = 0,
+	order = 0,
 	seen = new Set<string>(),
 	childId = ''
 ): Generator<[ModuleInfo, number, number], void, unknown> {
 	seen.add(id);
 	const info = ctx.getModuleInfo(id);
 	if (info) {
-		let order = childId ? info.importedIds.indexOf(childId) : 0;
+		if(childId) {
+			order += info.importedIds.indexOf(childId)
+		}
 		yield [info, depth, order];
 	}
 	const importers = (info?.importers || []).concat(info?.dynamicImporters || []);
 	for (const imp of importers) {
 		if (seen.has(imp)) {
 			continue;
 		}
-		yield* walkParentInfos(imp, ctx, ++depth, seen, id);
+		yield* walkParentInfos(imp, ctx, ++depth, order, seen, id);
 	}
 }
 

packages/astro/test/css-order-layout.test.js

@@ -0,0 +1,63 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('CSS ordering - import order with layouts', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/css-order-layout/',
+		});
+	});
+
+	/**
+	 *
+	 * @param {string} html
+	 * @returns {string[]}
+	 */
+	function getLinks(html) {
+		let $ = cheerio.load(html);
+		let out = [];
+		$('link[rel=stylesheet]').each((i, el) => {
+			out.push($(el).attr('href'));
+		});
+		return out;
+	}
+
+	/**
+	 *
+	 * @param {string} href
+	 * @returns {Promise<{ href: string; css: string; }>}
+	 */
+	async function getLinkContent(href) {
+		const css = await fixture.readFile(href);
+		return { href, css };
+	}
+
+	describe('Production', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('Page level CSS is defined lower in the page', async () => {
+			let html = await fixture.readFile('/index.html');
+
+
+			const content = await Promise.all(getLinks(html).map((href) => getLinkContent(href)));
+
+			let specialButtonCSS = -1;
+			let globalCSS = -1;
+			for(let i = 0; i < content.length; i++) {
+				if(content[i].css.indexOf('.SpecialButton') !== -1) {
+					specialButtonCSS = i;
+				} else if(content[i].css.indexOf('green') !== -1) {
+					globalCSS = i;
+				}
+			}
+
+			expect(globalCSS).to.equal(0, 'global css sorted on top')
+			expect(specialButtonCSS).to.equal(1, 'component level css sorted last');
+		});
+	});
+});

packages/astro/test/fixtures/css-order-layout/astro.config.mjs

@@ -0,0 +1,3 @@
+import { defineConfig } from "astro/config";
+
+export default defineConfig({});

packages/astro/test/fixtures/css-order-layout/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@test/css-order-layout",
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/css-order-layout/src/components/BlueButton.astro

@@ -0,0 +1,17 @@
+---
+import Button from "./Button.astro";
+
+/*
+TODO:
+- Improve keyboard navigation / focus handling ref: https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html
+ */
+---
+
+<style>
+  .SpecialButton {
+    color: blue;
+  }
+</style>
+
+<div>This button should be blue</div>
+<Button class="SpecialButton" />

packages/astro/test/fixtures/css-order-layout/src/components/Button.astro

@@ -0,0 +1,8 @@
+---
+type Props = {
+  class?: string;
+};
+const { class: className } = Astro.props as Props;
+---
+
+<button class:list={["btn", className]} type="button"> button</button>

packages/astro/test/fixtures/css-order-layout/src/components/MainHead.astro

@@ -0,0 +1,5 @@
+---
+import "../styles/global.css";
+---
+
+<meta charset="UTF-8" />

packages/astro/test/fixtures/css-order-layout/src/layouts/Main.astro

@@ -0,0 +1,14 @@
+---
+import MainHead from "../components/MainHead.astro";
+import BlueButton from "../components/BlueButton.astro";
+---
+
+<html lang="en">
+  <head>
+    <MainHead />
+  </head>
+  <body>
+    <BlueButton />
+    <slot />
+  </body>
+</html>

packages/astro/test/fixtures/css-order-layout/src/layouts/Second.astro

@@ -0,0 +1,14 @@
+---
+import MainHead from "../components/MainHead.astro";
+import BlueButton from "../components/BlueButton.astro";
+---
+
+<html lang="en">
+  <head>
+    <MainHead />
+  </head>
+  <body>
+    <BlueButton />
+    <slot />
+  </body>
+</html>

packages/astro/test/fixtures/css-order-layout/src/pages/admin.astro

@@ -0,0 +1,9 @@
+---
+import MainHead from "../components/MainHead.astro";
+---
+
+<html lang="en">
+  <head>
+    <MainHead />
+  </head>
+</html>

packages/astro/test/fixtures/css-order-layout/src/pages/beta.astro

@@ -0,0 +1,11 @@
+---
+import SecondLayout from "../layouts/Second.astro";
+---
+
+<SecondLayout>
+
+  <div>
+    Subpage (<a href='/'>Home</a>)
+  </div>
+
+</SecondLayout>

packages/astro/test/fixtures/css-order-layout/src/pages/index.astro

@@ -0,0 +1,11 @@
+---
+import MainLayout from "../layouts/Main.astro";
+---
+
+<MainLayout>
+
+  <div>
+    Home (<a href='/beta'>Subpage</a>)
+  </div>
+
+</MainLayout>

packages/astro/test/fixtures/css-order-layout/src/styles/global.css

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