From 9622b0019ce692229342d1066a43a8921b755a3d Mon Sep 17 00:00:00 2001
From: Brendan Allan <brendonovich@outlook.com>
Date: Sun, 26 Oct 2025 14:41:30 +0800
Subject: [PATCH 1/5] use <link> not <style>

---
 packages/start/src/config/index.ts            | 70 +++++++-------
 packages/start/src/config/manifest.ts         | 15 ++-
 packages/start/src/server/lazyRoute.tsx       | 93 ++++++++++---------
 .../server/manifest/dev-client-manifest.ts    |  7 +-
 .../src/server/manifest/dev-ssr-manifest.ts   |  7 +-
 5 files changed, 91 insertions(+), 101 deletions(-)

diff --git a/packages/start/src/config/index.ts b/packages/start/src/config/index.ts
index 879eb6530..c7cadd325 100644
--- a/packages/start/src/config/index.ts
+++ b/packages/start/src/config/index.ts
@@ -158,7 +158,7 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
 			},
 		},
 		manifest(start),
-		css(),
+		// css(),
 		fsRoutes({
 			routers: {
 				client: new SolidStartClientFileRouter({
@@ -237,37 +237,37 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
 	];
 }
 
-function css(): PluginOption {
-	let viteServer!: ViteDevServer;
-	const cssModules: Record<string, any> = {};
-	return {
-		name: "solid-start:css-hmr",
-		configureServer(dev) {
-			viteServer = dev;
-		},
-		async handleHotUpdate({ file, server }) {
-			if (file.endsWith(".css")) {
-				const resp = await server.transformRequest(file);
-				if (!resp) return;
-				const json = resp.code
-					.match(/const __vite__css = .*\n/)?.[0]
-					?.slice("const __vite__css = ".length);
-				if (!json) return;
-				resp.code = JSON.parse(json);
-				viteServer.ws.send({
-					type: "custom",
-					event: "css-update",
-					data: {
-						file,
-						contents: resp.code,
-					},
-				});
-			}
-		},
-		transform(code, id) {
-			if (isCssModulesFile(id)) {
-				cssModules[id] = code;
-			}
-		},
-	};
-}
+// function css(): PluginOption {
+// 	let viteServer!: ViteDevServer;
+// 	const cssModules: Record<string, any> = {};
+// 	return {
+// 		name: "solid-start:css-hmr",
+// 		configureServer(dev) {
+// 			viteServer = dev;
+// 		},
+// 		async handleHotUpdate({ file, server }) {
+// 			if (file.endsWith(".css")) {
+// 				const resp = await server.transformRequest(file);
+// 				if (!resp) return;
+// 				const json = resp.code
+// 					.match(/const __vite__css = .*\n/)?.[0]
+// 					?.slice("const __vite__css = ".length);
+// 				if (!json) return;
+// 				resp.code = JSON.parse(json);
+// 				viteServer.ws.send({
+// 					type: "custom",
+// 					event: "css-update",
+// 					data: {
+// 						file,
+// 						contents: resp.code,
+// 					},
+// 				});
+// 			}
+// 		},
+// 		transform(code, id) {
+// 			if (isCssModulesFile(id)) {
+// 				cssModules[id] = code;
+// 			}
+// 		},
+// 	};
+// }
diff --git a/packages/start/src/config/manifest.ts b/packages/start/src/config/manifest.ts
index 113ea9db0..0eee73d82 100644
--- a/packages/start/src/config/manifest.ts
+++ b/packages/start/src/config/manifest.ts
@@ -69,18 +69,17 @@ export function manifest(start: SolidStartOptions): PluginOption {
 						target === "ssr",
 					);
 
-					const cssAssets = Object.entries(styles).map(([key, value]) => `{
-						tag: "style",
+					const cssAssets = Object.entries(styles).map(([key, value]) => ({
+						tag: "link",
 						attrs: {
-							type: "text/css",
-							key: "${key}",
-							"data-vite-dev-id": "${key}",
+							rel: "stylesheet",
+							href: key,
+							"data-vite-dev-id": key,
 							"data-vite-ref": "0",
 						},
-						children: () => import("${value}?inline").then(mod => mod.default),
-					}`);
+					}));
 
-					return `export default [${cssAssets.join(",")}]`;
+					return `export default ${JSON.stringify(cssAssets)}`;
 				}
 			}
 		},
diff --git a/packages/start/src/server/lazyRoute.tsx b/packages/start/src/server/lazyRoute.tsx
index e88240d7a..7639f19d1 100644
--- a/packages/start/src/server/lazyRoute.tsx
+++ b/packages/start/src/server/lazyRoute.tsx
@@ -1,6 +1,7 @@
 import { type Component, createComponent, type JSX, lazy, onCleanup } from "solid-js";
 
 import { type Asset, renderAsset } from "./renderAsset.tsx";
