refactor(vite): move plugin to nuxt

nuxt · Apr 30, 2023 · 67900fb · 67900fb
1 parent fcc7357
commit 67900fb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts
@@ -10,6 +10,7 @@ import { scanComponents } from './scan'
 import { loaderPlugin } from './loader'
 import { TreeShakeTemplatePlugin } from './tree-shake'
 import { createTransformPlugin } from './transform'
+import { ssrStylesPlugin } from './ssr-styles'
 
 const isPureObjectOrString = (val: any) => (!Array.isArray(val) && typeof val === 'object') || typeof val === 'string'
 const isDirectory = (p: string) => { try { return statSync(p).isDirectory() } catch (_e) { return false } }
@@ -146,6 +147,25 @@ export default defineNuxtModule<ComponentsOptions>({
       }
     })
 
+    const chunksWithInlinedCSS = new Set<string>()
+    addVitePlugin(ssrStylesPlugin({
+      srcDir: nuxt.options.srcDir,
+      chunksWithInlinedCSS,
+      shouldInline: nuxt.options.experimental.inlineSSRStyles,
+      getComponents
+    }), { server: true, client: false })
+
+    // Remove CSS entries for files that will have inlined styles
+    nuxt.hook('build:manifest', (manifest) => {
+      for (const key in manifest) {
+        const entry = manifest[key]
+        const shouldRemoveCSS = chunksWithInlinedCSS.has(key)
+        if (shouldRemoveCSS) {
+          entry.css = []
+        }
+      }
+    })
+
     // Restart dev server when component directories are added/removed
     nuxt.hook('builder:watch', (event, path) => {
       const isDirChange = ['addDir', 'unlinkDir'].includes(event)

diff --git a/packages/vite/src/plugins/ssr-styles.ts → packages/nuxt/src/components/ssr-styles.ts b/packages/vite/src/plugins/ssr-styles.ts → packages/nuxt/src/components/ssr-styles.ts
@@ -5,11 +5,13 @@ import { dirname, relative } from 'pathe'
 import { genObjectFromRawEntries } from 'knitwork'
 import { filename } from 'pathe/utils'
 import { parseQuery, parseURL } from 'ufo'
+import type { Component } from '@nuxt/schema'
 
 interface SSRStylePluginOptions {
   srcDir: string
   chunksWithInlinedCSS: Set<string>
   shouldInline?: ((id?: string) => boolean) | boolean
+  getComponents(): Component[]
 }
 
 export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
@@ -19,6 +21,7 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
   const relativeToSrcDir = (path: string) => relative(options.srcDir, path)
 
   const warnCache = new Set<string>()
+  let islands: Component[]
 
   return {
     name: 'ssr-styles',
@@ -93,13 +96,18 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
     async transform (code, id) {
       const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
       const query = parseQuery(search)
-
-      const relativeId = relativeToSrcDir(id)
-      if ((!pathname.endsWith('.server.vue') && !relativeId.startsWith('components/islands/'))) {
+      if (!islands) {
+        const components = options.getComponents()
+        islands = components.filter(component =>
+          component.island || (component.mode === 'server' && !components.some(c => c.pascalName === component.pascalName && c.mode === 'client'))
+        )
+      }
+      if (!islands.some(c => c.filePath === pathname)) {
         if (options.shouldInline === false || (typeof options.shouldInline === 'function' && !options.shouldInline(id))) { return }
       }
       if (!pathname.match(/\.(vue|((c|m)?j|t)sx?)$/g) || query.macro) { return }
 
+      const relativeId = relativeToSrcDir(id)
       cssMap[relativeId] = cssMap[relativeId] || { files: [] }
 
       let styleCtr = 0

diff --git a/packages/vite/src/server.ts b/packages/vite/src/server.ts
@@ -8,7 +8,6 @@ import type { ViteConfig } from '@nuxt/schema'
 import type { ViteBuildContext } from './vite'
 import { createViteLogger } from './utils/logger'
 import { initViteNodeServer } from './vite-node'
-import { ssrStylesPlugin } from './plugins/ssr-styles'
 import { pureAnnotationsPlugin } from './plugins/pure-annotations'
 import { writeManifest } from './manifest'
 import { transpile } from './utils/transpile'
@@ -119,24 +118,6 @@ export async function buildServer (ctx: ViteBuildContext) {
 
   serverConfig.customLogger = createViteLogger(serverConfig)
 
-  const chunksWithInlinedCSS = new Set<string>()
-  serverConfig.plugins!.push(ssrStylesPlugin({
-    srcDir: ctx.nuxt.options.srcDir,
-    chunksWithInlinedCSS,
-    shouldInline: ctx.nuxt.options.experimental.inlineSSRStyles
-  }))
-
-  // Remove CSS entries for files that will have inlined styles
-  ctx.nuxt.hook('build:manifest', (manifest) => {
-    for (const key in manifest) {
-      const entry = manifest[key]
-      const shouldRemoveCSS = chunksWithInlinedCSS.has(key)
-      if (shouldRemoveCSS) {
-        entry.css = []
-      }
-    }
-  })
-
   await ctx.nuxt.callHook('vite:extendConfig', serverConfig, { isClient: false, isServer: true })
 
   serverConfig.plugins!.unshift(