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

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)) {