From 2d95541b52118f787144720cb28cdd64644b903a Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Tue, 15 Mar 2022 15:02:29 -0400 Subject: [PATCH] Fix missing style imports on initial load (#2791) * fix: missing style imports on initial load * chore: changeset * fix: update comment on using URL map * fix: use getModulesByFile to match on ID properly * refactor: use imperative loop for performance * fix: update scan from each matching mod * fix: update scan from importedMod loop * fix: avoid scanning all related mods --- .changeset/tasty-beers-sit.md | 5 +++++ packages/astro/src/core/render/dev/css.ts | 19 +++++++++++++------ 2 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 .changeset/tasty-beers-sit.md diff --git a/.changeset/tasty-beers-sit.md b/.changeset/tasty-beers-sit.md new file mode 100644 index 0000000000..bce2b87414 --- /dev/null +++ b/.changeset/tasty-beers-sit.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix missing styles on initial dev server load (ex. Tailwind styles) diff --git a/packages/astro/src/core/render/dev/css.ts b/packages/astro/src/core/render/dev/css.ts index 631721c7b0..9bb84d939a 100644 --- a/packages/astro/src/core/render/dev/css.ts +++ b/packages/astro/src/core/render/dev/css.ts @@ -22,15 +22,22 @@ export function getStylesForURL(filePath: URL, viteServer: vite.ViteDevServer): // recursively crawl module graph to get all style files imported by parent id function crawlCSS(id: string, scanned = new Set()) { - // note: use .idToModuleMap() for lookups (.urlToModuleMap() may produce different - // URLs for modules depending on conditions, making resolution difficult) - const moduleName = viteServer.moduleGraph.idToModuleMap.get(id); - if (!moduleName || !moduleName.id) return; + // note: use .getModulesByFile() to get all related nodes of the same URL + // using .getModuleById() could cause missing style imports on initial server load + const relatedMods = viteServer.moduleGraph.getModulesByFile(id) ?? new Set(); + const importedModules = new Set(); - scanned.add(moduleName.id); + for (const relatedMod of relatedMods) { + if (id === relatedMod.id) { + scanned.add(id); + for (const importedMod of relatedMod.importedModules) { + importedModules.add(importedMod); + } + } + } // scan importedModules - for (const importedModule of moduleName.importedModules) { + for (const importedModule of importedModules) { if (!importedModule.id || scanned.has(importedModule.id)) continue; const ext = path.extname(importedModule.url.toLowerCase()); if (STYLE_EXTENSIONS.has(ext)) {