fix: load CSS when using server-side route resolution (#13498)

When implementing server-side route resolution we didn't think of the CSS associated with the entry points of the pages. Since Vite isn't involved in that chain, it can't automatically wire up the imports correctly, so we gotta add code to load them ourselves.

Fixes #13491

Author: dummdidumm

.changeset/stupid-clocks-turn.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: load CSS when using server-side route resolution

packages/adapter-netlify/index.js

@@ -143,7 +143,7 @@ async function generate_edge_functions({ builder }) {
 	writeFileSync(`${tmp}/manifest.js`, `export const manifest = ${manifest};\n`);
 
 	/** @type {{ assets: Set<string> }} */
-  // we have to prepend the file:// protocol because Windows doesn't support absolute path imports
+	// we have to prepend the file:// protocol because Windows doesn't support absolute path imports
 	const { assets } = (await import(`file://${tmp}/manifest.js`)).manifest;
 
 	const path = '/*';

packages/kit/src/exports/vite/dev/index.js

@@ -145,6 +145,7 @@ export async function dev(vite, vite_config, svelte_config) {
 										return `${svelte_config.kit.paths.base}${to_fs(svelte_config.kit.outDir)}/generated/client/nodes/${i}.js`;
 									}
 								}),
+					// `css` is not necessary in dev, as the JS file from `nodes` will reference the CSS file
 					routes:
 						svelte_config.kit.router.resolution === 'client'
 							? undefined

packages/kit/src/exports/vite/index.js

@@ -866,8 +866,12 @@ Tips:
 				/** @type {import('vite').Manifest} */
 				const client_manifest = JSON.parse(read(`${out}/client/${vite_config.build.manifest}`));
 
