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 { }, }, manifest(start), - css(), + // css(), fsRoutes({ routers: { client: new SolidStartClientFileRouter({ @@ -237,37 +237,37 @@ export function solidStart(options?: SolidStartOptions): Array { ]; } -function css(): PluginOption { - let viteServer!: ViteDevServer; - const cssModules: Record = {}; - 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 = {}; +// 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..1ce960dac 100644 --- a/packages/start/src/config/manifest.ts +++ b/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)}`; } } }, diff --git a/packages/start/src/server/collect-styles.ts b/packages/start/src/server/collect-styles.ts index ab6d34b21..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); @@ -155,7 +153,7 @@ export async function findStylesInModuleGraph( const dependencies = await findFilesDepedencies(vite, [absolute], ssr); - const styles: Record = {}; + const styles: Record = {}; 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); } } 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>( component: { src: string; import(): Promise> }, @@ -22,46 +23,46 @@ export default function lazyRoute>( 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 = 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).rel === "stylesheet" ); if (typeof window !== "undefined") { - preloadStyles(styles); + preloadStyles(assets); } + const Comp: Component = 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>( }); } -function appendStyles(styles: Array) { - styles.forEach(style => { +function appendStyles(links: Array) { + 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) { }); } -function updateStyles(styles: Array, 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, 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) { - styles.forEach(style => { +function cleanupStyles(links: Array) { + 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) { }); } -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) { - 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) { + 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 }; } 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;