fix(vite): include dynamic css (revert #2067) (#2227)

examples/with-components/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <lazy-hello-world />
+    <hello-world />
     <nuxt3 />
   </div>
 </template>

examples/with-components/components/HelloWorld.vue

@@ -1,11 +1,5 @@
 <template>
-  <div class="hello">
+  <div>
     This is HelloWorld component!
   </div>
 </template>
-
-<style scoped>
-.hello {
-  color: red;
-}
-</style>

examples/with-components/components/Nuxt3.vue

@@ -1,11 +1,5 @@
 <template>
-  <b class="nuxt3">
+  <b style="color: #00C58E">
     From Nuxt 3
   </b>
 </template>
-
-<style scoped>
-.nuxt3 {
-  color: #00C58E;
-}
-</style>

examples/with-components/nuxt.config.ts

@@ -1,6 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  vite: false,
   components: {
     dirs: [
       '~/components',

packages/bridge/src/vite/server.ts

@@ -102,9 +102,9 @@ export async function buildServer (ctx: ViteBuildContext) {
   // Build and watch
   const _doBuild = async () => {
     const start = Date.now()
-    const { code, chunks } = await bundleRequest({ viteServer }, '/.nuxt/server.js')
+    const { code, ids } = await bundleRequest({ viteServer }, '/.nuxt/server.js')
     // Have CSS in the manifest to prevent FOUC on dev SSR
-    await generateDevSSRManifest(ctx, chunks.filter(i => !i.isDynamic && isCSS(i.id)).map(i => '../' + i.id.slice(1)))
+    await generateDevSSRManifest(ctx, ids.filter(isCSS).map(i => '../' + i.slice(1)))
     await fse.writeFile(resolve(ctx.nuxt.options.buildDir, 'dist/server/server.mjs'), code, 'utf-8')
     const time = (Date.now() - start)
     consola.info(`Server built in ${time}ms`)

packages/vite/src/dev-bundler.ts

@@ -3,15 +3,13 @@ import { existsSync } from 'fs'
 import { resolve } from 'pathe'
 import * as vite from 'vite'
 import { ExternalsOptions, isExternal as _isExternal, ExternalsDefaults } from 'externality'
-import { hashId } from './utils'
+import { hashId, uniq } from './utils'
 
 export interface TransformChunk {
   id: string,
   code: string,
   deps: string[],
   parents: string[]
-  dynamicDeps: string[],
-  isDynamic: boolean,
 }
 
 export interface SSRTransformResult {
@@ -93,42 +91,22 @@ ${res.code || '/* empty */'};
   return { code, deps: res.deps || [], dynamicDeps: res.dynamicDeps || [] }
 }
 
-function markChunkAsSync (chunk: TransformChunk, chunks: Record<string, TransformChunk>) {
-  if (!chunk.isDynamic) {
-    return
-  }
-  chunk.isDynamic = false
-  for (const id of chunk.deps) {
-    if (chunks[id]) {
-      markChunkAsSync(chunks[id], chunks)
-    }
-  }
-}
-
-async function transformRequestRecursive (opts: TransformOptions, id: string, parent = '<entry>', chunks: Record<string, TransformChunk> = {}, isDynamic = false) {
+async function transformRequestRecursive (opts: TransformOptions, id, parent = '<entry>', chunks: Record<string, TransformChunk> = {}) {
   if (chunks[id]) {
-    if (!isDynamic) {
-      // chunks that been imported as both dynamic and sync
-      markChunkAsSync(chunks[id], chunks)
-    }
     chunks[id].parents.push(parent)
     return
   }
   const res = await transformRequest(opts, id)
+  const deps = uniq([...res.deps, ...res.dynamicDeps])
 
-  chunks[id] = <TransformChunk>{
+  chunks[id] = {
     id,
     code: res.code,
-    deps: res.deps,
-    dynamicDeps: res.dynamicDeps,
-    isDynamic,
+    deps,
     parents: [parent]
-  }
-  for (const dep of res.deps) {
-    await transformRequestRecursive(opts, dep, id, chunks, isDynamic)
-  }
-  for (const dep of res.dynamicDeps) {
-    await transformRequestRecursive(opts, dep, id, chunks, true)
+  } as TransformChunk
+  for (const dep of deps) {
+    await transformRequestRecursive(opts, dep, id, chunks)
   }
   return Object.values(chunks)
 }
@@ -233,6 +211,6 @@ async function __instantiateModule__(url, urlStack) {
 
   return {
     code,
-    chunks
+    ids: chunks.map(i => i.id)
   }
 }

packages/vite/src/server.ts

@@ -106,10 +106,10 @@ export async function buildServer (ctx: ViteBuildContext) {
   // Build and watch
   const _doBuild = async () => {
     const start = Date.now()
-    const { code, chunks } = await bundleRequest({ viteServer }, resolve(ctx.nuxt.options.appDir, 'entry'))
+    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, chunks.filter(i => !i.isDynamic && isCSS(i.id)).map(i => i.id.slice(1)))
+    await writeManifest(ctx, ids.filter(isCSS).map(i => i.slice(1)))
     const time = (Date.now() - start)
     consola.success(`Vite server built in ${time}ms`)
     await onBuild()