diff --git a/.changeset/afraid-mirrors-tease.md b/.changeset/afraid-mirrors-tease.md new file mode 100644 index 000000000000..5d0c318ef836 --- /dev/null +++ b/.changeset/afraid-mirrors-tease.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Skips adding CSS dependencies of CSS Vite modules as style tags in the HTML diff --git a/packages/astro/src/vite-plugin-astro-server/vite.ts b/packages/astro/src/vite-plugin-astro-server/vite.ts index 7a25a71a5711..613a314beb0e 100644 --- a/packages/astro/src/vite-plugin-astro-server/vite.ts +++ b/packages/astro/src/vite-plugin-astro-server/vite.ts @@ -41,7 +41,15 @@ export async function* crawlGraph( } if (id === entry.id) { scanned.add(id); - const entryIsStyle = isCSSRequest(id); + + // CSS requests `importedModules` are usually from `@import`, but we don't really need + // to crawl into those as the `@import` code are already inlined into this `id`. + // If CSS requests `importedModules` contain non-CSS files, e.g. Tailwind might add HMR + // dependencies as `importedModules`, we should also skip them as they aren't really + // imported. Without this, every hoisted script in the project is added to every page! + if (isCSSRequest(id)) { + continue + } for (const importedModule of entry.importedModules) { if (!importedModule.id) continue; @@ -54,13 +62,6 @@ export async function* crawlGraph( // NOTE: Cannot use `new URL()` here because not all IDs will be valid paths. // For example, `virtual:image-loader` if you don't have the plugin installed. const importedModulePathname = importedModule.id.replace(STRIP_QUERY_PARAMS_REGEX, ''); - // If the entry is a style, skip any modules that are not also styles. - // Tools like Tailwind might add HMR dependencies as `importedModules` - // but we should skip them--they aren't really imported. Without this, - // every hoisted script in the project is added to every page! - if (entryIsStyle && !isCSSRequest(importedModulePathname)) { - continue; - } const isFileTypeNeedingSSR = fileExtensionsToSSR.has(npath.extname(importedModulePathname)); // A propagation stopping point is a module with the ?astroPropagatedAssets flag.