@sveltejs/kit - npm Package Compare versions

Comparing version 2.17.2 to 2.17.3

package.json

 {
   "name": "@sveltejs/kit",
-  "version": "2.17.2",
+  "version": "2.17.3",
   "description": "SvelteKit is the fastest way to build Svelte apps",
@@ -5,0 +5,0 @@ "keywords": [

src/exports/vite/build/build_server.js

@@ -28,41 +28,48 @@ import fs from 'node:fs';
 		for (const key in client_manifest) {
-			const file = client_manifest[key];
-			if (file.css?.[0]) {
-				client_stylesheets.add(file.css[0]);
-			}
+			client_manifest[key].css?.forEach((filename) => {
+				client_stylesheets.add(filename);
+			});
 		}
 
-		/** @type {Map<number, string>} */
+		/** @type {Map<number, string[]>} */
 		const server_stylesheets = new Map();
+		manifest_data.nodes.forEach((node, i) => {
+			if (!node.component || !server_manifest[node.component]) return;
 
-		const component_stylesheet_map = new Map(Object.values(server_manifest).map((file) => [file.src, file.css?.[0]]));
+			const { stylesheets } = find_deps(server_manifest, node.component, false);
 
-		manifest_data.nodes.forEach((node, i) => {
-			const server_stylesheet = component_stylesheet_map.get(node.component);
-			if (node.component && server_stylesheet) {
-				server_stylesheets.set(i, server_stylesheet);
+			if (stylesheets.length) {
+				server_stylesheets.set(i, stylesheets);
 			}
 		});
 
-		// ignore dynamically imported stylesheets since we can't inline those
-		css.filter(asset => client_stylesheets.has(asset.fileName))
-			.forEach((asset) => {
-				if (asset.source.length < kit.inlineStyleThreshold) {
-					// We know that the names for entry points are numbers.
-					const [index] = basename(asset.fileName).split('.');
-					// There can also be other CSS files from shared components
-					// for example, which we need to ignore here.
-					if (isNaN(+index)) return;
+		for (const asset of css) {
+			// ignore dynamically imported stylesheets since we don't need to inline those
+			if (!client_stylesheets.has(asset.fileName) || asset.source.length >= kit.inlineStyleThreshold) {
+				continue;
+			}
 
-					const server_stylesheet = server_stylesheets.get(+index);
-					const file = `${out}/server/stylesheets/${index}.js`;
+			// We know that the names for entry points are numbers.
+			const [index] = basename(asset.fileName).split('.');
+			// There can also be other CSS files from shared components
+			// for example, which we need to ignore here.
+			if (isNaN(+index)) continue;
 
-					// we need to inline the server stylesheet instead of the client one
-					// so that asset paths are correct on document load
-					const source = fs.readFileSync(`${out}/server/${server_stylesheet}`, 'utf-8');
+			const file = `${out}/server/stylesheets/${index}.js`;
 
-					fs.writeFileSync(file, `// ${server_stylesheet}\nexport default ${s(source)};`);
-					stylesheet_lookup.set(asset.fileName, index);
-				}
+			// we need to inline the server stylesheet instead of the client one
+			// so that asset paths are correct on document load
+			const filenames = server_stylesheets.get(+index);
+
+			if (!filenames) {
+				throw new Error('This should never happen, but if it does, it means we failed to find the server stylesheet for a node.');
+			}
+
+			const sources = filenames.map((filename) => {
+				return fs.readFileSync(`${out}/server/${filename}`, 'utf-8');
 			});
+			fs.writeFileSync(file, `// ${filenames.join(', ')}\nexport default ${s(sources.join('\n'))};`);
+
+			stylesheet_lookup.set(asset.fileName, index);
+		}
 	}
@@ -69,0 +76,0 @@

src/exports/vite/dev/index.js

@@ -148,2 +148,3 @@ import fs from 'node:fs';
 								}),
+					// `css` is not necessary in dev, as the JS file from `nodes` will reference the CSS file
 					routes:
@@ -150,0 +151,0 @@ svelte_config.kit.router.resolution === 'client'

src/exports/vite/index.js

@@ -869,4 +869,8 @@ import fs from 'node:fs';
 
-				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);
 
@@ -892,10 +896,16 @@ if (svelte_config.kit.output.bundleStrategy === 'split') {
 					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);
 
@@ -902,0 +912,0 @@ build_data.client.routes = compact(

src/runtime/client/entry.js

 // 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';

src/runtime/client/utils.js

@@ -334,1 +334,38 @@ import { BROWSER, DEV } from 'esm-env';
 }
+
+/** @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);
+	}
+}

src/runtime/server/page/load_data.js

@@ -245,3 +245,3 @@ import { DEV } from 'esm-env';
 			}
-		} else {
+		} else if (url.protocol === 'https:' || url.protocol === 'http:') {
 			// simulate CORS errors and "no access to body in no-cors mode" server-side for consistency with client-side behaviour
@@ -248,0 +248,0 @@ const mode = input instanceof Request ? input.mode : (init?.mode ?? 'cors');

src/runtime/server/page/server_routing.js

@@ -108,3 +108,3 @@ import { base, assets, relative } from '__sveltekit/paths';
 		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)};`;
 
@@ -116,1 +116,30 @@ return { response: text(body, { 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}]));`;
+}

src/types/internal.d.ts

@@ -84,2 +84,8 @@ import { SvelteComponent } from 'svelte';
 		/**
+		 * 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.
@@ -86,0 +92,0 @@ * Notably, it contains all routes, regardless of whether they are prerendered or not (those are missing in the optimized server route manifest).

src/version.js

 // generated during release, do not modify
 
 /** @type {string} */
-export const VERSION = '2.17.2';
+export const VERSION = '2.17.3';

No alert changes

Improved metrics

Total package byte prevSize

808173

0.43%

Lines of code

23172

0.36%

No dependency changes