Skip to content

Commit 06b2d67

Browse files
danielroedanielroe
committed
fix: add crossorigin attribute for stylesheets
1 parent a63c7ed commit 06b2d67

File tree

3 files changed

+27
-15
lines changed

3 files changed

+27
-15
lines changed

‎src/runtime.ts‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export function getRequestDependencies(ssrContext: SSRContext, rendererContext:
189189
export function renderStyles(ssrContext: SSRContext, rendererContext: RendererContext): string {
190190
const { styles } = getRequestDependencies(ssrContext, rendererContext)
191191
return Object.values(styles).map(resource =>
192-
renderLinkToString({ rel: 'stylesheet', href: rendererContext.buildAssetsURL(resource.file) }),
192+
renderLinkToString({ rel: 'stylesheet', href: rendererContext.buildAssetsURL(resource.file), crossorigin: '' }),
193193
).join('')
194194
}
195195

@@ -214,7 +214,7 @@ export function getPreloadLinks(ssrContext: SSRContext, rendererContext: Rendere
214214
rel: resource.module ? 'modulepreload' : 'preload',
215215
as: resource.resourceType,
216216
type: resource.mimeType ?? null,
217-
crossorigin: resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
217+
crossorigin: resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
218218
href: rendererContext.buildAssetsURL(resource.file),
219219
}))
220220
}
@@ -225,7 +225,7 @@ export function getPrefetchLinks(ssrContext: SSRContext, rendererContext: Render
225225
rel: 'prefetch',
226226
as: resource.resourceType,
227227
type: resource.mimeType ?? null,
228-
crossorigin: resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
228+
crossorigin: resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
229229
href: rendererContext.buildAssetsURL(resource.file),
230230
}))
231231
}
@@ -246,12 +246,24 @@ type CreateApp<App> = (ssrContext: SSRContext) => App | Promise<App>
246246
type ImportOf<T> = T | { default: T } | Promise<T> | Promise<{ default: T }>
247247

248248
type RenderToString<App> = (app: App, ssrContext: SSRContext) => string | Promise<string>
249+
type RenderToStream<App> = (app: App, ssrContext: SSRContext) => ReadableStream
249250

