Fix style crawling logic for CSS HMR (#7565)

4 files changed, 22 insertions, 7 deletions

diff --git a/.changeset/red-turtles-drum.md b/.changeset/red-turtles-drum.md
new file mode 100644
index 000000000..ef1a56cac
--- /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 39c24253e..96a02d622 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 39df7d269..506d77a88 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 45bb6e172..ba27a1c8b 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'],
 				},