Use <link> instead of <style> in dev

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;
+// 			}
+// 		},
+// 	};
+// }

packages/start/src/config/manifest.ts

@@ -69,18 +69,18 @@ export function manifest(start: SolidStartOptions): PluginOption {
 						target === "ssr",
 					);
 
-					const cssAssets = Object.entries(styles).map(([key, value]) => `{
-						tag: "style",
+					const cssAssets = Object.entries(styles).map(([id, url]) => ({
+					  tag: "link",
 						attrs: {
-							type: "text/css",
-							key: "${key}",
-							"data-vite-dev-id": "${key}",
-							"data-vite-ref": "0",
+						  rel: "stylesheet",
+						  fetchPriority: "high",
+						  href: url,
+						  "data-vite-dev-id": id,
+						  "data-vite-ref": "0",
 						},
-						children: () => import("${value}?inline").then(mod => mod.default),
-					}`);
+					}));
 
-					return `export default [${cssAssets.join(",")}]`;
+					return `export default ${JSON.stringify(cssAssets)}`;
 				}
 			}
 		},

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);
 
@@ -155,7 +153,7 @@ export async function findStylesInModuleGraph(
 
 	const dependencies = await findFilesDepedencies(vite, [absolute], ssr);
 
-	const styles: Record<string, any> = {};
+	const styles: Record<string, string> = {};
 
 	for (const dep of dependencies) {
 		if (isCssFile(dep.url)) {
@@ -164,7 +162,7 @@ export async function findStylesInModuleGraph(
 				depURL = injectQuery(dep.url, "inline");
 			}
 
-      styles[join(vite.config.root, dep.url)] = dep.url;
+			if(dep.id) styles[dep.id] = (dep.url);
 		}
 	}
 

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,81 +23,82 @@ 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 };
     }
   });
 }
 
-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);
     }
 
     element.setAttribute("data-vite-ref", `${Number(element.getAttribute("data-vite-ref")) + 1}`);
   });
 }
 
-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);
     }
   });

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> };
 }

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;