wip: fix dev fouc

wevm · Oct 22, 2023 · 4b47b1b · 4b47b1b
1 parent 1c41c62
commit 4b47b1b
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/src/vite/plugins/dev.ts b/src/vite/plugins/dev.ts
@@ -9,8 +9,12 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 const cleanUrl = (url: string): string => url.replace(/#.*$/s, '').replace(/\?.*$/s, '')
 
 export function dev(): PluginOption {
+  const cssPaths = new Set()
   return {
     name: 'dev',
+    load(id) {
+      if (id.includes(process.cwd()) && id.endsWith('.css')) cssPaths.add(id)
+    },
     configureServer(server) {
       return () => {
         // @ts-expect-error
@@ -33,11 +37,20 @@ export function dev(): PluginOption {
             const module = await server.ssrLoadModule(
               resolve(__dirname, '../../app/index.server.tsx'),
             )
-            const { head, body } = await module.render(req)
+            const render = await module.render(req)
+
+            const css = [...cssPaths]
+              .map((path) => `<link rel="stylesheet" href="/@fs${path}">`)
+              .join('')
+
+            const head = `${render.head}${css}`
+            const body = render.body
+
             const html = template
-              .replace(/\.\.\/app/g, `/@fs${resolve(__dirname, '../../app')}`)
-              .replace('<!--body-->', body)
               .replace('<!--head-->', head)
+              .replace('<!--body-->', body)
+              .replace(/\.\.\/app/g, `/@fs${resolve(__dirname, '../../app')}`)
+
             res.end(html)
           } finally {
             next()