diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts index 2907bbe4f5..53e59cfd97 100644 --- a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts +++ b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts @@ -45,7 +45,7 @@ export async function create(): Promise { .filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file') .map((f) => ({ ...f, name: f.name.slice(9) })), { - runes: true + // TODO support Tailwind here? } ); } diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts index 17e1e2f65b..e8ec12d208 100644 --- a/packages/editor/src/lib/Workspace.svelte.ts +++ b/packages/editor/src/lib/Workspace.svelte.ts @@ -113,6 +113,7 @@ export class Workspace { #files = $state.raw([]); #current = $state.raw() as File; #vim = $state(false); + #tailwind = $state(false); #handlers = { hover: new Set<(pos: number | null) => void>(), @@ -464,6 +465,15 @@ export class Workspace { } } + get tailwind() { + return this.#tailwind; + } + + set tailwind(value) { + this.#tailwind = value; + this.#onreset(this.#files); + } + get vim() { return this.#vim; } diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts index c00ed75e9f..d5fd227096 100644 --- a/packages/editor/src/lib/compile-worker/worker.ts +++ b/packages/editor/src/lib/compile-worker/worker.ts @@ -59,7 +59,6 @@ async function init(v: string) { can_use_experimental_async = true; } catch (e) { - console.error(e); // do nothing } diff --git a/packages/repl/package.json b/packages/repl/package.json index 5ab688c8e7..500b9c3758 100644 --- a/packages/repl/package.json +++ b/packages/repl/package.json @@ -86,6 +86,7 @@ "marked": "^14.1.2", "resolve.exports": "^2.0.2", "svelte": "5.23.0", + "tailwindcss": "^4.0.15", "tarparser": "^0.0.4", "zimmerframe": "^1.1.2" } diff --git a/packages/repl/src/lib/Bundler.ts b/packages/repl/src/lib/Bundler.ts index 49caae67c7..0a0ca2d25d 100644 --- a/packages/repl/src/lib/Bundler.ts +++ b/packages/repl/src/lib/Bundler.ts @@ -58,7 +58,7 @@ export default class Bundler { }); } - bundle(files: File[], options: CompileOptions = {}): Promise { + bundle(files: File[], options: { tailwind?: boolean }): Promise { return new Promise((fulfil) => { this.handlers.set(uid, fulfil); this.worker.postMessage({ diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte index 783600563f..b7fb95b3fa 100644 --- a/packages/repl/src/lib/Input/ComponentSelector.svelte +++ b/packages/repl/src/lib/Input/ComponentSelector.svelte @@ -170,6 +170,11 @@ + + {#if download} diff --git a/packages/repl/src/lib/Output/ReplProxy.ts b/packages/repl/src/lib/Output/ReplProxy.ts index 19c7700171..a42f28cd73 100644 --- a/packages/repl/src/lib/Output/ReplProxy.ts +++ b/packages/repl/src/lib/Output/ReplProxy.ts @@ -85,8 +85,8 @@ export default class ReplProxy { } } - eval(script: string) { - return this.iframe_command('eval', { script }); + eval(script: string, style?: string) { + return this.iframe_command('eval', { script, style }); } handle_links() { diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte index 3931e79a1f..9ab087e4a3 100644 --- a/packages/repl/src/lib/Output/Viewer.svelte +++ b/packages/repl/src/lib/Output/Viewer.svelte @@ -8,6 +8,7 @@ import Console, { type Log } from './console/Console.svelte'; import getLocationFromStack from './get-location-from-stack'; import srcdoc from './srcdoc/index.html?raw'; + import srcdoc_styles from './srcdoc/styles.css?raw'; import ErrorOverlay from './ErrorOverlay.svelte'; import type { CompileError } from 'svelte/compiler'; import type { Bundle } from '../types'; @@ -107,7 +108,8 @@ clear_logs(); if (!$bundle.error) { - await proxy?.eval(` + await proxy?.eval( + ` ${injectedJS} if (!window.__setup_focus_handling) { @@ -183,7 +185,9 @@ } } //# sourceURL=playground:output - `); + `, + $bundle?.tailwind ?? srcdoc_styles + ); error = null; } } catch (e) { diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte index cc9471eb29..4c27f3ecec 100644 --- a/packages/repl/src/lib/Output/console/Console.svelte +++ b/packages/repl/src/lib/Output/console/Console.svelte @@ -1,4 +1,4 @@ -