michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix missing style imports on initial load (#2791)

Browse source 
* 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
This commit is contained in:
Ben Holmes 2022-03-15 15:02:29 -04:00 committed by GitHub
parent 11fb3745dd
commit 2d95541b52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tasty-beers-sit.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix missing styles on initial dev server load (ex. Tailwind styles)

19
packages/astro/src/core/render/dev/css.ts
View file

@ -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;
// 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>();
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)) {