feat: support CSS imports in playground (#1383)

* feat: support CSS imports

Add support for things like `import './app.css'`, which can also influence tailwind's output

* deduplicate

* move

Author: dummdidumm

packages/repl/src/lib/Output/Viewer.svelte

@@ -208,7 +208,7 @@
 					}
 					//# sourceURL=playground:output
 				`,
-					bundle?.tailwind ?? srcdoc_styles
+					bundle?.css ?? srcdoc_styles
 				);
 				error = null;
 			}

packages/repl/src/lib/public.d.ts

@@ -5,7 +5,7 @@ export interface BundleResult {
 	error: (RollupError & CompileError) | null;
 	client: OutputChunk | null;
 	server: OutputChunk | null;
-	tailwind: string | null;
+	css: string | null;
 	imports: string[];
 }
 

packages/repl/src/lib/workers/bundler/index.ts

@@ -103,7 +103,7 @@ let previous: {
 
 let tailwind: Awaited<ReturnType<typeof init_tailwind>>;
 
-async function init_tailwind() {
+async function init_tailwind(user_css = '') {
 	const tailwindcss = await import('tailwindcss');
 
 	const { default: tailwind_preflight } = await import('tailwindcss/preflight.css?raw');
@@ -120,7 +120,8 @@ async function init_tailwind() {
 		`@layer theme, base, components, utilities;`,
 		`@import "tailwindcss/theme.css" layer(theme);`,
 		`@import "tailwindcss/preflight.css" layer(base);`,
-		`@import "tailwindcss/utilities.css" layer(utilities);`
+		`@import "tailwindcss/utilities.css" layer(utilities);`,
+		user_css
 	].join('\n');
 
 	return await tailwindcss.compile(tailwind_base, {
@@ -412,6 +413,8 @@ async function get_bundle(
 	};
 
 	const key = JSON.stringify(options);
+	const handled_css_ids = new Set<string>();
+	let user_css = '';
 
 	bundle = await rollup({
 		input: './__entry.js',
@@ -429,6 +432,23 @@ async function get_bundle(
 			replace({
 				'process.env.NODE_ENV': JSON.stringify('production')
 			}),
+			{
+				name: 'css',
+				transform(code, id) {
+					if (id.endsWith('.css')) {
+						if (!handled_css_ids.has(id)) {
+							handled_css_ids.add(id);
+							// We don't handle imports in the user CSS right now, so we remove them
+							// to avoid errors in e.g. the Tailwind compiler
+							user_css += '\n' + code.replace(/@import\s+["'][^"']+["'][^;]*;/g, '');
+						}
+						return {
+							code: '',
+							map: null
+						};
+					}
+				}
+			},
 			options.tailwind && {
 				name: 'tailwind-extract',
 				transform(code, id) {
@@ -455,9 +475,11 @@ async function get_bundle(
 
 	return {
 		bundle,
-		tailwind: options.tailwind
-			? (tailwind ?? (await init_tailwind())).build(tailwind_candidates)
-			: undefined,
+		css: options.tailwind
+			? (tailwind ?? (await init_tailwind(user_css))).build(tailwind_candidates)
+			: user_css
+				? user_css
+				: null,
 		imports: Array.from(imports),
 		error: null,
 		warnings,
@@ -585,7 +607,7 @@ async function bundle(
 			error: null,
 			client: client_result,
 			server: server_result,
-			tailwind: client.tailwind,
+			css: client.css,
 			imports: client.imports
 		};
 	} catch (err) {
@@ -598,7 +620,7 @@ async function bundle(
 			error: { ...e, message: e.message }, // not all Svelte versions return an enumerable message property
 			client: null,
 			server: null,
-			tailwind: null,
+			css: null,
 			imports: null
 		};
 	}