fix: add crossorigin attribute for stylesheets (#77)

Author: danielroe

src/runtime.ts

@@ -189,7 +189,7 @@ export function getRequestDependencies(ssrContext: SSRContext, rendererContext:
 export function renderStyles(ssrContext: SSRContext, rendererContext: RendererContext): string {
   const { styles } = getRequestDependencies(ssrContext, rendererContext)
   return Object.values(styles).map(resource =>
-    renderLinkToString({ rel: 'stylesheet', href: rendererContext.buildAssetsURL(resource.file) }),
+    renderLinkToString({ rel: 'stylesheet', href: rendererContext.buildAssetsURL(resource.file), crossorigin: '' }),
   ).join('')
 }
 
@@ -214,7 +214,7 @@ export function getPreloadLinks(ssrContext: SSRContext, rendererContext: Rendere
       rel: resource.module ? 'modulepreload' : 'preload',
       as: resource.resourceType,
       type: resource.mimeType ?? null,
-      crossorigin: resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
+      crossorigin: resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
       href: rendererContext.buildAssetsURL(resource.file),
     }))
 }
@@ -225,7 +225,7 @@ export function getPrefetchLinks(ssrContext: SSRContext, rendererContext: Render
     rel: 'prefetch',
     as: resource.resourceType,
     type: resource.mimeType ?? null,
-    crossorigin: resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
+    crossorigin: resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
     href: rendererContext.buildAssetsURL(resource.file),
   }))
 }

test/compat.test.ts

@@ -31,7 +31,7 @@ describe('renderer with vite manifest', () => {
   it('renders styles correctly', async () => {
     const { renderStyles } = await getRenderer()
     expect(renderStyles()).to.equal(
-      '<link rel="stylesheet" href="/test.css"><link rel="stylesheet" href="/index.css">',
+      '<link rel="stylesheet" href="/test.css" crossorigin><link rel="stylesheet" href="/index.css" crossorigin>',
     )
   })
   it('renders resource hints correctly', async () => {
@@ -78,7 +78,7 @@ describe('renderer with webpack manifest', () => {
   it('renders styles correctly', async () => {
     const { renderStyles } = await getRenderer()
     expect(renderStyles()).to.equal(
-      '<link rel="stylesheet" href="/_nuxt/app.css"><link rel="stylesheet" href="/_nuxt/some.css">',
+      '<link rel="stylesheet" href="/_nuxt/app.css" crossorigin><link rel="stylesheet" href="/_nuxt/some.css" crossorigin>',
     )
   })
   it('renders resource hints correctly', async () => {
@@ -88,7 +88,7 @@ describe('renderer with webpack manifest', () => {
       [
         '<link rel="prefetch" as="image" type="image/svg+xml" href="/_nuxt/img/logo.41f2f89.svg">',
         '<link rel="prefetch" as="script" crossorigin href="/_nuxt/pages/another.js">', // dynamic import
-        '<link rel="prefetch" as="style" href="/_nuxt/pages/another.css">', // dynamic import CSS
+        '<link rel="prefetch" as="style" crossorigin href="/_nuxt/pages/another.css">', // dynamic import CSS
         '<link rel="preload" as="script" crossorigin href="/_nuxt/app.js">',
         '<link rel="preload" as="script" crossorigin href="/_nuxt/commons/app.js">',
         '<link rel="preload" as="script" crossorigin href="/_nuxt/pages/index.js">', // dynamic entrypoint

test/renderer.test.ts

@@ -36,8 +36,8 @@ describe('renderer', () => {
     expect(renderStyles().split('>').slice(0, -1).map(s => `${s}>`).sort()).toMatchInlineSnapshot(
       `
       [
-        "<link rel="stylesheet" href="/assets/index.css">",
-        "<link rel="stylesheet" href="/assets/test.css">",
+        "<link rel="stylesheet" href="/assets/index.css" crossorigin>",
+        "<link rel="stylesheet" href="/assets/test.css" crossorigin>",
       ]
     `,
     )
@@ -80,8 +80,8 @@ describe('renderer', () => {
         "<link rel="prefetch" as="image" type="image/png" href="/assets/entry.png">",
         "<link rel="prefetch" as="script" crossorigin href="/assets/index.mjs">",
         "<link rel="prefetch" as="script" crossorigin href="/assets/lazy-component.mjs">",
-        "<link rel="prefetch" as="style" href="/assets/index.css">",
-        "<link rel="prefetch" as="style" href="/assets/lazy-component.css">",
+        "<link rel="prefetch" as="style" crossorigin href="/assets/index.css">",
+        "<link rel="prefetch" as="style" crossorigin href="/assets/lazy-component.css">",
       ]
     `)
   })
@@ -93,9 +93,9 @@ describe('renderer', () => {
     ])
     expect(renderStyles().split('>').slice(0, -1).map(s => `${s}>`).sort()).toMatchInlineSnapshot(`
       [
-        "<link rel="stylesheet" href="/assets/about.css">",
-        "<link rel="stylesheet" href="/assets/lazy-component.css">",
-        "<link rel="stylesheet" href="/assets/test.css">",
+        "<link rel="stylesheet" href="/assets/about.css" crossorigin>",
+        "<link rel="stylesheet" href="/assets/lazy-component.css" crossorigin>",
+        "<link rel="stylesheet" href="/assets/test.css" crossorigin>",
       ]
     `)
     const result = renderResourceHints().split('>').slice(0, -1).map(s => `${s}>`).sort()
@@ -112,7 +112,7 @@ describe('renderer', () => {
         "<link rel="prefetch" as="image" type="image/svg+xml" href="/assets/lazy-component.svg">",
         "<link rel="prefetch" as="image" type="image/x-icon" href="/assets/lazy-component.ico">",
         "<link rel="prefetch" as="script" crossorigin href="/assets/index.mjs">",
-        "<link rel="prefetch" as="style" href="/assets/index.css">",
+        "<link rel="prefetch" as="style" crossorigin href="/assets/index.css">",
         "<link rel="prefetch" as="video" href="/assets/lazy-component.mp4">",
       ]
     `)