fix: lazily load CSS for CSR dynamically imported components (#13564)

fixes #13546

This PR changes server nodes from always loading dynamically imported component's styles and fonts to only loading them if they are used during SSR (to avoid FOUC). This fixes lazy loading of components on the client, only retrieving the styles when needed.

We can tell which deps are used during SSR by analysing the deps of the node with both the server manifest and the client manifest, then comparing the results. If a style or font is missing from the server deps, it's probably only used on the client. Therefore, it should be safe to load lazily.

Author: eltigerchino

.changeset/flat-cows-cough.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: lazily load CSS for dynamically imported components

packages/kit/src/exports/vite/build/build_server.js

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import { mkdirp } from '../../../utils/filesystem.js';
-import { find_deps, resolve_symlinks } from './utils.js';
+import { filter_fonts, find_deps, resolve_symlinks } from './utils.js';
 import { s } from '../../../utils/misc.js';
 import { normalizePath } from 'vite';
 import { basename } from 'node:path';
@@ -83,13 +83,13 @@ export function build_server_nodes(out, kit, manifest_data, server_manifest, cli
 		const exports = [`export const index = ${i};`];
 
 		/** @type {string[]} */
-		const imported = [];
+		let imported = [];
 
 		/** @type {string[]} */
-		const stylesheets = [];
+		let stylesheets = [];
 
 		/** @type {string[]} */
-		const fonts = [];
+		let fonts = [];
 
 		if (node.component && client_manifest) {
 			exports.push(
@@ -119,15 +119,45 @@ export function build_server_nodes(out, kit, manifest_data, server_manifest, cli
 		}
 
 		if (client_manifest && (node.universal || node.component) && output_config.bundleStrategy === 'split') {
-			const entry = find_deps(
-				client_manifest,
-				`${normalizePath(kit.outDir)}/generated/client-optimized/nodes/${i}.js`,
-				true
-			);
+			const entry_path = `${normalizePath(kit.outDir)}/generated/client-optimized/nodes/${i}.js`;
+			const entry = find_deps(client_manifest, entry_path, true);
+
+			// eagerly load stylesheets and fonts imported by the SSR-ed page to avoid FOUC.
+			// If it is not used during SSR, it can be lazily loaded in the browser.
+	
+			/** @type {import('types').AssetDependencies | undefined} */
+			let component;
+			if (node.component) {
+				component = find_deps(server_manifest, node.component, true);
+			}
+
+			/** @type {import('types').AssetDependencies | undefined} */
+			let universal;
+			if (node.universal) {
+				universal = find_deps(server_manifest, node.universal, true);
+			}
+
+			/** @type {Set<string>} */
+			const css_used_by_server = new Set();
+			/** @type {Set<string>} */
+			const assets_used_by_server = new Set();
+
+			entry.stylesheet_map.forEach((value, key) => {
+				// pages and layouts are named as node indexes in the client manifest
+				// so we need to use the original filename when checking against the server manifest
+				if (key === entry_path) {
+					key = node.component ?? key;
+				}
+
+				if (component?.stylesheet_map.has(key) || universal?.stylesheet_map.has(key)) {
+					value.css.forEach(file => css_used_by_server.add(file));
+					value.assets.forEach(file => assets_used_by_server.add(file));
+				}
+			});
 
-			imported.push(...entry.imports);
-			stylesheets.push(...entry.stylesheets);
-			fonts.push(...entry.fonts);
+			imported = entry.imports;
+			stylesheets = Array.from(css_used_by_server);
+			fonts = filter_fonts(Array.from(assets_used_by_server));
 		}
 
 		exports.push(

packages/kit/src/exports/vite/build/utils.js

@@ -22,11 +22,16 @@ export function find_deps(manifest, entry, add_dynamic_css) {
 	/** @type {Set<string>} */
 	const imported_assets = new Set();
 
+	/** @type {Map<string, { css: Set<string>; assets: Set<string> }>} */
+	const stylesheet_map = new Map();
+
 	/**
 	 * @param {string} current
 	 * @param {boolean} add_js
+	 * @param {string} initial_importer
+	 * @param {number} dynamic_import_depth
 	 */
-	function traverse(current, add_js) {
+	function traverse(current, add_js, initial_importer, dynamic_import_depth) {
 		if (seen.has(current)) return;
 		seen.add(current);
 
@@ -35,27 +40,46 @@ export function find_deps(manifest, entry, add_dynamic_css) {
 		if (add_js) imports.add(chunk.file);
 
 		if (chunk.assets) {
-			for (const asset of chunk.assets) {
-				imported_assets.add(asset);
-			}
+			chunk.assets.forEach(asset => imported_assets.add(asset));
 		}
 
 		if (chunk.css) {
 			chunk.css.forEach((file) => stylesheets.add(file));
 		}
 
 		if (chunk.imports) {
-			chunk.imports.forEach((file) => traverse(file, add_js));
+			chunk.imports.forEach((file) => traverse(file, add_js, initial_importer, dynamic_import_depth));
+		}
+
+		if (!add_dynamic_css) return;
+
+		if ((chunk.css || chunk.assets) && dynamic_import_depth <= 1) {
+			// group files based on the initial importer because if a file is only ever
+			// a transitive dependency, it doesn't have a suitable name we can map back to
+			// the server manifest
+			if (stylesheet_map.has(initial_importer)) {
+				const { css, assets } = /** @type {{ css: Set<string>; assets: Set<string> }} */ (stylesheet_map.get(initial_importer));
+				if (chunk.css) chunk.css.forEach((file) => css.add(file));
+				if (chunk.assets) chunk.assets.forEach((file) => assets.add(file));
+			} else {
+				stylesheet_map.set(initial_importer, {
+					css: new Set(chunk.css),
+					assets: new Set(chunk.assets)
+				});
+			}
 		}
 
-		if (add_dynamic_css && chunk.dynamicImports) {
-			chunk.dynamicImports.forEach((file) => traverse(file, false));
+		if (chunk.dynamicImports) {
+			dynamic_import_depth++;
+			chunk.dynamicImports.forEach((file) => {
+				traverse(file, false, file, dynamic_import_depth);
+			});
 		}
 	}
 
 	const { chunk, file } = resolve_symlinks(manifest, entry);
 
-	traverse(file, true);
+	traverse(file, true, entry, 0);
 
 	const assets = Array.from(imported_assets);
 
@@ -65,7 +89,8 @@ export function find_deps(manifest, entry, add_dynamic_css) {
 		imports: Array.from(imports),
 		stylesheets: Array.from(stylesheets),
 		// TODO do we need this separately?
-		fonts: assets.filter((asset) => /\.(woff2?|ttf|otf)$/.test(asset))
+		fonts: filter_fonts(assets),
+		stylesheet_map
 	};
 }
 
@@ -85,7 +110,15 @@ export function resolve_symlinks(manifest, file) {
 	return { chunk, file };
 }
 
-const method_names = new Set(['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'OPTIONS']);
+/**
+ * @param {string[]} assets 
+ * @returns {string[]}
+ */
+export function filter_fonts(assets) {
+	return assets.filter((asset) => /\.(woff2?|ttf|otf)$/.test(asset));
+}
+
+const method_names = new Set((['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'OPTIONS']));
 
 // If we'd written this in TypeScript, it could be easy...
 /**

packages/kit/src/types/internal.d.ts

@@ -59,6 +59,7 @@ export interface AssetDependencies {
 	imports: string[];
 	stylesheets: string[];
 	fonts: string[];
+	stylesheet_map: Map<string, { css: Set<string>; assets: Set<string> }>;
 }
 
 export interface BuildData {

packages/kit/test/apps/basics/src/routes/css/dynamic/+page.svelte

@@ -0,0 +1,11 @@
+<script>
+	let Dynamic;
+</script>
+
+<button
+	on:click={async () => {
+		Dynamic = (await import('./Dynamic.svelte')).default;
+	}}>load component</button
+>
+
+<svelte:component this={Dynamic}></svelte:component>

packages/kit/test/apps/basics/src/routes/css/dynamic/Dynamic.svelte

@@ -0,0 +1,7 @@
+<p>I'm dynamically imported</p>
+
+<style>
+	p {
+		color: blue;
+	}
+</style>

packages/kit/test/apps/basics/test/cross-platform/client.test.js

@@ -532,6 +532,24 @@ test.describe('CSS', () => {
 
 		expect(await get_computed_style('#svelte-announcer', 'position')).toBe('absolute');
 	});
+
+	test('dynamically imported components lazily load CSS', async ({ page, get_computed_style }) => {
+		const requests = [];
+		page.on('request', (request) => {
+			const url = request.url();
+			if (url.includes('Dynamic') && url.endsWith('.css')) {
+				requests.push(url);
+			}
+		});
+
+		await page.goto('/css/dynamic');
+		expect(requests.length).toBe(0);
+
+		await page.locator('button').click();
+		await expect(page.locator('p')).toHaveText("I'm dynamically imported");
+		expect(await get_computed_style('p', 'color')).toBe('rgb(0, 0, 255)');
+		expect(requests.length).toBe(1);
+	});
 });
 
 test.describe.serial('Errors', () => {