fix: ensure CSS URLs are correct when inlining client stylesheets

.changeset/brave-guests-hope.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: ensure inlined CSS follows `paths.assets` and `paths.relative` settings

.changeset/shy-tables-shout.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: ensure CSS inlining includes components that are conditionally rendered

packages/enhanced-img/package.json

@@ -38,7 +38,7 @@
 	},
 	"types": "types/index.d.ts",
 	"dependencies": {
-		"magic-string": "^0.30.5",
+		"magic-string": "catalog:",
 		"sharp": "^0.34.1",
 		"svelte-parse-markup": "^0.1.5",
 		"vite-imagetools": "^9.0.2",

packages/kit/package.json

@@ -26,7 +26,7 @@
 		"devalue": "^5.6.2",
 		"esm-env": "^1.2.2",
 		"kleur": "^4.1.5",
-		"magic-string": "^0.30.5",
+		"magic-string": "catalog:",
 		"mrmime": "^2.0.0",
 		"sade": "^1.8.1",
 		"set-cookie-parser": "^2.6.0",

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

@@ -5,14 +5,43 @@ import { s } from '../../../utils/misc.js';
 import { normalizePath } from 'vite';
 import { basename, join } from 'node:path';
 import { create_node_analyser } from '../static_analysis/index.js';
+import { fix_css_urls } from '../../../utils/css.js';
 
+/**
+ * Regenerate server nodes after acquiring client manifest
+ * @overload
+ * @param {string} out
+ * @param {import('types').ValidatedKitConfig} kit
+ * @param {import('types').ManifestData} manifest_data
+ * @param {import('vite').Manifest} server_manifest
+ * @param {import('vite').Manifest} client_manifest
+ * @param {string} assets_path
+ * @param {import('vite').Rollup.RollupOutput['output']} client_chunks
+ * @param {import('types').RecursiveRequired<import('types').ValidatedConfig['kit']['output']>} output_config
+ * @param {Map<string, { page_options: Record<string, any> | null, children: string[] }>} static_exports
+ * @returns {Promise<void>}
+ */
+/**
+ * Build server nodes without client manifest for analysis phase
+ * @overload
+ * @param {string} out
+ * @param {import('types').ValidatedKitConfig} kit
+ * @param {import('types').ManifestData} manifest_data
+ * @param {import('vite').Manifest} server_manifest
+ * @param {null} client_manifest
+ * @param {null} assets_path
+ * @param {null} client_chunks
+ * @param {import('types').RecursiveRequired<import('types').ValidatedConfig['kit']['output']>} output_config
+ * @param {Map<string, { page_options: Record<string, any> | null, children: string[] }>} static_exports
+ * @returns {Promise<void>}
+ */
 /**
  * @param {string} out
  * @param {import('types').ValidatedKitConfig} kit
  * @param {import('types').ManifestData} manifest_data
  * @param {import('vite').Manifest} server_manifest
  * @param {import('vite').Manifest | null} client_manifest
- * @param {import('vite').Rollup.OutputBundle | null} server_bundle
+ * @param {string | null} assets_path
  * @param {import('vite').Rollup.RollupOutput['output'] | null} client_chunks
  * @param {import('types').RecursiveRequired<import('types').ValidatedConfig['kit']['output']>} output_config
  * @param {Map<string, { page_options: Record<string, any> | null, children: string[] }>} static_exports
@@ -23,7 +52,7 @@ export async function build_server_nodes(
 	manifest_data,
 	server_manifest,
 	client_manifest,
-	server_bundle,
+	assets_path,
 	client_chunks,
 	output_config,
 	static_exports
@@ -34,36 +63,17 @@ export async function build_server_nodes(
 	/** @type {Map<string, string>} */
 	const stylesheets_to_inline = new Map();
 
-	if (server_bundle && client_chunks && kit.inlineStyleThreshold > 0) {
-		const client = get_stylesheets(client_chunks);
-		const server = get_stylesheets(Object.values(server_bundle));
-
-		// map server stylesheet name to the client stylesheet name
-		for (const [id, client_stylesheet] of client.stylesheets_used) {
-			const server_stylesheet = server.stylesheets_used.get(id);
-			if (!server_stylesheet) {
+	if (client_chunks && kit.inlineStyleThreshold > 0) {
+		for (const chunk of client_chunks) {
+			if (chunk.type !== 'asset' || !chunk.fileName.endsWith('.css')) {
 				continue;
 			}
-			client_stylesheet.forEach((file, i) => {
-				stylesheets_to_inline.set(file, server_stylesheet[i]);
-			});
-		}
 
-		// filter out stylesheets that should not be inlined
-		for (const [fileName, content] of client.stylesheet_content) {
-			if (content.length >= kit.inlineStyleThreshold) {
-				stylesheets_to_inline.delete(fileName);
+			const source = chunk.source.toString();
+			if (source.length < kit.inlineStyleThreshold) {
+				stylesheets_to_inline.set(chunk.fileName, source);
 			}
 		}
-
-		// map server stylesheet source to the client stylesheet name
-		for (const [client_file, server_file] of stylesheets_to_inline) {
-			const source = server.stylesheet_content.get(server_file);
-			if (!source) {
-				throw new Error(`Server stylesheet source not found for client stylesheet ${client_file}`);
-			}
-			stylesheets_to_inline.set(client_file, source);
-		}
 	}
 
 	const { get_page_options } = create_node_analyser({
@@ -76,6 +86,34 @@ export async function build_server_nodes(
 		static_exports
 	});
 
+	/**
+	 * For CSS inlining, we either store a string or a function that returns the
+	 * styles with the correct asset base path
+	 * @type {(css: string, eager_assets: Set<string>) => string}
+	 */
+	let prepare_css_for_inlining = (css) => s(css);
+
+	// when paths.assets is set we still need the paths to be dynamic because we
+	// set a fake path (/_svelte_kit_assets) at runtime when running `vite preview`
+	if (kit.paths.assets || kit.paths.relative) {
+		const static_assets = new Set(manifest_data.assets.map((a) => a.file));
+		prepare_css_for_inlining = (css, eager_assets) => {
+			// TODO: pass in manifest_data.assets
+			const transformed_css = fix_css_urls({
+				css,
+				vite_assets: eager_assets,
+				static_assets,
+				assets: '${assets}',
+				base: '${base}'
+			});
+			// only convert to a function if there are URLs to replace
+			if (css !== transformed_css) {
+				return `function css(assets, base) { return \`${s(transformed_css).slice(1, -1)}\`; }`;
+			}
+			return s(css);
+		};
+	}
+
 	for (let i = 0; i < manifest_data.nodes.length; i++) {
 		const node = manifest_data.nodes[i];
 
@@ -96,6 +134,9 @@ export async function build_server_nodes(
 		/** @type {string[]} */
 		let fonts = [];
 
+		/** @type {Set<string>} */
+		let eager_assets = new Set();
+
 		if (node.component && client_manifest) {
 			exports.push(
 				'let component_cache;',
@@ -153,8 +194,6 @@ export async function build_server_nodes(
 
 			/** @type {Set<string>} */
 			const eager_css = new Set();
-			/** @type {Set<string>} */
-			const eager_assets = new Set();
 
 			entry.stylesheet_map.forEach((value, filepath) => {
 				// pages and layouts are renamed to node indexes when optimised for the client
@@ -180,19 +219,29 @@ export async function build_server_nodes(
 			`export const fonts = ${s(fonts)};`
 		);
 
+		// assets that have been processed by Vite (with the asset path stripped)
+		if (assets_path && eager_assets.size) {
+			eager_assets = new Set(
+				Array.from(eager_assets).map((asset) => {
+					return asset.replace(`${assets_path}/`, '');
+				})
+			);
+		}
+
 		/** @type {string[]} */
 		const inline_styles = [];
 
 		stylesheets.forEach((file, i) => {
 			if (stylesheets_to_inline.has(file)) {
 				const filename = basename(file);
 				const dest = `${out}/server/stylesheets/${filename}.js`;
-				const source = stylesheets_to_inline.get(file);
-				if (!source) {
-					throw new Error(`Server stylesheet source not found for client stylesheet ${file}`);
-				}
-				fs.writeFileSync(dest, `// ${filename}\nexport default ${s(source)};`);
 
+				let css = /** @type {string} */ (stylesheets_to_inline.get(file));
+
+				fs.writeFileSync(
+					dest,
+					`// ${filename}\nexport default ${prepare_css_for_inlining(css, eager_assets)};`
+				);
 				const name = `stylesheet_${i}`;
 				imports.push(`import ${name} from '../stylesheets/${filename}.js';`);
 				inline_styles.push(`\t${s(file)}: ${name}`);
@@ -209,37 +258,3 @@ export async function build_server_nodes(
 		);
 	}
 }
-
-/**
- * @param {(import('vite').Rollup.OutputAsset | import('vite').Rollup.OutputChunk)[]} chunks
- */
-function get_stylesheets(chunks) {
-	/**
-	 * A map of module IDs and the stylesheets they use.
-	 * @type {Map<string, string[]>}
-	 */
-	const stylesheets_used = new Map();
-
-	/**
-	 * A map of stylesheet names and their content.
-	 * @type {Map<string, string>}
-	 */
-	const stylesheet_content = new Map();
-
-	for (const chunk of chunks) {
-		if (chunk.type === 'asset') {
-			if (chunk.fileName.endsWith('.css')) {
-				stylesheet_content.set(chunk.fileName, chunk.source.toString());
-			}
-			continue;
-		}
-
-		if (chunk.viteMetadata?.importedCss.size) {
-			const css = Array.from(chunk.viteMetadata.importedCss);
-			for (const id of chunk.moduleIds) {
-				stylesheets_used.set(id, css);
-			}
-		}
-	}
-	return { stylesheets_used, stylesheet_content };
-}

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

@@ -1031,7 +1031,7 @@ async function kit({ svelte_config }) {
 		 */
 		writeBundle: {
 			sequential: true,
-			async handler(_options, bundle) {
+			async handler(_options) {
 				if (secondary_build_started) return; // only run this once
 
 				const verbose = vite_config.logLevel === 'info';
@@ -1271,7 +1271,7 @@ async function kit({ svelte_config }) {
 					manifest_data,
 					server_manifest,
 					client_manifest,
-					bundle,
+					assets_path,
 					client_chunks,
 					svelte_config.kit.output,
 					static_exports

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

@@ -245,7 +245,14 @@ export async function render_response({
 			for (const url of node.fonts) fonts.add(url);
 
 			if (node.inline_styles && !client.inline) {
-				Object.entries(await node.inline_styles()).forEach(([k, v]) => inline_styles.set(k, v));
+				Object.entries(await node.inline_styles()).forEach(([filename, css]) => {
+					if (typeof css === 'string') {
+						inline_styles.set(filename, css);
+						return;
+					}
+
+					inline_styles.set(filename, css(`${assets}/${paths.app_dir}/immutable/assets`, assets));
+				});
 			}
 		}
 	} else {

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

@@ -431,7 +431,9 @@ export interface SSRNode {
 	server_id?: string;
 
 	/** inlined styles */
-	inline_styles?(): MaybePromise<Record<string, string>>;
+	inline_styles?(): MaybePromise<
+		Record<string, string | ((assets: string, base: string) => string)>
+	>;
 	/** Svelte component */
 	component?: SSRComponentLoader;
 	/** +page.js or +layout.js */