Use URLs for styles, add CSS dev tests (#1993)

#1973
withastro · Nov 23, 2021 · 7a7427e · 7a7427e
1 parent b8b04dc
commit 7a7427e
Show file tree

Hide file tree

Showing 7 changed files with 267 additions and 196 deletions.
diff --git a/.changeset/tame-melons-think.md b/.changeset/tame-melons-think.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix CSS URLs on Windows
diff --git a/packages/astro/src/core/ssr/css.ts b/packages/astro/src/core/ssr/css.ts
@@ -25,7 +25,7 @@ export function getStylesForURL(filePath: URL, viteServer: vite.ViteDevServer):
       if (!importedModule.id || scanned.has(importedModule.id)) continue;
       const ext = path.extname(importedModule.id.toLowerCase());
       if (STYLE_EXTENSIONS.has(ext)) {
-        css.add(importedModule.id); // if style file, add to list
+        css.add(importedModule.url || importedModule.id); // if style file, add to list
       } else {
         crawlCSS(importedModule.id, scanned); // otherwise, crawl file to see if it imports any CSS
       }

diff --git a/packages/astro/src/core/ssr/index.ts b/packages/astro/src/core/ssr/index.ts
@@ -29,7 +29,7 @@ import { injectTags } from './html.js';
 import { generatePaginateFunction } from './paginate.js';
 import { getParams, validateGetStaticPathsModule, validateGetStaticPathsResult } from './routing.js';
 
-const svelteAndVueStylesRE = /\?[^&]+&type=style&lang/;
+const svelteStylesRE = /svelte\?svelte&type=style/;
 
 interface SSROptions {
   /** an instance of the AstroConfig */
@@ -247,7 +247,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 
   // inject CSS
   [...getStylesForURL(filePath, viteServer)].forEach((href) => {
-    if (mode === 'development' && svelteAndVueStylesRE.test(href)) {
+    if (mode === 'development' && svelteStylesRE.test(href)) {
       tags.push({
         tag: 'script',
         attrs: { type: 'module', src: href },