Skip to content

Commit 4979c16

Browse files
BrendonovichBrendonovich
committed
use <link> not <style>
1 parent b874152 commit 4979c16

5 files changed

Lines changed: 91 additions & 101 deletions

File tree

‎packages/start/src/config/index.ts‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
159159
},
160160
},
161161
manifest(start),
162-
css(),
162+
// css(),
163163
fsRoutes({
164164
routers: {
165165
client: new SolidStartClientFileRouter({
@@ -238,37 +238,37 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
238238
];
239239
}
240240

241-
function css(): PluginOption {
242-
let viteServer!: ViteDevServer;
243-
const cssModules: Record<string, any> = {};
244-
return {
245-
name: "solid-start:css-hmr",
246-
configureServer(dev) {
247-
viteServer = dev;
248-
},
249-
async handleHotUpdate({ file, server }) {
250-
if (file.endsWith(".css")) {
251-
const resp = await server.transformRequest(file);
252-
if (!resp) return;
253-
const json = resp.code
254-
.match(/const __vite__css = .*\n/)?.[0]
255-
?.slice("const __vite__css = ".length);
256-
if (!json) return;
257-
resp.code = JSON.parse(json);
258-
viteServer.ws.send({
259-
type: "custom",
260-
event: "css-update",
261-
data: {
262-
file,
263-
contents: resp.code,
264-
},
265-
});
266-
}
267-
},
268-
transform(code, id) {
269-
if (isCssModulesFile(id)) {
270-
cssModules[id] = code;
271-
}
272-
},
273-
};
274-
}
241+
// function css(): PluginOption {
242+
// let viteServer!: ViteDevServer;
243+
// const cssModules: Record<string, any> = {};
244+
// return {
245+
// name: "solid-start:css-hmr",
246+
// configureServer(dev) {
247+
// viteServer = dev;
248+
// },
249+
// async handleHotUpdate({ file, server }) {
250+
// if (file.endsWith(".css")) {
251+
// const resp = await server.transformRequest(file);
252+
// if (!resp) return;
253+
// const json = resp.code
254+
// .match(/const __vite__css = .*\n/)?.[0]
255+
// ?.slice("const __vite__css = ".length);
256+
// if (!json) return;
257+
// resp.code = JSON.parse(json);
258+
// viteServer.ws.send({
259+
// type: "custom",
260+
// event: "css-update",
261+
// data: {
262+
// file,
263+
// contents: resp.code,
264+
// },
265+
// });
266+
// }
267+
// },
268+
// transform(code, id) {
269+
// if (isCssModulesFile(id)) {
270+
// cssModules[id] = code;
271+
// }
272+
// },
273+
// };
274+
// }

‎packages/start/src/config/manifest.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,18 +69,17 @@ export function manifest(start: SolidStartOptions): PluginOption {
6969
target === "ssr",
7070
);
7171

72-
const cssAssets = Object.entries(styles).map(([key, value]) => `{
73-
tag: "style",
72+
const cssAssets = Object.entries(styles).map(([key, value]) => ({
73+
tag: "link",
7474
attrs: {
75-
type: "text/css",
76-
key: "${key}",
77-
"data-vite-dev-id": "${key}",
75+
rel: "stylesheet",
76+
href: key,
77+
"data-vite-dev-id": key,
7878
"data-vite-ref": "0",
7979
},
80-
children: () => import("${value}?inline").then(mod => mod.default),
81-
}`);
80+
}));
8281

83-
return `export default [${cssAssets.join(",")}]`;
82+
return `export default ${JSON.stringify(cssAssets)}`;
8483
}
8584
}
8685
},

‎packages/start/src/server/lazyRoute.tsx‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { type Component, createComponent, type JSX, lazy, onCleanup } from "solid-js";
22

33
import { type Asset, renderAsset } from "./renderAsset.tsx";
4+
import { useAssets } from "solid-js/web";
45

56
export default function lazyRoute<T extends Record<string, any>>(
67
component: { src: string; import(): Promise<Record<string, Component>> },
@@ -22,81 +23,82 @@ export default function lazyRoute<T extends Record<string, any>>(
2223
if (import.meta.env.DEV) {
2324
const manifest = import.meta.env.SSR ? serverManifest : clientManifest;
2425

25-
const assets = await manifest.getAssets(component.src);
26-
const styles = assets.filter((asset: any) => asset.tag === "style");
26+
const assets = (await manifest.getAssets(component.src)).filter(
27+
(asset: any) => asset.tag === "link"
28+
);
2729

28-
if (import.meta.env.SSR && import.meta.hot)
29-
import.meta.hot.on("css-update", data => {
30-
updateStyles(styles, data);
31-
});
30+
// if (import.meta.env.SSR && import.meta.hot)
31+
// import.meta.hot.on("css-update", data => {
32+
// updateStyles(styles, data);
33+
// });
3234

3335
const Comp: Component<T> = props => {
3436
if (typeof window !== "undefined") {
35-
appendStyles(styles);
37+
appendStyles(assets);
3638
}
3739

3840
onCleanup(() => {
3941
if (typeof window !== "undefined") {
4042
// remove style tags added by vite when a CSS file is imported
41-
cleanupStyles(styles);
43+
cleanupStyles(assets);
4244
}
4345
});
4446

45-
return [
46-
...assets.map((asset: Asset) => renderAsset(asset)),
47-
createComponent(Component, props)
48-
];
47+
useAssets(() => assets.map((asset: Asset) => renderAsset(asset)));
48+
49+
return [createComponent(Component, props)];
4950
};
5051
return { default: Comp };
5152
} else {
52-
const assets = await clientManifest.getAssets(component.src);
53-
const styles = assets.filter(
53+
const assets = (await clientManifest.getAssets(component.src)).filter(
5454
asset =>
5555
asset.tag === "style" ||
5656
(asset.attrs as JSX.LinkHTMLAttributes<HTMLLinkElement>).rel === "stylesheet"
5757
);
5858
if (typeof window !== "undefined") {
59-
preloadStyles(styles);
59+
preloadStyles(assets);
6060
}
61+
6162
const Comp: Component<T> = props => {
6263
return [
63-
...styles.map((asset: Asset) => renderAsset(asset)),
64-
createComponent(Component, props)
64+
createComponent(Component, props),
65+
...assets.map((asset: Asset) => renderAsset(asset))
6566
];
6667
};
6768
return { default: Comp };
6869
}
6970
});
7071
}
7172

