From 8bbdcf17dd6c9142c18bc1551ee4854a60bc58cb Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Wed, 8 Feb 2023 10:15:36 -0500
Subject: [PATCH] Take dynamic imports into account for CSS ordering (#6176)

* Take dynamic imports into account for CSS ordering

* Adding a changeset

* updated lockfile
---
 .changeset/happy-dragons-invite.md            |  5 ++++
 packages/astro/src/core/build/graph.ts        | 11 ++++++++-
 packages/astro/test/css-order-import.test.js  | 23 +++++++++++++++++--
 .../css-order-dynamic-import/package.json     |  6 +++++
 .../src/components/One.astro                  |  4 ++++
 .../src/components/Three.astro                |  6 +++++
 .../src/components/Two.astro                  |  5 ++++
 .../src/pages/one.astro                       | 13 +++++++++++
 .../src/pages/two.astro                       | 19 +++++++++++++++
 .../src/styles/One.css                        |  3 +++
 .../src/styles/base.css                       |  3 +++
 pnpm-lock.yaml                                |  6 +++++
 12 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/happy-dragons-invite.md
 create mode 100644 packages/astro/test/fixtures/css-order-dynamic-import/package.json
 create mode 100644 packages/astro/test/fixtures/css-order-dynamic-import/src/components/One.astro
 create mode 100644 packages/astro/test/fixtures/css-order-dynamic-import/src/components/Three.astro
 create mode 100644 packages/astro/test/fixtures/css-order-dynamic-import/src/components/Two.astro
 create mode 100644 packages/astro/test/fixtures/css-order-dynamic-import/src/pages/one.astro
 create mode 100644 packages/astro/test/fixtures/css-order-dynamic-import/src/pages/two.astro
 create mode 100644 packages/astro/test/fixtures/css-order-dynamic-import/src/styles/One.css
 create mode 100644 packages/astro/test/fixtures/css-order-dynamic-import/src/styles/base.css

diff --git a/.changeset/happy-dragons-invite.md b/.changeset/happy-dragons-invite.md
new file mode 100644
index 000000000..510f18e91
--- /dev/null
+++ b/.changeset/happy-dragons-invite.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Take dynamic import into account in CSS ordering
diff --git a/packages/astro/src/core/build/graph.ts b/packages/astro/src/core/build/graph.ts
index 5edb07a71..5b4b2107c 100644
--- a/packages/astro/src/core/build/graph.ts
+++ b/packages/astro/src/core/build/graph.ts
@@ -16,8 +16,17 @@ export function* walkParentInfos(
 	const info = ctx.getModuleInfo(id);
 	if (info) {
 		if (childId) {
-			order += info.importedIds.indexOf(childId);
+			const idx = info.importedIds.indexOf(childId);
+			if(idx === -1) {
+				// Dynamic imports come after all normal imports. So first add the number of normal imports.
+				order += info.importedIds.length;
+				// Then add on the dynamic ones.
+				order += info.dynamicallyImportedIds.indexOf(childId);
+			} else {
+				order += idx;
+			}
 		}
+		
 		yield [info, depth, order];
 	}
 	if (until?.(id)) return;
diff --git a/packages/astro/test/css-order-import.test.js b/packages/astro/test/css-order-import.test.js
index 09f54a0e6..b93822a69 100644
--- a/packages/astro/test/css-order-import.test.js
+++ b/packages/astro/test/css-order-import.test.js
@@ -39,8 +39,8 @@ describe('CSS ordering - import order', () => {
 	 * @param {string} href
 	 * @returns {Promise<{ href: string; css: string; }>}
 	 */
-	async function getLinkContent(href) {
-		const css = await fixture.readFile(href);
+	async function getLinkContent(href, f = fixture) {
+		const css = await f.readFile(href);
 		return { href, css };
 	}
 
@@ -107,4 +107,23 @@ describe('CSS ordering - import order', () => {
 			expect(idx2).to.be.greaterThan(idx3);
 		});
 	});
+
+	describe('Dynamic import', () => {
+		// eslint-disable-next-line @typescript-eslint/no-shadow
+		let fixture;
+		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/css-order-dynamic-import/',
+			});
+			await fixture.build();
+		});
+
+		it('dynamic imports taken into account', async () => {
+			let html = await fixture.readFile('/one/index.html');
+			const content = await Promise.all(getLinks(html).map((href) => getLinkContent(href, fixture)));
+			let [link1, link2] = content;
+			expect(link1.css).to.contain('aliceblue');
+			expect(link2.css).to.contain('yellow');
+		});
+	});
 });
