diff --git a/.changeset/spicy-cougars-wave.md b/.changeset/spicy-cougars-wave.md new file mode 100644 index 000000000000..d65ca6f9e120 --- /dev/null +++ b/.changeset/spicy-cougars-wave.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +fix: correctly inline stylesheets of components dynamically imported in a universal load function if they are below the configured inlineStyleThreshold diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts index 732df205d0ae..6efab36ef8eb 100644 --- a/packages/kit/src/exports/public.d.ts +++ b/packages/kit/src/exports/public.d.ts @@ -468,7 +468,7 @@ export interface KitConfig { errorTemplate?: string; }; /** - * Inline CSS inside a ` diff --git a/packages/kit/test/apps/options/test/test.js b/packages/kit/test/apps/options/test/test.js index 3ce6b482e092..82a30b34f159 100644 --- a/packages/kit/test/apps/options/test/test.js +++ b/packages/kit/test/apps/options/test/test.js @@ -107,7 +107,7 @@ test.describe('assets path', () => { await page.goto('/path-base/'); const href = await page.locator('link[rel="icon"]').getAttribute('href'); - const response = await request.get(href); + const response = await request.get(href ?? ''); expect(response.status()).toBe(200); }); }); @@ -133,7 +133,7 @@ test.describe('CSP', () => { test('ensure CSP header in stream response', async ({ page, javaScriptEnabled }) => { if (!javaScriptEnabled) return; const response = await page.goto('/path-base/csp-with-stream'); - expect(response.headers()['content-security-policy']).toMatch( + expect(response?.headers()['content-security-policy']).toMatch( /require-trusted-types-for 'script'/ ); expect(await page.textContent('h2')).toBe('Moo Deng!'); @@ -141,7 +141,7 @@ test.describe('CSP', () => { test("quotes 'script'", async ({ page }) => { const response = await page.goto('/path-base'); - expect(response.headers()['content-security-policy']).toMatch( + expect(response?.headers()['content-security-policy']).toMatch( /require-trusted-types-for 'script'/ ); }); @@ -305,19 +305,32 @@ if (!process.env.DEV) { }); test.describe('inlineStyleThreshold', () => { - test('loads asset', async ({ page }) => { + test('loads assets', async ({ page }) => { let fontLoaded = false; - page.on('response', (response) => { if (response.url().endsWith('.woff2') || response.url().endsWith('.woff')) { fontLoaded = response.ok(); } }); - await page.goto('/path-base/inline-assets'); - expect(fontLoaded).toBeTruthy(); }); + + test('includes components dynamically imported in universal load', async ({ + page, + get_computed_style + }) => { + let loaded_css = false; + page.on('response', (response) => { + if (response.url().endsWith('.css')) { + loaded_css = true; + } + }); + await page.goto('/path-base/inline-assets/dynamic-import'); + await expect(page.locator('p')).toHaveText("I'm dynamically imported"); + expect(loaded_css).toBe(false); + expect(await get_computed_style('p', 'color')).toEqual('rgb(0, 0, 255)'); + }); }); } diff --git a/packages/kit/types/index.d.ts b/packages/kit/types/index.d.ts index 23bb6d7287a4..f5c4fbd97652 100644 --- a/packages/kit/types/index.d.ts +++ b/packages/kit/types/index.d.ts @@ -450,7 +450,7 @@ declare module '@sveltejs/kit' { errorTemplate?: string; }; /** - * Inline CSS inside a `