+import { useAssets } from "solid-js/web";
 
 export default function lazyRoute<T extends Record<string, any>>(
   component: { src: string; import(): Promise<Record<string, Component>> },
@@ -22,46 +23,46 @@ export default function lazyRoute<T extends Record<string, any>>(
     if (import.meta.env.DEV) {
       const manifest = import.meta.env.SSR ? serverManifest : clientManifest;
 
-      const assets = await manifest.getAssets(component.src);
-      const styles = assets.filter((asset: any) => asset.tag === "style");
+      const assets = (await manifest.getAssets(component.src)).filter(
+        (asset: any) => asset.tag === "link"
+      );
 
-      if (import.meta.env.SSR && import.meta.hot)
-        import.meta.hot.on("css-update", data => {
-          updateStyles(styles, data);
-        });
+      // if (import.meta.env.SSR && import.meta.hot)
+      //   import.meta.hot.on("css-update", data => {
+      //     updateStyles(styles, data);
+      //   });
 
       const Comp: Component<T> = props => {
         if (typeof window !== "undefined") {
-          appendStyles(styles);
+          appendStyles(assets);
         }
 
         onCleanup(() => {
           if (typeof window !== "undefined") {
             // remove style tags added by vite when a CSS file is imported
-            cleanupStyles(styles);
+            cleanupStyles(assets);
           }
         });
 
-        return [
-          ...assets.map((asset: Asset) => renderAsset(asset)),
-          createComponent(Component, props)
-        ];
+        useAssets(() => assets.map((asset: Asset) => renderAsset(asset)));
+
+        return [createComponent(Component, props)];
       };
       return { default: Comp };
     } else {
-      const assets = await clientManifest.getAssets(component.src);
-      const styles = assets.filter(
+      const assets = (await clientManifest.getAssets(component.src)).filter(
         asset =>
           asset.tag === "style" ||
           (asset.attrs as JSX.LinkHTMLAttributes<HTMLLinkElement>).rel === "stylesheet"
       );
       if (typeof window !== "undefined") {
-        preloadStyles(styles);
+        preloadStyles(assets);
       }
+
       const Comp: Component<T> = props => {
         return [
-          ...styles.map((asset: Asset) => renderAsset(asset)),
-          createComponent(Component, props)
+          createComponent(Component, props),
+          ...assets.map((asset: Asset) => renderAsset(asset))
         ];
       };
       return { default: Comp };
@@ -69,16 +70,17 @@ export default function lazyRoute<T extends Record<string, any>>(
   });
 }
 
-function appendStyles(styles: Array<any>) {
-  styles.forEach(style => {
+function appendStyles(links: Array<any>) {
+  links.forEach(link => {
     let element = document.head.querySelector(
-      `style[data-vite-dev-id="${style.attrs["data-vite-dev-id"]}"]`
+      `link[data-vite-dev-id="${link.attrs["data-vite-dev-id"]}"]`
     );
     if (!element) {
-      element = document.createElement("style");
-      element.setAttribute("data-vite-dev-id", style.attrs["data-vite-dev-id"]);
-      element.innerHTML = style.children;
+      element = document.createElement("link");
+      element.setAttribute("data-vite-dev-id", link.attrs["data-vite-dev-id"]);
       element.setAttribute("data-vite-ref", "0");
+      element.setAttribute("href", link.attrs["href"]);
+      element.setAttribute("rel", link.attrs["rel"]);
       document.head.appendChild(element);
     }
 
@@ -86,17 +88,17 @@ function appendStyles(styles: Array<any>) {
   });
 }
 
-function updateStyles(styles: Array<any>, data: any) {
-  const styleAsset = styles.find(s => s.attrs["data-vite-dev-id"] === data.file);
-  if (styleAsset) {
-    styleAsset.children = data.contents;
-  }
-}
+// function updateStyles(links: Array<any>, data: any) {
+//   const linkAsset = links.find(s => s.attrs["data-vite-dev-id"] === data.file);
+//   // if (linkAsset) {
+//   //   linkAsset.children = data.contents;
+//   // }
+// }
 
-function cleanupStyles(styles: Array<any>) {
-  styles.forEach(style => {
+function cleanupStyles(links: Array<any>) {
+  links.forEach(link => {
     const element = document.head.querySelector(
-      `style[data-vite-dev-id="${style.attrs["data-vite-dev-id"]}"]`
+      `link[data-vite-dev-id="${link.attrs["data-vite-dev-id"]}"]`
     );
 
     if (!element) {
@@ -111,27 +113,26 @@ function cleanupStyles(styles: Array<any>) {
   });
 }
 
-if (!import.meta.env.SSR && import.meta.hot) {
-  import.meta.hot.on("css-update", data => {
-    for (const el of document.querySelectorAll(`style[data-vite-dev-id="${data.file}"]`)) {
-      el.innerHTML = data.contents;
-    }
-  });
-}
-
-export function preloadStyles(styles: Array<any>) {
-  styles.forEach(style => {
-    if (!style.attrs.href) {
+// if (!import.meta.env.SSR && import.meta.hot) {
+// import.meta.hot.on("css-update", data => {
+//   for (const el of document.querySelectorAll(`link[data-vite-dev-id="${data.file}"]`)) {
+//     el.innerHTML = data.contents;
+//   }
+// });
+// }
+
+export function preloadStyles(links: Array<any>) {
+  links.forEach(link => {
+    if (!link.attrs.href) {
       return;
     }
-
-    let element = document.head.querySelector(`link[href="${style.attrs.href}"]`);
+    let element = document.head.querySelector(`link[href="${link.attrs.href}"]`);
     if (!element) {
       // create a link preload element for the css file so it starts loading but doesnt get attached
       element = document.createElement("link");
       element.setAttribute("rel", "preload");
       element.setAttribute("as", "style");
-      element.setAttribute("href", style.attrs.href);
+      element.setAttribute("href", link.attrs.href);
       document.head.appendChild(element);
     }
   });
diff --git a/packages/start/src/server/manifest/dev-client-manifest.ts b/packages/start/src/server/manifest/dev-client-manifest.ts
index db9170e03..f59600ba7 100644
--- a/packages/start/src/server/manifest/dev-client-manifest.ts
+++ b/packages/start/src/server/manifest/dev-client-manifest.ts
@@ -12,12 +12,7 @@ export function getClientDevManifest() {
           `@manifest/client/${Date.now()}/assets?id=${id}`,
         );
 
-      const assets = (await import(/* @vite-ignore */ assetsPath)).default;
-
-      return await Promise.all(assets.map(async (v: any) => ({
-        ...v,
-        children: await v.children()
-      })));
+      return (await import(/* @vite-ignore */ assetsPath)).default;
     },
   } satisfies StartManifest & { import(id: string): Promise<any> };
 }
diff --git a/packages/start/src/server/manifest/dev-ssr-manifest.ts b/packages/start/src/server/manifest/dev-ssr-manifest.ts
index 9ecc556c8..94a89da54 100644
--- a/packages/start/src/server/manifest/dev-ssr-manifest.ts
+++ b/packages/start/src/server/manifest/dev-ssr-manifest.ts
@@ -10,12 +10,7 @@ export function getSsrDevManifest(environment: "client" | "ssr") {
           `@manifest/${environment}/${Date.now()}/assets?id=${id}`,
         );
 
-      const assets = (await import(/* @vite-ignore */ assetsPath)).default;
-
-      return await Promise.all(assets.map(async (v: any) => ({
-        ...v,
-        children: await v.children()
-      })));
+      return (await import(/* @vite-ignore */ assetsPath)).default;
     },
   } satisfies StartManifest & {
 		path(id: string): string;

From ac101ff57972171c6df40c091a1a8bba196ee4f2 Mon Sep 17 00:00:00 2001
From: Brendan Allan <brendonovich@outlook.com>
Date: Mon, 27 Oct 2025 16:05:43 +0800
Subject: [PATCH 2/5] only use collected style urls

---
 packages/start/src/config/manifest.ts       | 6 +++---
 packages/start/src/server/collect-styles.ts | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/start/src/config/manifest.ts b/packages/start/src/config/manifest.ts
index 0eee73d82..4964d3690 100644
--- a/packages/start/src/config/manifest.ts
+++ b/packages/start/src/config/manifest.ts
@@ -69,12 +69,12 @@ export function manifest(start: SolidStartOptions): PluginOption {
 						target === "ssr",
 					);
 
-					const cssAssets = Object.entries(styles).map(([key, value]) => ({
+					const cssAssets = [...styles].map((url) => ({
 						tag: "link",
 						attrs: {
 							rel: "stylesheet",
-							href: key,
-							"data-vite-dev-id": key,
+							href: url,
+							"data-vite-dev-id": url,
 							"data-vite-ref": "0",
 						},
 					}));
diff --git a/packages/start/src/server/collect-styles.ts b/packages/start/src/server/collect-styles.ts
index ab6d34b21..e0f60b131 100644
--- a/packages/start/src/server/collect-styles.ts
+++ b/packages/start/src/server/collect-styles.ts
@@ -155,7 +155,7 @@ export async function findStylesInModuleGraph(
 
 	const dependencies = await findFilesDepedencies(vite, [absolute], ssr);
 
-	const styles: Record<string, any> = {};
+	const styles = new Set<string>();
 
 	for (const dep of dependencies) {
 		if (isCssFile(dep.url)) {
@@ -164,7 +164,7 @@ export async function findStylesInModuleGraph(
 				depURL = injectQuery(dep.url, "inline");
 			}
 
-      styles[join(vite.config.root, dep.url)] = dep.url;
+      styles.add(dep.url);
 		}
 	}
 

From 2dd9ec084e36a88313c22c55663e923e14c2b055 Mon Sep 17 00:00:00 2001
From: Brendan Allan <brendonovich@outlook.com>
Date: Mon, 27 Oct 2025 17:04:57 +0800
Subject: [PATCH 3/5] use dep and id properly

---
 packages/start/src/config/manifest.ts       | 6 +++---
 packages/start/src/server/collect-styles.ts | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/start/src/config/manifest.ts b/packages/start/src/config/manifest.ts
index 4964d3690..f4eea5cf7 100644
--- a/packages/start/src/config/manifest.ts
+++ b/packages/start/src/config/manifest.ts
@@ -69,12 +69,12 @@ export function manifest(start: SolidStartOptions): PluginOption {
 						target === "ssr",
 					);
 
-					const cssAssets = [...styles].map((url) => ({
-						tag: "link",
+					const cssAssets = Object.entries(styles).map(([id, url]) => ({
+					  tag: "link",
 						attrs: {
 							rel: "stylesheet",
 							href: url,
-							"data-vite-dev-id": url,
+							"data-vite-dev-id": id,
 							"data-vite-ref": "0",
 						},
 					}));
diff --git a/packages/start/src/server/collect-styles.ts b/packages/start/src/server/collect-styles.ts
index e0f60b131..90b08b32a 100644
--- a/packages/start/src/server/collect-styles.ts
+++ b/packages/start/src/server/collect-styles.ts
@@ -155,7 +155,7 @@ export async function findStylesInModuleGraph(
 
 	const dependencies = await findFilesDepedencies(vite, [absolute], ssr);
 
-	const styles = new Set<string>();
+	const styles: Record<string, string> = {};
 
 	for (const dep of dependencies) {
 		if (isCssFile(dep.url)) {
@@ -164,7 +164,7 @@ export async function findStylesInModuleGraph(
 				depURL = injectQuery(dep.url, "inline");
 			}
 
-      styles.add(dep.url);
+			if(dep.id) styles[dep.id] = (dep.url);
 		}
 	}
 

From 28865b8936daf2699f4cda2b0862e343cc0cd6d3 Mon Sep 17 00:00:00 2001
From: Brendan Allan <brendonovich@outlook.com>
Date: Sat, 1 Nov 2025 16:35:42 +0800
Subject: [PATCH 4/5] fetchPriority: "high"

---
 packages/start/src/config/manifest.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/start/src/config/manifest.ts b/packages/start/src/config/manifest.ts
index f4eea5cf7..1ce960dac 100644
--- a/packages/start/src/config/manifest.ts
+++ b/packages/start/src/config/manifest.ts
@@ -72,10 +72,11 @@ export function manifest(start: SolidStartOptions): PluginOption {
 					const cssAssets = Object.entries(styles).map(([id, url]) => ({
 					  tag: "link",
 						attrs: {
-							rel: "stylesheet",
-							href: url,
-							"data-vite-dev-id": id,
-							"data-vite-ref": "0",
+						  rel: "stylesheet",
+						  fetchPriority: "high",
+						  href: url,
+						  "data-vite-dev-id": id,
+						  "data-vite-ref": "0",
 						},
 					}));
 

From c274e6c1cabc10be670ddcdc84d9529f44e1b28d Mon Sep 17 00:00:00 2001
From: Brendan Allan <brendonovich@outlook.com>
Date: Sat, 1 Nov 2025 16:37:24 +0800
Subject: [PATCH 5/5] don't ignore ssr deps in node_modules

---
 packages/start/src/server/collect-styles.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/start/src/server/collect-styles.ts b/packages/start/src/server/collect-styles.ts
index 90b08b32a..d03e6abfb 100644
--- a/packages/start/src/server/collect-styles.ts
+++ b/packages/start/src/server/collect-styles.ts
@@ -37,9 +37,7 @@ async function getViteModuleNode(
 		node = vite.moduleGraph.getModuleById(nodePath);
 	}
 
-	if (!node || nodePath.includes("node_modules")) {
-		return;
-	}
+	if (!node) return;
 
 	await prepareTransformResult(vite, node);