diff options
| -rw-r--r-- | .changeset/tasty-beers-sit.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/core/render/dev/css.ts | 21 |
2 files changed, 19 insertions, 7 deletions
diff --git a/.changeset/tasty-beers-sit.md b/.changeset/tasty-beers-sit.md new file mode 100644 index 000000000..bce2b8741 --- /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 631721c7b..9bb84d939 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<string>()) { - // 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; - - scanned.add(moduleName.id); + // 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<vite.ModuleNode>(); + + 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)) { |