diff --git a/packages/astro/test/fixtures/css-order-dynamic-import/package.json b/packages/astro/test/fixtures/css-order-dynamic-import/package.json
new file mode 100644
index 000000000..2901a838f
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-dynamic-import/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@test/css-order-import",
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/css-order-dynamic-import/src/components/One.astro b/packages/astro/test/fixtures/css-order-dynamic-import/src/components/One.astro
new file mode 100644
index 000000000..54b1039b1
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-dynamic-import/src/components/One.astro
@@ -0,0 +1,4 @@
+---
+import '../styles/One.css';
+---
+<link>
diff --git a/packages/astro/test/fixtures/css-order-dynamic-import/src/components/Three.astro b/packages/astro/test/fixtures/css-order-dynamic-import/src/components/Three.astro
new file mode 100644
index 000000000..8918fdc78
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-dynamic-import/src/components/Three.astro
@@ -0,0 +1,6 @@
+---
+---
+<style>
+	body { background: yellow;}
+</style>
+<div>testing</div>
diff --git a/packages/astro/test/fixtures/css-order-dynamic-import/src/components/Two.astro b/packages/astro/test/fixtures/css-order-dynamic-import/src/components/Two.astro
new file mode 100644
index 000000000..1afb0ef87
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-dynamic-import/src/components/Two.astro
@@ -0,0 +1,5 @@
+<style>
+	body {
+		background: aliceblue;
+	}
+</style>
diff --git a/packages/astro/test/fixtures/css-order-dynamic-import/src/pages/one.astro b/packages/astro/test/fixtures/css-order-dynamic-import/src/pages/one.astro
new file mode 100644
index 000000000..abd194abc
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-dynamic-import/src/pages/one.astro
@@ -0,0 +1,13 @@
+---
+import '../components/One.astro';
+import '../components/Two.astro';
+await import('../components/Three.astro');
+---
+<html>
+<head>
+	<title>Test</title>
+</head>
+<body>
+	<h1>Test</h1>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/css-order-dynamic-import/src/pages/two.astro b/packages/astro/test/fixtures/css-order-dynamic-import/src/pages/two.astro
new file mode 100644
index 000000000..018ab1866
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-dynamic-import/src/pages/two.astro
@@ -0,0 +1,19 @@
+---
+import One from '../components/One.astro';
+import Two from '../components/Two.astro';
+---
+<html>
+<head>
+	<title>Test</title>
+	<One />
+	<Two />
+	<style>
+		body {
+			background: whitesmoke;
+		}
+	</style>
+</head>
+<body>
+	<h1>Test</h1>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/css-order-dynamic-import/src/styles/One.css b/packages/astro/test/fixtures/css-order-dynamic-import/src/styles/One.css
new file mode 100644
index 000000000..66d2bb71b
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-dynamic-import/src/styles/One.css
@@ -0,0 +1,3 @@
+body {
+	background: burlywood;
+}
diff --git a/packages/astro/test/fixtures/css-order-dynamic-import/src/styles/base.css b/packages/astro/test/fixtures/css-order-dynamic-import/src/styles/base.css
new file mode 100644
index 000000000..828bff206
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-dynamic-import/src/styles/base.css
@@ -0,0 +1,3 @@
+body {
+	background: green;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4f324312..73a3bfe82 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1708,6 +1708,12 @@ importers:
     dependencies:
       astro: link:../../..
 
+  packages/astro/test/fixtures/css-order-dynamic-import:
+    specifiers:
+      astro: workspace:*
+    dependencies:
+      astro: link:../../..
+
   packages/astro/test/fixtures/css-order-import:
     specifiers:
       astro: workspace:*