Fix style crawling logic for CSS HMR (#7565)

withastro · Jul 11, 2023 · b6613ae · b6613ae
1 parent a273b53
commit b6613ae
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/.changeset/red-turtles-drum.md 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
@@ -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
@@ -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
@@ -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'],
 				},