-				const deps_of = /** @param {string} f */ (f) =>
-					find_deps(client_manifest, posixify(path.relative('.', f)), false);
+				/**
+				 * @param {string} entry
+				 * @param {boolean} [add_dynamic_css]
+				 */
+				const deps_of = (entry, add_dynamic_css = false) =>
+					find_deps(client_manifest, posixify(path.relative('.', entry)), add_dynamic_css);
 
 				if (svelte_config.kit.output.bundleStrategy === 'split') {
 					const start = deps_of(`${runtime_directory}/client/entry.js`);
@@ -888,14 +892,20 @@ Tips:
 					// similar to that on the client, with as much information computed upfront so that we
 					// don't need to include any code of the actual routes in the server bundle.
 					if (svelte_config.kit.router.resolution === 'server') {
-						build_data.client.nodes = manifest_data.nodes.map((node, i) => {
+						const nodes = manifest_data.nodes.map((node, i) => {
 							if (node.component || node.universal) {
-								return resolve_symlinks(
+								const entry = `${kit.outDir}/generated/client-optimized/nodes/${i}.js`;
+								const deps = deps_of(entry, true);
+								const file = resolve_symlinks(
 									client_manifest,
 									`${kit.outDir}/generated/client-optimized/nodes/${i}.js`
 								).chunk.file;
+
+								return { file, css: deps.stylesheets };
 							}
 						});
+						build_data.client.nodes = nodes.map((node) => node?.file);
+						build_data.client.css = nodes.map((node) => node?.css);
 
 						build_data.client.routes = compact(
 							manifest_data.routes.map((route) => {

packages/kit/src/runtime/client/client.js

@@ -19,7 +19,8 @@ import {
 	origin,
 	scroll_state,
 	notifiable_store,
-	create_updated_store
+	create_updated_store,
+	load_css
 } from './utils.js';
 import { base } from '__sveltekit/paths';
 import * as devalue from 'devalue';
@@ -41,6 +42,8 @@ import { writable } from 'svelte/store';
 import { page, update, navigating } from './state.svelte.js';
 import { add_data_suffix, add_resolution_suffix } from '../pathname.js';
 
+export { load_css };
+
 const ICON_REL_ATTRIBUTES = new Set(['icon', 'shortcut icon', 'apple-touch-icon']);
 
 let errored = false;

packages/kit/src/runtime/client/entry.js

@@ -1,3 +1,3 @@
 // we expose this as a separate entry point (rather than treating client.js as the entry point)
-// so that everything other than `start` can be treeshaken
-export { start } from './client.js';
+// so that everything other than `start`/`load_css` can be treeshaken
+export { start, load_css } from './client.js';

packages/kit/src/runtime/client/utils.js

@@ -331,3 +331,40 @@ export function is_external_url(url, base, hash_routing) {
 
 	return false;
 }
+
+/** @type {Record<string, boolean>} */
+const seen = {};
+
+/**
+ * Used for server-side resolution, to replicate Vite's CSS loading behaviour in production.
+ *
+ * Closely modelled after https://github.com/vitejs/vite/blob/3dd12f4724130fdf8ba44c6d3252ebdff407fd47/packages/vite/src/node/plugins/importAnalysisBuild.ts#L214
+ * (which ideally we could just use directly, but it's not exported)
+ * @param {string[]} deps
+ */
+export function load_css(deps) {
+	if (__SVELTEKIT_CLIENT_ROUTING__) return;
+
+	const csp_nonce_meta = /** @type {HTMLMetaElement} */ (
+		document.querySelector('meta[property=csp-nonce]')
+	);
+	const csp_nonce = csp_nonce_meta?.nonce || csp_nonce_meta?.getAttribute('nonce');
+
+	for (const dep of deps) {
+		if (dep in seen) continue;
+		seen[dep] = true;
+
+		if (document.querySelector(`link[href="${dep}"][rel="stylesheet"]`)) {
+			continue;
+		}
+
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.crossOrigin = '';
+		link.href = dep;
+		if (csp_nonce) {
+			link.setAttribute('nonce', csp_nonce);
+		}
+		document.head.appendChild(link);
+	}
+}

packages/kit/src/runtime/server/page/server_routing.js

@@ -105,10 +105,39 @@ export function create_server_routing_response(route, params, url, manifest) {
 
 	if (route) {
 		const csr_route = generate_route_object(route, url, manifest);
-		const body = `export const route = ${csr_route}; export const params = ${JSON.stringify(params)};`;
+		const body = `${create_css_import(route, url, manifest)}\nexport const route = ${csr_route}; export const params = ${JSON.stringify(params)};`;
 
 		return { response: text(body, { headers }), body };
 	} else {
 		return { response: text('', { headers }), body: '' };
 	}
 }
+
+/**
+ * This function generates the client-side import for the CSS files that are
+ * associated with the current route. Vite takes care of that when using
+ * client-side route resolution, but for server-side resolution it does
+ * not know about the CSS files automatically.
+ *
+ * @param {import('types').SSRClientRoute} route
+ * @param {URL} url
+ * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @returns {string}
+ */
+function create_css_import(route, url, manifest) {
+	const { errors, layouts, leaf } = route;
+
+	let css = '';
+
+	for (const node of [...errors, ...layouts.map((l) => l?.[1]), leaf[1]]) {
+		if (typeof node !== 'number') continue;
+		const node_css = manifest._.client.css?.[node];
+		for (const css_path of node_css ?? []) {
+			css += `'${assets || base}/${css_path}',`;
+		}
+	}
+
+	if (!css) return '';
+
+	return `${create_client_import(/** @type {string} */ (manifest._.client.start), url)}.then(x => x.load_css([${css}]));`;
+}

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

@@ -80,6 +80,12 @@ export interface BuildData {
 		 * Only set in case of `router.resolution === 'server'`.
 		 */
 		nodes?: (string | undefined)[];
+		/**
+		 * CSS files referenced in the entry points of the layouts/pages.
+		 * An entry is undefined if the layout/page has no component or universal file (i.e. only has a `.server.js` file) or if has no CSS.
+		 * Only set in case of `router.resolution === 'server'`.
+		 */
+		css?: (string[] | undefined)[];
 		/**
 		 * Contains the client route manifest in a form suitable for the server which is used for server side route resolution.
 		 * Notably, it contains all routes, regardless of whether they are prerendered or not (those are missing in the optimized server route manifest).

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

@@ -7,9 +7,10 @@ import { test } from '../../../../utils.js';
 test.describe.configure({ mode: 'parallel' });
 
 test.describe('CSS', () => {
-	test('applies styles correctly', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
-
+	/**
+	 * @param {(selector: string, prop: string) => Promise<string>} get_computed_style
+	 */
+	function check_styles(get_computed_style) {
 		test.step('applies imported styles', async () => {
 			expect(await get_computed_style('.styled', 'color')).toBe('rgb(255, 0, 0)');
 		});
@@ -29,6 +30,26 @@ test.describe('CSS', () => {
 		test.step('does not apply raw and url', async () => {
 			expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)');
 		});
+	}
+
+	test('applies styles correctly', async ({ page, get_computed_style }) => {
+		await page.goto('/css');
+
+		check_styles(get_computed_style);
+	});
+
+	test('applies styles correctly after client-side navigation', async ({
+		page,
+		app,
+		get_computed_style,
+		javaScriptEnabled
+	}) => {
+		if (!javaScriptEnabled) return;
+
+		await page.goto('/');
+		await app.goto('/css');
+
+		check_styles(get_computed_style);
 	});
 
 	test('loads styles on routes with encoded characters', async ({ page, get_computed_style }) => {