mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
fix(nuxt): always inline styles for server/island components (#20599)
This commit is contained in:
parent
6b7197fd8c
commit
90ab1b50f4
@ -202,7 +202,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
|
||||
}
|
||||
}
|
||||
|
||||
if (!nuxt.options.experimental.inlineSSRStyles) {
|
||||
if (nuxt.options.builder === '@nuxt/webpack-builder' || nuxt.options.dev) {
|
||||
nitroConfig.virtual!['#build/dist/server/styles.mjs'] = 'export default {}'
|
||||
// In case a non-normalized absolute path is called for on Windows
|
||||
if (process.platform === 'win32') {
|
||||
|
@ -284,7 +284,7 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
|
||||
const renderedMeta = await ssrContext.renderMeta?.() ?? {}
|
||||
|
||||
// Render inline styles
|
||||
const inlinedStyles = process.env.NUXT_INLINE_STYLES
|
||||
const inlinedStyles = (process.env.NUXT_INLINE_STYLES || Boolean(islandContext))
|
||||
? await renderInlineStyles(ssrContext.modules ?? ssrContext._registeredComponents ?? [])
|
||||
: ''
|
||||
|
||||
|
@ -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
|
||||
shouldInline?: ((id?: string) => boolean) | boolean
|
||||
components: Component[]
|
||||
}
|
||||
|
||||
export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
|
||||
@ -19,6 +21,11 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
|
||||
const relativeToSrcDir = (path: string) => relative(options.srcDir, path)
|
||||
|
||||
const warnCache = new Set<string>()
|
||||
const islands = options.components.filter(component =>
|
||||
component.island ||
|
||||
// .server components without a corresponding .client component will need to be rendered as an island
|
||||
(component.mode === 'server' && !options.components.some(c => c.pascalName === component.pascalName && c.mode === 'client'))
|
||||
)
|
||||
|
||||
return {
|
||||
name: 'ssr-styles',
|
||||
@ -93,8 +100,12 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
|
||||
async transform (code, id) {
|
||||
const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
|
||||
const query = parseQuery(search)
|
||||
|
||||
if (!pathname.match(/\.(vue|((c|m)?j|t)sx?)$/g) || query.macro || query.nuxt_component) { return }
|
||||
if (options.shouldInline && !options.shouldInline(id)) { return }
|
||||
|
||||
if (!islands.some(c => c.filePath === pathname)) {
|
||||
if (options.shouldInline === false || (typeof options.shouldInline === 'function' && !options.shouldInline(id))) { return }
|
||||
}
|
||||
|
||||
const relativeId = relativeToSrcDir(id)
|
||||
cssMap[relativeId] = cssMap[relativeId] || { files: [] }
|
||||
|
@ -119,14 +119,13 @@ export async function buildServer (ctx: ViteBuildContext) {
|
||||
|
||||
serverConfig.customLogger = createViteLogger(serverConfig)
|
||||
|
||||
if (ctx.nuxt.options.experimental.inlineSSRStyles) {
|
||||
if (!ctx.nuxt.options.dev) {
|
||||
const chunksWithInlinedCSS = new Set<string>()
|
||||
serverConfig.plugins!.push(ssrStylesPlugin({
|
||||
srcDir: ctx.nuxt.options.srcDir,
|
||||
chunksWithInlinedCSS,
|
||||
shouldInline: typeof ctx.nuxt.options.experimental.inlineSSRStyles === 'function'
|
||||
? ctx.nuxt.options.experimental.inlineSSRStyles
|
||||
: undefined
|
||||
shouldInline: ctx.nuxt.options.experimental.inlineSSRStyles,
|
||||
components: ctx.nuxt.apps.default.components
|
||||
}))
|
||||
|
||||
// Remove CSS entries for files that will have inlined styles
|
||||
|
Loading…
Reference in New Issue
Block a user