Fix style crawling logic for CSS HMR (#7565)

This commit is contained in:
Bjorn Lu 2023-07-05 14:13:45 +08:00 committed by GitHub
parent c459b81785
commit 5ffdec7580
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 7 deletions

View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix style crawling logic for CSS HMR

View file

@ -48,6 +48,7 @@ export interface ModuleNode {
} | null;
ssrError: Error | null;
importedModules: Set<ModuleNode>;
importers: Set<ModuleNode>
}
export interface ModuleInfo {

View file

@ -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;
}

View file

@ -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'],
},