72-
function appendStyles(styles: Array<any>) {
73-
styles.forEach(style => {
73+
function appendStyles(links: Array<any>) {
74+
links.forEach(link => {
7475
let element = document.head.querySelector(
75-
`style[data-vite-dev-id="${style.attrs["data-vite-dev-id"]}"]`
76+
`link[data-vite-dev-id="${link.attrs["data-vite-dev-id"]}"]`
7677
);
7778
if (!element) {
78-
element = document.createElement("style");
79-
element.setAttribute("data-vite-dev-id", style.attrs["data-vite-dev-id"]);
80-
element.innerHTML = style.children;
79+
element = document.createElement("link");
80+
element.setAttribute("data-vite-dev-id", link.attrs["data-vite-dev-id"]);
8181
element.setAttribute("data-vite-ref", "0");
82+
element.setAttribute("href", link.attrs["href"]);
83+
element.setAttribute("rel", link.attrs["rel"]);
8284
document.head.appendChild(element);
8385
}
8486

8587
element.setAttribute("data-vite-ref", `${Number(element.getAttribute("data-vite-ref")) + 1}`);
8688
});
8789
}
8890

89-
function updateStyles(styles: Array<any>, data: any) {
90-
const styleAsset = styles.find(s => s.attrs["data-vite-dev-id"] === data.file);
91-
if (styleAsset) {
92-
styleAsset.children = data.contents;
93-
}
94-
}
91+
// function updateStyles(links: Array<any>, data: any) {
92+
// const linkAsset = links.find(s => s.attrs["data-vite-dev-id"] === data.file);
93+
// // if (linkAsset) {
94+
// // linkAsset.children = data.contents;
95+
// // }
96+
// }
9597

96-
function cleanupStyles(styles: Array<any>) {
97-
styles.forEach(style => {
98+
function cleanupStyles(links: Array<any>) {
99+
links.forEach(link => {
98100
const element = document.head.querySelector(
99-
`style[data-vite-dev-id="${style.attrs["data-vite-dev-id"]}"]`
101+
`link[data-vite-dev-id="${link.attrs["data-vite-dev-id"]}"]`
100102
);
101103

102104
if (!element) {
@@ -111,27 +113,26 @@ function cleanupStyles(styles: Array<any>) {
111113
});
112114
}
113115

114-
if (!import.meta.env.SSR && import.meta.hot) {
115-
import.meta.hot.on("css-update", data => {
116-
for (const el of document.querySelectorAll(`style[data-vite-dev-id="${data.file}"]`)) {
117-
el.innerHTML = data.contents;
118-
}
119-
});
120-
}
121-
122-
export function preloadStyles(styles: Array<any>) {
123-
styles.forEach(style => {
124-
if (!style.attrs.href) {
116+
// if (!import.meta.env.SSR && import.meta.hot) {
117+
// import.meta.hot.on("css-update", data => {
118+
// for (const el of document.querySelectorAll(`link[data-vite-dev-id="${data.file}"]`)) {
119+
// el.innerHTML = data.contents;
120+
// }
121+
// });
122+
// }
123+
124+
export function preloadStyles(links: Array<any>) {
125+
links.forEach(link => {
126+
if (!link.attrs.href) {
125127
return;
126128
}
127-
128-
let element = document.head.querySelector(`link[href="${style.attrs.href}"]`);
129+
let element = document.head.querySelector(`link[href="${link.attrs.href}"]`);
129130
if (!element) {
130131
// create a link preload element for the css file so it starts loading but doesnt get attached
131132
element = document.createElement("link");
132133
element.setAttribute("rel", "preload");
133134
element.setAttribute("as", "style");
134-
element.setAttribute("href", style.attrs.href);
135+
element.setAttribute("href", link.attrs.href);
135136
document.head.appendChild(element);
136137
}
137138
});

‎packages/start/src/server/manifest/dev-client-manifest.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,7 @@ export function getClientDevManifest() {
1212
`@manifest/client/${Date.now()}/assets?id=${id}`,
1313
);
1414

15-
const assets = (await import(/* @vite-ignore */ assetsPath)).default;
16-
17-
return await Promise.all(assets.map(async (v: any) => ({
18-
...v,
19-
children: await v.children()
20-
})));
15+
return (await import(/* @vite-ignore */ assetsPath)).default;
2116
},
2217
} satisfies StartManifest & { import(id: string): Promise<any> };
2318
}

‎packages/start/src/server/manifest/dev-ssr-manifest.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,7 @@ export function getSsrDevManifest(environment: "client" | "ssr") {
1010
`@manifest/${environment}/${Date.now()}/assets?id=${id}`,
1111
);
1212

13-
const assets = (await import(/* @vite-ignore */ assetsPath)).default;
14-
15-
return await Promise.all(assets.map(async (v: any) => ({
16-
...v,
17-
children: await v.children()
18-
})));
13+
return (await import(/* @vite-ignore */ assetsPath)).default;
1914
},
2015
} satisfies StartManifest & {
2116
path(id: string): string;

0 commit comments

Comments
 (0)