fix(nuxt): render inlined ssr styles before stylesheets (#22986)

This commit is contained in:
Daniel Roe 2023-09-04 16:43:50 +01:00 committed by GitHub
parent 16d47ead2e
commit 5f176b1a96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -22,7 +22,7 @@ import type { HeadEntryOptions } from '@unhead/schema'
import { defineRenderHandler, getRouteRules, useRuntimeConfig, useStorage } from '#internal/nitro' import { defineRenderHandler, getRouteRules, useRuntimeConfig, useStorage } from '#internal/nitro'
import { useNitroApp } from '#internal/nitro/app' import { useNitroApp } from '#internal/nitro/app'
import type { Link, Script } from '@unhead/vue' import type { Link, Script, Style } from '@unhead/vue'
import { createServerHead } from '@unhead/vue' import { createServerHead } from '@unhead/vue'
// @ts-expect-error virtual file // @ts-expect-error virtual file
import unheadPlugins from '#internal/unhead-plugins.mjs' import unheadPlugins from '#internal/unhead-plugins.mjs'
@ -349,12 +349,12 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
} }
// 2. Styles // 2. Styles
head.push({ style: inlinedStyles })
head.push({ head.push({
link: Object.values(styles) link: Object.values(styles)
.map(resource => .map(resource =>
({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file) }) ({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file) })
), )
style: inlinedStyles
}, headEntryOptions) }, headEntryOptions)
if (!NO_SCRIPTS) { if (!NO_SCRIPTS) {
@ -495,7 +495,7 @@ function renderHTMLDocument (html: NuxtRenderHTMLContext) {
</html>` </html>`
} }
async function renderInlineStyles (usedModules: Set<string> | string[]) { async function renderInlineStyles (usedModules: Set<string> | string[]): Promise<Style[]> {
const styleMap = await getSSRStyles() const styleMap = await getSSRStyles()
const inlinedStyles = new Set<string>() const inlinedStyles = new Set<string>()
for (const mod of usedModules) { for (const mod of usedModules) {