250-
export function createRenderer<App>(createApp: ImportOf<CreateApp<App>>, renderOptions: RenderOptions & { renderToString: RenderToString<App> }) {
251+
export function createRenderer<App>(createApp: ImportOf<CreateApp<App>>, renderOptions: RenderOptions & { renderToString: RenderToString<App>, renderToStream: RenderToStream<App> }) {
251252
const rendererContext = createRendererContext(renderOptions)
252253

253254
return {
254255
rendererContext,
256+
async renderToStream(ssrContext: SSRContext) {
257+
ssrContext._registeredComponents = ssrContext._registeredComponents || new Set()
258+
259+
const _createApp = await Promise.resolve(createApp).then(r => 'default' in r ? r.default : r)
260+
const app = await _createApp(ssrContext)
261+
const stream = renderOptions.renderToStream(app, ssrContext)
262+
263+
return {
264+
stream,
265+
}
266+
},
255267
async renderToString(ssrContext: SSRContext) {
256268
ssrContext._registeredComponents = ssrContext._registeredComponents || new Set()
257269

‎test/compat.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ describe('renderer with vite manifest', () => {
3131
it('renders styles correctly', async () => {
3232
const { renderStyles } = await getRenderer()
3333
expect(renderStyles()).to.equal(
34-
'<link rel="stylesheet" href="/test.css"><link rel="stylesheet" href="/index.css">',
34+
'<link rel="stylesheet" href="/test.css" crossorigin><link rel="stylesheet" href="/index.css" crossorigin>',
3535
)
3636
})
3737
it('renders resource hints correctly', async () => {
@@ -78,7 +78,7 @@ describe('renderer with webpack manifest', () => {
7878
it('renders styles correctly', async () => {
7979
const { renderStyles } = await getRenderer()
8080
expect(renderStyles()).to.equal(
81-
'<link rel="stylesheet" href="/_nuxt/app.css"><link rel="stylesheet" href="/_nuxt/some.css">',
81+
'<link rel="stylesheet" href="/_nuxt/app.css" crossorigin><link rel="stylesheet" href="/_nuxt/some.css" crossorigin>',
8282
)
8383
})
8484
it('renders resource hints correctly', async () => {
@@ -88,7 +88,7 @@ describe('renderer with webpack manifest', () => {
8888
[
8989
'<link rel="prefetch" as="image" type="image/svg+xml" href="/_nuxt/img/logo.41f2f89.svg">',
9090
'<link rel="prefetch" as="script" crossorigin href="/_nuxt/pages/another.js">', // dynamic import
91-
'<link rel="prefetch" as="style" href="/_nuxt/pages/another.css">', // dynamic import CSS
91+
'<link rel="prefetch" as="style" crossorigin href="/_nuxt/pages/another.css">', // dynamic import CSS
9292
'<link rel="preload" as="script" crossorigin href="/_nuxt/app.js">',
9393
'<link rel="preload" as="script" crossorigin href="/_nuxt/commons/app.js">',
9494
'<link rel="preload" as="script" crossorigin href="/_nuxt/pages/index.js">', // dynamic entrypoint

‎test/renderer.test.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ describe('renderer', () => {
3636
expect(renderStyles().split('>').slice(0, -1).map(s => `${s}>`).sort()).toMatchInlineSnapshot(
3737
`
3838
[
39-
"<link rel="stylesheet" href="/assets/index.css">",
40-
"<link rel="stylesheet" href="/assets/test.css">",
39+
"<link rel="stylesheet" href="/assets/index.css" crossorigin>",
40+
"<link rel="stylesheet" href="/assets/test.css" crossorigin>",
4141
]
4242
`,
4343
)
@@ -80,8 +80,8 @@ describe('renderer', () => {
8080
"<link rel="prefetch" as="image" type="image/png" href="/assets/entry.png">",
8181
"<link rel="prefetch" as="script" crossorigin href="/assets/index.mjs">",
8282
"<link rel="prefetch" as="script" crossorigin href="/assets/lazy-component.mjs">",
83-
"<link rel="prefetch" as="style" href="/assets/index.css">",
84-
"<link rel="prefetch" as="style" href="/assets/lazy-component.css">",
83+
"<link rel="prefetch" as="style" crossorigin href="/assets/index.css">",
84+
"<link rel="prefetch" as="style" crossorigin href="/assets/lazy-component.css">",
8585
]
8686
`)
8787
})
@@ -93,9 +93,9 @@ describe('renderer', () => {
9393
])
9494
expect(renderStyles().split('>').slice(0, -1).map(s => `${s}>`).sort()).toMatchInlineSnapshot(`
9595
[
96-
"<link rel="stylesheet" href="/assets/about.css">",
97-
"<link rel="stylesheet" href="/assets/lazy-component.css">",
98-
"<link rel="stylesheet" href="/assets/test.css">",
96+
"<link rel="stylesheet" href="/assets/about.css" crossorigin>",
97+
"<link rel="stylesheet" href="/assets/lazy-component.css" crossorigin>",
98+
"<link rel="stylesheet" href="/assets/test.css" crossorigin>",
9999
]
100100
`)
101101
const result = renderResourceHints().split('>').slice(0, -1).map(s => `${s}>`).sort()
@@ -112,7 +112,7 @@ describe('renderer', () => {
112112
"<link rel="prefetch" as="image" type="image/svg+xml" href="/assets/lazy-component.svg">",
113113
"<link rel="prefetch" as="image" type="image/x-icon" href="/assets/lazy-component.ico">",
114114
"<link rel="prefetch" as="script" crossorigin href="/assets/index.mjs">",
115-
"<link rel="prefetch" as="style" href="/assets/index.css">",
115+
"<link rel="prefetch" as="style" crossorigin href="/assets/index.css">",
116116
"<link rel="prefetch" as="video" href="/assets/lazy-component.mp4">",
117117
]
118118
`)

0 commit comments

Comments
 (0)