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 `