Merge branch 'master' into update-vite-devalue

Author: Rich Harris

.changeset/eleven-ravens-turn.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: avoid trying to inline raw or url css imports

.changeset/hot-actors-hope.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+feat: prerender in worker rather than subprocess to support Deno

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

@@ -176,20 +176,17 @@ export async function dev(vite, vite_config, svelte_config) {
 							const styles = {};
 
 							for (const dep of deps) {
-								const url = new URL(dep.url, 'http://localhost/');
+								const url = new URL(dep.url, 'dummy:/');
 								const query = url.searchParams;
 
 								if (
-									isCSSRequest(dep.file) ||
-									(query.has('svelte') && query.get('type') === 'style')
+									(isCSSRequest(dep.file) ||
+										(query.has('svelte') && query.get('type') === 'style')) &&
+									!(query.has('raw') || query.has('url') || query.has('inline'))
 								) {
-									// setting `?inline` to load CSS modules as css string
-									query.set('inline', '');
-
 									try {
-										const mod = await loud_ssr_load_module(
-											`${url.pathname}${url.search}${url.hash}`
-										);
+										query.set('inline', '');
+										const mod = await vite.ssrLoadModule(`${url.pathname}${url.search}${url.hash}`);
 										styles[dep.url] = mod.default;
 									} catch {
 										// this can happen with dynamically imported modules, I think

packages/kit/src/utils/fork.js

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'node:url';
-import child_process from 'node:child_process';
+import { Worker, parentPort } from 'node:worker_threads';
 
 /**
  * Runs a task in a subprocess so any dangling stuff gets killed upon completion.
@@ -11,23 +11,21 @@ import child_process from 'node:child_process';
  * @returns {(opts: T) => Promise<U>} A function that when called starts the subprocess
  */
 export function forked(module, callback) {
-	if (process.env.SVELTEKIT_FORK && process.send) {
-		process.send({ type: 'ready', module });
-
-		process.on(
+	if (process.env.SVELTEKIT_FORK && parentPort) {
+		parentPort.on(
 			'message',
 			/** @param {any} data */ async (data) => {
 				if (data?.type === 'args' && data.module === module) {
-					if (process.send) {
-						process.send({
-							type: 'result',
-							module,
-							payload: await callback(data.payload)
-						});
-					}
+					parentPort?.postMessage({
+						type: 'result',
+						module,
+						payload: await callback(data.payload)
+					});
 				}
 			}
 		);
+
+		parentPort.postMessage({ type: 'ready', module });
 	}
 
 	/**
@@ -36,34 +34,32 @@ export function forked(module, callback) {
 	 */
 	const fn = function (opts) {
 		return new Promise((fulfil, reject) => {
-			const child = child_process.fork(fileURLToPath(module), {
-				stdio: 'inherit',
+			const worker = new Worker(fileURLToPath(module), {
 				env: {
 					...process.env,
 					SVELTEKIT_FORK: 'true'
-				},
-				serialization: 'advanced'
+				}
 			});
 
-			child.on(
+			worker.on(
 				'message',
 				/** @param {any} data */ (data) => {
 					if (data?.type === 'ready' && data.module === module) {
-						child.send({
+						worker.postMessage({
 							type: 'args',
 							module,
 							payload: opts
 						});
 					}
 
 					if (data?.type === 'result' && data.module === module) {
-						child.kill();
+						worker.terminate();
 						fulfil(data.payload);
 					}
 				}
 			);
 
-			child.on('exit', (code) => {
+			worker.on('exit', (code) => {
 				if (code) {
 					reject(new Error(`Failed with code ${code}`));
 				}

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

@@ -1,18 +1,17 @@
 <script>
 	import './_styles.css';
+	import './_manual.css?url';
+	import './_manual.css?raw';
+	import './_manual.css?inline';
 </script>
 
-<div class="styled">
-	this text is red
-</div>
+<div class="styled">this text is red</div>
 
-<div class="also-styled">
-	this text is blue
-</div>
+<div class="also-styled">this text is blue</div>
 
-<div class="overridden">
-	this text is green
-</div>
+<div class="overridden">this text is green</div>
+
+<div class="not">this text is black</div>
 
 <a href="/css/other">other</a>
 

packages/kit/test/apps/basics/src/routes/css/_manual.css

@@ -0,0 +1,3 @@
+.not {
+	color: blue;
+}

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

@@ -6,29 +6,28 @@ import { test } from '../../../../utils.js';
 test.describe.configure({ mode: 'parallel' });
 
 test.describe('CSS', () => {
-	test('applies imported styles', async ({ page, get_computed_style }) => {
+	test('applies styles correctly', async ({ page, get_computed_style }) => {
 		await page.goto('/css');
 
-		expect(await get_computed_style('.styled', 'color')).toBe('rgb(255, 0, 0)');
-	});
-
-	test('applies layout styles', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
-
-		expect(await get_computed_style('footer', 'color')).toBe('rgb(128, 0, 128)');
-	});
+		test.step('applies imported styles', async () => {
+			expect(await get_computed_style('.styled', 'color')).toBe('rgb(255, 0, 0)');
+		});
 
-	test('applies local styles', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
+		test.step('applies imported styles in the correct order', async () => {
+			expect(await get_computed_style('.overridden', 'color')).toBe('rgb(0, 128, 0)');
+		});
 
-		expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)');
-	});
+		test.step('applies layout styles', async () => {
+			expect(await get_computed_style('footer', 'color')).toBe('rgb(128, 0, 128)');
+		});
 
-	test('applies imported styles in the correct order', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
+		test.step('applies local styles', async () => {
+			expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)');
+		});
 
-		const color = await get_computed_style('.overridden', 'color');
-		expect(color).toBe('rgb(0, 128, 0)');
+		test.step('does not apply raw and url', async () => {
+			expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)');
+		});
 	});
 });