From 5ffdec758061b55a328d2e8037684c3b2f1e0184 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Wed, 5 Jul 2023 14:13:45 +0800
Subject: [PATCH] Fix style crawling logic for CSS HMR (#7565)

---
 .changeset/red-turtles-drum.md                 |  5 +++++
 .../astro/src/core/module-loader/loader.ts     |  1 +
 packages/astro/src/core/render/dev/vite.ts     | 18 +++++++++++-------
 packages/astro/test/units/dev/styles.test.js   |  5 +++++
 4 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/red-turtles-drum.md

diff --git a/.changeset/red-turtles-drum.md b/.changeset/red-turtles-drum.md
new file mode 100644
index 000000000000..ef1a56cace80
--- /dev/null
+++ b/.changeset/red-turtles-drum.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix style crawling logic for CSS HMR
diff --git a/packages/astro/src/core/module-loader/loader.ts b/packages/astro/src/core/module-loader/loader.ts
index 39c24253ed26..96a02d622876 100644
--- a/packages/astro/src/core/module-loader/loader.ts
+++ b/packages/astro/src/core/module-loader/loader.ts
@@ -48,6 +48,7 @@ export interface ModuleNode {
 	} | null;
 	ssrError: Error | null;
 	importedModules: Set<ModuleNode>;
+	importers: Set<ModuleNode>
 }
 
 export interface ModuleInfo {
diff --git a/packages/astro/src/core/render/dev/vite.ts b/packages/astro/src/core/render/dev/vite.ts
index 39df7d269c93..506d77a88eaf 100644
--- a/packages/astro/src/core/render/dev/vite.ts
+++ b/packages/astro/src/core/render/dev/vite.ts
@@ -41,7 +41,6 @@ export async function* crawlGraph(
 			continue;
 		}
 		if (id === entry.id) {
-			const urlDeps = getDepsFromEntry(entry);
 			scanned.add(id);
 			const entryIsStyle = isCSSRequest(id);
 
@@ -84,7 +83,9 @@ export async function* crawlGraph(
 				}
 
 				// Make sure the `importedModule` traversed is explicitly imported by the user, and not by HMR
-				if (urlDeps.includes(importedModule.url) && !isPropagationStoppingPoint) {
+				// TODO: This isn't very performant. Maybe look into using `ssrTransformResult` but make sure it
+				// doesn't regress UnoCSS. https://github.com/withastro/astro/issues/7529
+				if (isImportedBy(id, importedModule) && !isPropagationStoppingPoint) {
 					importedModules.add(importedModule);
 				}
 			}
@@ -103,10 +104,13 @@ export async function* crawlGraph(
 	}
 }
 
-function getDepsFromEntry(entry: ModuleNode) {
-	let deps = entry.ssrTransformResult?.deps ?? [];
-	if (entry.ssrTransformResult?.dynamicDeps) {
-		deps = deps.concat(entry.ssrTransformResult.dynamicDeps);
+// Verify true imports. If the child module has the parent as an importers, it's
+// a real import.
+function isImportedBy(parent: string, entry: ModuleNode) {
+	for (const importer of entry.importers) {
+		if (importer.id === parent) {
+			return true;
+		}
 	}
-	return deps.map((dep) => unwrapId(dep));
+	return false;
 }
diff --git a/packages/astro/test/units/dev/styles.test.js b/packages/astro/test/units/dev/styles.test.js
index 45bb6e172475..ba27a1c8b0c3 100644
--- a/packages/astro/test/units/dev/styles.test.js
+++ b/packages/astro/test/units/dev/styles.test.js
@@ -29,13 +29,16 @@ describe('Crawling graph for CSS', () => {
 					{
 						id: aboutId,
 						url: aboutId,
+						importers: new Set(),
 					},
 					{
 						id: indexId + '?astro&style.css',
 						url: indexId + '?astro&style.css',
+						importers: new Set([{ id: indexId }]),
 						ssrModule: {},
 					},
 				],
+				importers: new Set(),
 				ssrTransformResult: {
 					deps: [indexId + '?astro&style.css'],
 				},
@@ -46,9 +49,11 @@ describe('Crawling graph for CSS', () => {
 					{
 						id: aboutId + '?astro&style.css',
 						url: aboutId + '?astro&style.css',
+						importers: new Set([{ id: aboutId }]),
 						ssrModule: {},
 					},
 				],
+				importers: new Set(),
 				ssrTransformResult: {
 					deps: [aboutId + '?astro&style.css'],
 				},