From 27c54407b64c1bd51e9fea9efa4f422b1d924b02 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 9 Jul 2024 12:18:59 -0700
Subject: [PATCH] chore: expose css option in playground (#12369)

* expose css compiler option

* pass options to worker
---
 .../src/lib/Output/CompilerOptions.svelte              | 10 ++++++++++
 sites/svelte-5-preview/src/lib/Repl.svelte             |  3 ++-
 .../svelte-5-preview/src/lib/workers/compiler/index.js |  4 +---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte b/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
index 60504c5052..49598099bf 100644
--- a/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
@@ -18,6 +18,16 @@
 		<label for="server"><span class="string">"server"</span>,</label>
 	</div>
 
+	<div class="option">
+		<span class="key">css:</span>
+
+		<input id="injected" type="radio" bind:group={$compile_options.css} value="injected" />
+		<label for="injected"><span class="string">"injected"</span></label>
+
+		<input id="external" type="radio" bind:group={$compile_options.css} value="external" />
+		<label for="external"><span class="string">"external"</span>,</label>
+	</div>
+
 	<label class="option">
 		<span class="key">dev:</span>
 		<Checkbox bind:checked={$compile_options.dev} />
diff --git a/sites/svelte-5-preview/src/lib/Repl.svelte b/sites/svelte-5-preview/src/lib/Repl.svelte
index 80a2b7ff61..c554153096 100644
--- a/sites/svelte-5-preview/src/lib/Repl.svelte
+++ b/sites/svelte-5-preview/src/lib/Repl.svelte
@@ -77,7 +77,8 @@
 	/** @type {import('svelte/compiler').CompileOptions} */
 	const DEFAULT_COMPILE_OPTIONS = {
 		generate: 'client',
-		dev: false
+		dev: false,
+		css: 'external'
 	};
 
 	/** @type {Map<string, import('@codemirror/state').EditorState>} */
diff --git a/sites/svelte-5-preview/src/lib/workers/compiler/index.js b/sites/svelte-5-preview/src/lib/workers/compiler/index.js
index 83dffe1856..43ef1c7bb0 100644
--- a/sites/svelte-5-preview/src/lib/workers/compiler/index.js
+++ b/sites/svelte-5-preview/src/lib/workers/compiler/index.js
@@ -62,9 +62,7 @@ function compile({ id, source, options, return_ast }) {
 
 		if (options.filename.endsWith('.svelte')) {
 			const compiled = svelte.compile(source, {
-				filename: options.filename,
-				generate: options.generate,
-				dev: options.dev,
+				...options,
 				discloseVersion: false // less visual noise in the output tab
 			});