diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte index ddb224bf8..53685b8f6 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 cfed938d4..aca4e99af 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 1daa62484..766681fe6 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,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(); + 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 }; }