fix: patch virtual module null byte in data-vite-dev-id

katywings · katywings · commit 983c75e803ed · 2025-12-21T20:17:23.000+01:00
diff --git a/packages/start/src/config/manifest.ts b/packages/start/src/config/manifest.ts
@@ -70,7 +70,7 @@ export function manifest(start: SolidStartOptions): PluginOption {
 						tag: "style",
 						attrs: {
 							type: "text/css",
-							"data-vite-dev-id": "${key}",
+							"data-vite-dev-id": "${wrapId(key)}",
 							"data-vite-ref": "0",
 						},
 						children: () => import("${wrapId(value)}?inline").then(mod => mod.default),
diff --git a/packages/start/src/server/StartServer.tsx b/packages/start/src/server/StartServer.tsx
@@ -5,6 +5,7 @@ import App from "solid-start:app";
 
 import { ErrorBoundary, TopErrorBoundary } from "../shared/ErrorBoundary.tsx";
 import { useAssets } from "./assets/index.ts";
+import PatchVirtualDevStyles from "./assets/PatchVirtualDevStyles.tsx";
 import { getSsrManifest } from "./manifest/ssr-manifest.ts";
 import type { DocumentComponentProps, PageEvent } from "./types.ts";
 
@@ -29,6 +30,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
           assets={<HydrationScript />}
           scripts={
             <>
+              <PatchVirtualDevStyles nonce={nonce} />
               <script
                 type="module"
                 nonce={nonce}
diff --git a/packages/start/src/server/assets/PatchVirtualDevStyles.tsx b/packages/start/src/server/assets/PatchVirtualDevStyles.tsx
@@ -0,0 +1,31 @@
+/**
+ * Patches the data-vite-dev-id attribute for style tags of virtual modules
+ *
+ * Per Vite's convention, virtual module ids are prefixed with \0 (null byte):
+ * https://vite.dev/guide/api-plugin#virtual-modules-convention
+ *
+ * However this null byte cannot be server rendered properly.
+ * Vite client runtime then fails to find style's with wrong null bytes,
+ * and instead inserts duplicate style's.
+ *
+ * This patch replaces the serializable /@id/__x00__ with the proper null byte,
+ * and has to run before Vite's client runtime:
+ * https://github.com/vitejs/vite/blob/130e7181a55c524383c63bbfb1749d0ff7185cad/packages/vite/src/client/client.ts#L529
+ *
+ * TODO: This should be solved in Vite directly!
+ */
+const patch = function () {
+  document.querySelectorAll<HTMLElement>("style[data-vite-dev-id]").forEach(function (el) {
+    el.setAttribute("data-vite-dev-id", el.dataset.viteDevId!.replace("/@id/__x00__", "\0"));
+  });
+};
+
+const serializedPatch = `(${patch.toString()})();`;
+
+const PatchVirtualDevStyles = (props: { nonce?: string }) => {
+  if (!import.meta.env.PROD) {
+    return <script nonce={props.nonce} innerHTML={serializedPatch} />;
+  }
+};
+
+export default PatchVirtualDevStyles;
diff --git a/packages/start/src/server/spa/StartServer.tsx b/packages/start/src/server/spa/StartServer.tsx
@@ -6,6 +6,7 @@ import { getSsrManifest } from "../manifest/ssr-manifest.ts";
 
 import { TopErrorBoundary } from "../../shared/ErrorBoundary.tsx";
 import { useAssets } from "../assets/index.ts";
+import PatchVirtualDevStyles from "../assets/PatchVirtualDevStyles.tsx";
 import type { DocumentComponentProps, PageEvent } from "../types.ts";
 
 const docType = ssr("<!DOCTYPE html>");
@@ -27,6 +28,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
         <props.document
           scripts={
             <>
+              <PatchVirtualDevStyles nonce={nonce} />
               <script
                 type="module"
                 src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}
