fix: make paths in .css assets relative (#14262)

* make paths in .css files relative

* fix, add test

* changeset

* unused

* use copy

Author: Rich-Harris

.changeset/four-insects-shave.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: make paths in .css assets relative

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

@@ -1078,10 +1078,30 @@ async function kit({ svelte_config }) {
 				);
 
 				const assets_path = `${kit.appDir}/immutable/assets`;
+				const server_assets = `${out}/server/${assets_path}`;
+				const client_assets = `${out}/client/${assets_path}`;
 
-				copy(`${out}/server/${assets_path}`, `${out}/client/${assets_path}`, {
-					filter: (basename) => !ssr_stylesheets.has(`${assets_path}/${basename}`)
-				});
+				if (fs.existsSync(server_assets)) {
+					for (const file of fs.readdirSync(server_assets)) {
+						const src = `${server_assets}/${file}`;
+						const dest = `${client_assets}/${file}`;
+
+						if (fs.existsSync(dest) || ssr_stylesheets.has(`${assets_path}/${file}`)) {
+							continue;
+						}
+
+						if (file.endsWith('.css')) {
+							// make absolute paths in CSS relative, for portability
+							const content = fs
+								.readFileSync(src, 'utf-8')
+								.replaceAll(`${kit.paths.base}/${assets_path}`, '.');
+
+							fs.writeFileSync(src, content);
+						}
+
+						copy(src, dest);
+					}
+				}
 
 				/** @type {import('vite').Manifest} */
 				const client_manifest = JSON.parse(read(`${out}/client/.vite/manifest.json`));

packages/kit/test/apps/basics/src/routes/read-file/+page.server.js

@@ -2,6 +2,7 @@ import { dev } from '$app/environment';
 import { read } from '$app/server';
 import auto from './[auto].txt';
 import url from './[url].txt?url';
+import styles from './[styles].css?url';
 
 /** @type {Record<string, { default: string }>} */
 const local_glob = import.meta.glob('./assets/**', {
@@ -23,6 +24,7 @@ export async function load() {
 	return {
 		auto: await read(auto).text(),
 		url: await read(url).text(),
+		styles: await read(styles).text(),
 		local_glob: await read(local_glob['./assets/[file].txt'].default).text(),
 		external_glob: await read(Object.values(external_glob)[0].default).text(),
 		svg: await read(local_glob['./assets/icon.svg'].default).text()

packages/kit/test/apps/basics/src/routes/read-file/+page.svelte

@@ -4,6 +4,7 @@
 
 <p data-testid="auto">{data.auto}</p>
 <p data-testid="url">{data.url}</p>
+<p data-testid="styles">{data.styles}</p>
 <p data-testid="local_glob">{data.local_glob}</p>
 <p data-testid="external_glob">{data.external_glob}</p>
 <div data-testid="svg">{@html data.svg}</div>

packages/kit/test/apps/basics/src/routes/read-file/[styles].css

@@ -0,0 +1,3 @@
+.logo {
+	background: url(../asset-import/large.jpg);
+}

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

@@ -1072,6 +1072,7 @@ test.describe('$app/server', () => {
 
 		const auto = await page.textContent('[data-testid="auto"]');
 		const url = await page.textContent('[data-testid="url"]');
+		const styles = await page.textContent('[data-testid="styles"]');
 		const local_glob = await page.textContent('[data-testid="local_glob"]');
 		const external_glob = await page.textContent('[data-testid="external_glob"]');
 		const svg = await page.innerHTML('[data-testid="svg"]');
@@ -1084,5 +1085,8 @@ test.describe('$app/server', () => {
 			'Imported with url glob from the read-file test in basics. Placed here outside the app folder to force a /@fs prefix 😎'
 		);
 		expect(svg).toContain('<rect width="24" height="24" rx="2" fill="#ff3e00"></rect>');
+
+		// check that paths in .css files are relative
+		expect(styles).toContain('url(.');
 	});
 });