Fix Svelte and Vue styles in dev (#1933)

1 files changed, 19 insertions, 9 deletions

diff --git a/packages/astro/src/core/ssr/index.ts b/packages/astro/src/core/ssr/index.ts
index 07bab9f13..7974a515e 100644
--- a/packages/astro/src/core/ssr/index.ts
+++ b/packages/astro/src/core/ssr/index.ts
@@ -29,6 +29,8 @@ import { injectTags } from './html.js';
 import { generatePaginateFunction } from './paginate.js';
 import { getParams, validateGetStaticPathsModule, validateGetStaticPathsResult } from './routing.js';
 
+const svelteAndVueStylesRE = /\?[^&]+&type=style&lang/;
+
 interface SSROptions {
   /** an instance of the AstroConfig */
   astroConfig: AstroConfig;
@@ -245,15 +247,23 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 
   // inject CSS
   [...getStylesForURL(filePath, viteServer)].forEach((href) => {
-    tags.push({
-      tag: 'link',
-      attrs: {
-        rel: 'stylesheet',
-        href,
-        'data-astro-injected': true,
-      },
-      injectTo: 'head',
-    });
+    if (mode === 'development' && svelteAndVueStylesRE.test(href)) {
+      tags.push({
+        tag: 'script',
+        attrs: { type: 'module', src: href },
+        injectTo: 'head',
+      });
+    } else {
+      tags.push({
+        tag: 'link',
+        attrs: {
+          rel: 'stylesheet',
+          href,
+          'data-astro-injected': true,
+        },
+        injectTo: 'head',
+      });
+    }
   });
 
   // add injected tags