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

fix(nuxt): add crossorigin attribute for stylesheets (#29138)

Browse Source
This commit is contained in:
Daniel Roe 2024-09-24 13:03:09 +01:00 committed by GitHub
parent 1e236a4b3b
commit f825eb54c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -385,7 +385,7 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
link: [
process.env.NUXT_JSON_PAYLOADS
? { rel: 'preload', as: 'fetch', crossorigin: 'anonymous', href: payloadURL }
: { rel: 'modulepreload', href: payloadURL },
: { rel: 'modulepreload', crossorigin: '', href: payloadURL },
],
}, headEntryOptions)
}
@ -406,7 +406,7 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
// - in dev mode when not rendering an island
// - in dev mode when rendering an island and the file has scoped styles and is not a page
if (!import.meta.dev || !isRenderingIsland || (resource.file.includes('scoped') && !resource.file.includes('pages/'))) {
link.push({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file) })
link.push({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file), crossorigin: '' })
}
}
if (link.length) {

9
test/basic.test.ts
View File

@ -1810,7 +1810,7 @@ describe.skipIf(isDev() || isWebpack)('inlining component styles', () => {
it('should not include inlined CSS in generated CSS file', async () => {
const html: string = await $fetch<string>('/styles')
const cssFiles = new Set([...html.matchAll(/<link [^>]*href="([^"]*\.css)">/g)].map(m => m[1]!))
const cssFiles = new Set([...html.matchAll(/<link [^>]*href="([^"]*\.css)"(?: crossorigin)?>/g)].map(m => m[1]!))
let css = ''
for (const file of cssFiles || []) {
css += await $fetch<string>(file)
@ -1831,11 +1831,7 @@ describe.skipIf(isDev() || isWebpack)('inlining component styles', () => {
it('does not load stylesheet for page styles', async () => {
const html: string = await $fetch<string>('/styles')
expect(html.match(/<link [^>]*href="[^"]*\.css">/g)?.filter(m => m.includes('entry'))?.map(m => m.replace(/\.[^.]*\.css/, '.css'))).toMatchInlineSnapshot(`
[
"<link rel="stylesheet" href="/_nuxt/entry.css">",
]
`)
expect(html.match(/<link [^>]*href="[^"]*\.css">(?: crossorigin)?/g)?.filter(m => m.includes('entry'))?.map(m => m.replace(/\.[^.]*\.css/, '.css'))).toMatchInlineSnapshot(`undefined`)
})
it('still downloads client-only styles', async () => {
@ -2365,6 +2361,7 @@ describe('component islands', () => {
{
"link": [
{
"crossorigin": "",
"href": "/_nuxt/components/islands/PureComponent.vue?vue&type=style&index=0&scoped=c0c0cf89&lang.css",
"rel": "stylesheet",
},