From 5a9ba6702138e7e948587e5d7f69309e982abd1b Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Sun, 15 Jun 2025 22:24:36 +0200 Subject: [PATCH 1/3] feat: support CSS imports Add support for things like `import './app.css'`, which can also influence tailwind's output --- packages/repl/src/lib/Output/Viewer.svelte | 2 +- packages/repl/src/lib/public.d.ts | 2 +- .../repl/src/lib/workers/bundler/index.ts | 33 +++++++++++++++---- 3 files changed, 28 insertions(+), 9 deletions(-) diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte index ddb224bf81..53685b8f6f 100644 --- a/packages/repl/src/lib/Output/Viewer.svelte +++ b/packages/repl/src/lib/Output/Viewer.svelte @@ -208,7 +208,7 @@ } //# sourceURL=playground:output `, - bundle?.tailwind ?? srcdoc_styles + bundle?.css ?? srcdoc_styles ); error = null; } diff --git a/packages/repl/src/lib/public.d.ts b/packages/repl/src/lib/public.d.ts index cfed938d44..aca4e99aff 100644 --- a/packages/repl/src/lib/public.d.ts +++ b/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[]; } diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts index 1daa624841..5d39286270 100644 --- a/packages/repl/src/lib/workers/bundler/index.ts +++ b/packages/repl/src/lib/workers/bundler/index.ts @@ -103,7 +103,7 @@ let previous: { let tailwind: Awaited>; -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,10 @@ 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);`, + // We don't handle imports in the user CSS right now, so we remove them + // to avoid errors in the Tailwind compiler + user_css.replace(/@import\s+["'][^"']+["'][^;]*;/g, '') ].join('\n'); return await tailwindcss.compile(tailwind_base, { @@ -413,6 +416,8 @@ async function get_bundle( const key = JSON.stringify(options); + let user_css = ''; + bundle = await rollup({ input: './__entry.js', cache: previous?.key === key && previous.cache, @@ -429,6 +434,18 @@ async function get_bundle( replace({ 'process.env.NODE_ENV': JSON.stringify('production') }), + { + name: 'css', + transform(code, id) { + if (id.endsWith('.css')) { + user_css += '\n' + code; + return { + code: '', + map: null + }; + } + } + }, options.tailwind && { name: 'tailwind-extract', transform(code, id) { @@ -455,9 +472,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 +604,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 +617,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 }; } From 0e49fdebbc2631091572807b09b950332e18cddb Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Sun, 15 Jun 2025 23:28:54 +0200 Subject: [PATCH 2/3] deduplicate --- packages/repl/src/lib/workers/bundler/index.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts index 5d39286270..8f4d5e5fc4 100644 --- a/packages/repl/src/lib/workers/bundler/index.ts +++ b/packages/repl/src/lib/workers/bundler/index.ts @@ -415,7 +415,7 @@ async function get_bundle( }; const key = JSON.stringify(options); - + const handled_css_ids = new Set(); let user_css = ''; bundle = await rollup({ @@ -438,7 +438,10 @@ async function get_bundle( name: 'css', transform(code, id) { if (id.endsWith('.css')) { - user_css += '\n' + code; + if (!handled_css_ids.has(id)) { + handled_css_ids.add(id); + user_css += '\n' + code; + } return { code: '', map: null From 36141a9a03b9bf7c9788fcaee78fd0d563fb30a7 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Sun, 15 Jun 2025 23:32:30 +0200 Subject: [PATCH 3/3] move --- packages/repl/src/lib/workers/bundler/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts index 8f4d5e5fc4..766681fe65 100644 --- a/packages/repl/src/lib/workers/bundler/index.ts +++ b/packages/repl/src/lib/workers/bundler/index.ts @@ -121,9 +121,7 @@ async function init_tailwind(user_css = '') { `@import "tailwindcss/theme.css" layer(theme);`, `@import "tailwindcss/preflight.css" layer(base);`, `@import "tailwindcss/utilities.css" layer(utilities);`, - // We don't handle imports in the user CSS right now, so we remove them - // to avoid errors in the Tailwind compiler - user_css.replace(/@import\s+["'][^"']+["'][^;]*;/g, '') + user_css ].join('\n'); return await tailwindcss.compile(tailwind_base, { @@ -440,7 +438,9 @@ async function get_bundle( if (id.endsWith('.css')) { if (!handled_css_ids.has(id)) { handled_css_ids.add(id); - user_css += '\n' + code; + // 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: '',