fix: resolve 404 for virtual CSS modules during dev SSR

.changeset/fix-virtual-css-dev-ssr.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+fix: resolve 404 error for virtual CSS modules during dev SSR

packages/qwik/src/optimizer/src/plugins/vite-dev-server.ts

@@ -196,7 +196,7 @@ export async function configureDevServer(
                     location: 'head',
                     attributes: {
                       rel: 'stylesheet',
-                      href: `${base}${url.slice(1)}`,
+                      href: toDevServerHref(base, url),
                     },
                   });
                 }
@@ -261,7 +261,7 @@ export async function configureDevServer(
                   !hasCSSImporter &&
                   !cssImportedByCSS.has(v.url)
                 ) {
-                  res.write(`<link rel="stylesheet" href="${base}${v.url.slice(1)}">`);
+                  res.write(`<link rel="stylesheet" href="${toDevServerHref(base, v.url)}">`);
                   added.add(v.url);
                 }
               }
@@ -438,6 +438,16 @@ function relativeURL(url: string, base: string) {
   return url;
 }
 
+/** Converts a Vite module graph URL to a dev server href for `<link>` tags. */
+export function toDevServerHref(base: string, url: string): string {
+  if (url.startsWith('/')) {
+    return `${base}${url.slice(1)}`;
+  }
+  // Virtual modules need the /@id/ prefix; strip the \0 Rollup convention prefix
+  const cleanUrl = url.startsWith('\0') ? url.slice(1) : url;
+  return `${base}${VALID_ID_PREFIX.slice(1)}${cleanUrl}`;
+}
+
 const DEV_QWIK_INSPECTOR = (opts: NormalizedQwikPluginOptions['devTools'], srcDir: string) => {
   const qwikdevtools = {
     hotKeys: opts.clickToSource ?? [],

packages/qwik/src/optimizer/src/plugins/vite-dev-server.unit.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from 'vitest';
+import { toDevServerHref } from './vite-dev-server';
+
+describe('toDevServerHref', () => {
+  test('normal CSS file with base /', () => {
+    expect(toDevServerHref('/', '/src/styles.css')).toBe('/src/styles.css');
+  });
+
+  test('normal CSS file with custom base', () => {
+    expect(toDevServerHref('/my-app/', '/src/styles.css')).toBe('/my-app/src/styles.css');
+  });
+
+  test('normal CSS file with HMR timestamp', () => {
+    expect(toDevServerHref('/', '/src/styles.css?t=1234567890')).toBe(
+      '/src/styles.css?t=1234567890'
+    );
+  });
+
+  test('virtual CSS module with base /', () => {
+    expect(toDevServerHref('/', 'virtual:my-plugin:foo.css')).toBe(
+      '/@id/virtual:my-plugin:foo.css'
+    );
+  });
+
+  test('virtual CSS module with custom base', () => {
+    expect(toDevServerHref('/my-app/', 'virtual:my-plugin:foo.css')).toBe(
+      '/my-app/@id/virtual:my-plugin:foo.css'
+    );
+  });
+
+  test('virtual CSS module with \\0 prefix', () => {
+    expect(toDevServerHref('/', '\0virtual:my-plugin:foo.css')).toBe(
+      '/@id/virtual:my-plugin:foo.css'
+    );
+  });
+
+  test('virtual CSS module with \\0 prefix and custom base', () => {
+    expect(toDevServerHref('/my-app/', '\0virtual:my-plugin:foo.css')).toBe(
+      '/my-app/@id/virtual:my-plugin:foo.css'
+    );
+  });
+
+  test('virtual CSS module with path-like ID', () => {
+    expect(toDevServerHref('/', 'virtual:my-plugin:/src/routes/index.tsx.css')).toBe(
+      '/@id/virtual:my-plugin:/src/routes/index.tsx.css'
+    );
+  });
+});