diff --git a/packages/vite/src/plugins/ssr-styles.ts b/packages/vite/src/plugins/ssr-styles.ts index 7015728534..e65ac5e974 100644 --- a/packages/vite/src/plugins/ssr-styles.ts +++ b/packages/vite/src/plugins/ssr-styles.ts @@ -20,6 +20,8 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin { const relativeToSrcDir = (path: string) => relative(options.srcDir, path) + const warnCache = new Set() + return { name: 'ssr-styles', generateBundle (outputOptions) { @@ -104,6 +106,13 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin { const resolved = await this.resolve(i.specifier, id) if (!resolved) { continue } + if (!(await this.resolve(resolved.id + '?inline&used'))) { + if (!warnCache.has(resolved.id)) { + warnCache.add(resolved.id) + this.warn(`[nuxt] Cannot extract styles for \`${i.specifier}\`. Its styles will not be inlined when server-rendering.`) + } + continue + } const ref = this.emitFile({ type: 'chunk', diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts index 46245eae7f..0241b280e5 100644 --- a/test/fixtures/basic/nuxt.config.ts +++ b/test/fixtures/basic/nuxt.config.ts @@ -1,5 +1,6 @@ import { defineNuxtConfig } from 'nuxt' -import { addComponent } from '@nuxt/kit' +import { addComponent, addVitePlugin, addWebpackPlugin } from '@nuxt/kit' +import { createUnplugin } from 'unplugin' export default defineNuxtConfig({ app: { @@ -32,7 +33,26 @@ export default defineNuxtConfig({ privateRuntimeConfig: { privateConfig: 'secret_key' }, - modules: ['~/modules/example'], + modules: [ + '~/modules/example', + function (_, nuxt) { + if (process.env.TEST_WITH_WEBPACK) { return } + + nuxt.options.css.push('virtual.css') + nuxt.options.build.transpile.push('virtual.css') + const plugin = createUnplugin(() => ({ + name: 'virtual', + resolveId (id) { + if (id === 'virtual.css') { return 'virtual.css' } + }, + load (id) { + if (id === 'virtual.css') { return ':root { --virtual: red }' } + } + })) + addVitePlugin(plugin.vite()) + addWebpackPlugin(plugin.webpack()) + } + ], hooks: { 'modules:done' () { addComponent({