fix(vite): dev ssr fouc with preprocessors

examples/with-scss/app.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="app">
+    <h1>Hello</h1>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  padding: 1rem 1.5rem;
+
+  h1 {
+    font-size: 4em;
+    font-weight: 400;
+  }
+}
+</style>

examples/with-scss/nuxt.config.ts

@@ -0,0 +1,4 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+})

examples/with-scss/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "example-with-scss",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "start": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "@types/sass": "^1",
+    "nuxt3": "latest",
+    "sass": "^1.42.1"
+  }
+}

packages/vite/src/client.ts

@@ -2,6 +2,7 @@ import { resolve } from 'pathe'
 import * as vite from 'vite'
 import consola from 'consola'
 import vitePlugin from '@vitejs/plugin-vue'
+import type { Connect } from 'vite'
 
 import { cacheDirPlugin } from './plugins/cache-dir'
 import { replace } from './plugins/replace'
@@ -47,7 +48,7 @@ export async function buildClient (ctx: ViteBuildContext) {
   const viteServer = await vite.createServer(clientConfig)
   await ctx.nuxt.callHook('vite:serverCreated', viteServer)
 
-  const viteMiddleware = (req, res, next) => {
+  const viteMiddleware: Connect.NextHandleFunction = (req, res, next) => {
     // Workaround: vite devmiddleware modifies req.url
     const originalURL = req.url
     viteServer.middlewares.handle(req, res, (err) => {

packages/vite/src/plugins/mock-css-rewrite.ts

@@ -0,0 +1,19 @@
+import type { Plugin } from 'vite'
+import { MOCK_CSS_SUFFIX } from '../utils'
+
+// For SSR renderer to treat preprocessors as css,
+// we need to append the `.css` in manifest, and then write them back on serving.
+export function mockCSSRewritePlugin () {
+  return <Plugin> {
+    name: 'nuxt:mock-css-rewrite',
+    enforce: 'pre',
+    configureServer (server) {
+      server.middlewares.use((req, _, next) => {
+        if (req.url.endsWith(MOCK_CSS_SUFFIX)) {
+          req.url = req.url.slice(0, -MOCK_CSS_SUFFIX.length - 1)
+        }
+        next()
+      })
+    }
+  }
+}

packages/vite/src/server.ts

@@ -10,7 +10,7 @@ import { wpfs } from './utils/wpfs'
 import { cacheDirPlugin } from './plugins/cache-dir'
 import { bundleRequest } from './dev-bundler'
 import { writeManifest } from './manifest'
-import { isCSS } from './utils'
+import { isDevCSS, rewriteDevCSS } from './utils'
 
 export async function buildServer (ctx: ViteBuildContext) {
   const _resolve = id => resolveModule(id, { paths: ctx.nuxt.options.modulesDir })
@@ -105,7 +105,7 @@ export async function buildServer (ctx: ViteBuildContext) {
     const { code, ids } = await bundleRequest({ viteServer }, resolve(ctx.nuxt.options.appDir, 'entry'))
     await fse.writeFile(resolve(ctx.nuxt.options.buildDir, 'dist/server/server.mjs'), code, 'utf-8')
     // Have CSS in the manifest to prevent FOUC on dev SSR
-    await writeManifest(ctx, ids.filter(isCSS).map(i => i.slice(1)))
+    await writeManifest(ctx, ids.filter(isDevCSS).map(i => rewriteDevCSS(i.slice(1))))
     const time = (Date.now() - start)
     consola.success(`Vite server built in ${time}ms`)
     await onBuild()

packages/vite/src/utils.ts

@@ -16,7 +16,24 @@ export function uniq<T> (arr: T[]): T[] {
 }
 
 const IS_CSS_RE = /\.css(\?[^.]+)?$/
+const IS_DEV_CSS_RE = /\.(?:css|scss|sass|postcss|less|stylus|styl)(\?[^.]+)?$/
+
+export const MOCK_CSS_SUFFIX = '__nuxt_mock.css'
 
 export function isCSS (file: string) {
   return IS_CSS_RE.test(file)
 }
+
+export function isDevCSS (file: string) {
+  return IS_DEV_CSS_RE.test(file)
+}
+
+export function rewriteDevCSS (file: string) {
+  if (file.endsWith('.css')) {
+    return file
+  }
+  if (file.includes('?')) {
+    return file + '&' + MOCK_CSS_SUFFIX
+  }
+  return file + '?' + MOCK_CSS_SUFFIX
+}

packages/vite/src/vite.ts

@@ -8,6 +8,7 @@ import { buildClient } from './client'
 import { buildServer } from './server'
 import virtual from './plugins/virtual'
 import { warmupViteServer } from './utils/warmup'
+import { mockCSSRewritePlugin } from './plugins/mock-css-rewrite'
 
 export interface ViteOptions extends InlineConfig {
   vue?: Options
@@ -71,6 +72,7 @@ export async function bundle (nuxt: Nuxt) {
           }
         },
         plugins: [
+          mockCSSRewritePlugin(),
           virtual(nuxt.vfs)
         ],
         server: {

yarn.lock

@@ -3583,6 +3583,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/sass@npm:^1":
+  version: 1.16.1
+  resolution: "@types/sass@npm:1.16.1"
+  dependencies:
+    "@types/node": "*"
+  checksum: 3f86d2eaf4988a2775fc0fc164d35e73ce82d71228191da7b11d97ad5e8ac129f1c5f798307e31482f8cfebab758bd3b24e731860bed81afe5a1bbe13fa2b2df
+  languageName: node
+  linkType: hard
+
 "@types/semver@npm:^7":
   version: 7.3.8
   resolution: "@types/semver@npm:7.3.8"
@@ -6444,7 +6453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:3.5.2, chokidar@npm:^3.4.1, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2":
+"chokidar@npm:3.5.2, chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.1, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2":
   version: 3.5.2
   resolution: "chokidar@npm:3.5.2"
   dependencies:
@@ -9263,6 +9272,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"example-with-scss@workspace:examples/with-scss":
+  version: 0.0.0-use.local
+  resolution: "example-with-scss@workspace:examples/with-scss"
+  dependencies:
+    "@types/sass": ^1
+    nuxt3: latest
+    sass: ^1.42.1
+  languageName: unknown
+  linkType: soft
+
 "example-with-wasm@workspace:examples/with-wasm":
   version: 0.0.0-use.local
   resolution: "example-with-wasm@workspace:examples/with-wasm"
@@ -16952,6 +16971,17 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.42.1":
+  version: 1.42.1
+  resolution: "sass@npm:1.42.1"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+  bin:
+    sass: sass.js
+  checksum: 467817475b23a3da3aac2f5e401f3b3d9431845b31ff1bc6269d4677852b4e1445e50d6ed1a8daffa4a76398cff6c531670171823466137ed8c2721c17983973
+  languageName: node
+  linkType: hard
+
 "sax@npm:^1.2.4, sax@npm:~1.2.4":
   version: 1.2.4
   resolution: "sax@npm:1.2.4"