Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 15:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): always inline styles for server/island components (#20599)

Browse Source
This commit is contained in:
Julien Huang 2023-05-12 00:33:17 +02:00 committed by GitHub
parent 6b7197fd8c
commit 90ab1b50f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/nuxt/src/core/nitro.ts
View File

@ -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') {

2
packages/nuxt/src/core/runtime/nitro/renderer.ts
View File

@ -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 ?? [])
: ''

15
packages/vite/src/plugins/ssr-styles.ts
View File

@ -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: [] }

7
packages/vite/src/server.ts
View File

@ -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