Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-29 00:52:01 +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
parent d0ddc0d695
commit a4534ae233
No known key found for this signature in database
GPG Key ID: CBC814C393D93268
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

@ -386,7 +386,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)
}
@ -407,7 +407,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

@ -1813,7 +1813,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)
@ -1834,11 +1834,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 () => {
@ -2368,6 +2364,7 @@ describe('component islands', () => {
{
"link": [
{
"crossorigin": "",
"href": "/_nuxt/components/islands/PureComponent.vue?vue&type=style&index=0&scoped=c0c0cf89&lang.css",
"rel": "stylesheet",
},