Skip to content

Commit 0a244f0

Browse files
Rich-HarrisRich-Harris
authored
Tailwind (#1218)
* fix * remove logging * WIP * more * remove unused caching stuff * try this * types
1 parent 897ce99 commit 0a244f0

File tree

16 files changed

+220
-108
lines changed

16 files changed

+220
-108
lines changed

‎apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export async function create(): Promise<Adapter> {
4545
.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
4646
.map((f) => ({ ...f, name: f.name.slice(9) })),
4747
{
48-
runes: true
48+
// TODO support Tailwind here?
4949
}
5050
);
5151
}

‎packages/editor/src/lib/Workspace.svelte.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export class Workspace {
113113
#files = $state.raw<Item[]>([]);
114114
#current = $state.raw() as File;
115115
#vim = $state(false);
116+
#tailwind = $state(false);
116117

117118
#handlers = {
118119
hover: new Set<(pos: number | null) => void>(),
@@ -464,6 +465,15 @@ export class Workspace {
464465
}
465466
}
466467

468+
get tailwind() {
469+
return this.#tailwind;
470+
}
471+
472+
set tailwind(value) {
473+
this.#tailwind = value;
474+
this.#onreset(this.#files);
475+
}
476+
467477
get vim() {
468478
return this.#vim;
469479
}

‎packages/editor/src/lib/compile-worker/worker.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ async function init(v: string) {
5959

6060
can_use_experimental_async = true;
6161
} catch (e) {
62-
console.error(e);
6362
// do nothing
6463
}
6564

‎packages/repl/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
"marked": "^14.1.2",
8787
"resolve.exports": "^2.0.2",
8888
"svelte": "5.23.0",
89+
"tailwindcss": "^4.0.15",
8990
"tarparser": "^0.0.4",
9091
"zimmerframe": "^1.1.2"
9192
}

‎packages/repl/src/lib/Bundler.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default class Bundler {
5858
});
5959
}
6060

61-
bundle(files: File[], options: CompileOptions = {}): Promise<BundleResult> {
61+
bundle(files: File[], options: { tailwind?: boolean }): Promise<BundleResult> {
6262
return new Promise<any>((fulfil) => {
6363
this.handlers.set(uid, fulfil);
6464
this.worker.postMessage({

‎packages/repl/src/lib/Input/ComponentSelector.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,11 @@
170170
<Checkbox bind:checked={workspace.vim}></Checkbox>
171171
</label>
172172

173+
<label class="option">
174+
<span>Toggle Tailwind</span>
175+
<Checkbox bind:checked={workspace.tailwind}></Checkbox>
176+
</label>
177+
173178
<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
174179

175180
{#if download}

‎packages/repl/src/lib/Output/ReplProxy.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ export default class ReplProxy {
8585
}
8686
}
8787

88-
eval(script: string) {
89-
return this.iframe_command('eval', { script });
88+
eval(script: string, style?: string) {
89+
return this.iframe_command('eval', { script, style });
9090
}
9191

9292
handle_links() {

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import Console, { type Log } from './console/Console.svelte';
99
import getLocationFromStack from './get-location-from-stack';
1010
import srcdoc from './srcdoc/index.html?raw';
11+
import srcdoc_styles from './srcdoc/styles.css?raw';
1112
import ErrorOverlay from './ErrorOverlay.svelte';
1213
import type { CompileError } from 'svelte/compiler';
1314
import type { Bundle } from '../types';
@@ -107,7 +108,8 @@
107108
clear_logs();
108109
109110
if (!$bundle.error) {
110-
await proxy?.eval(`
111+
await proxy?.eval(
112+
`
111113
${injectedJS}
112114
113115
if (!window.__setup_focus_handling) {
@@ -183,7 +185,9 @@
183185
}
184186
}
185187
//# sourceURL=playground:output
186-
`);
188+
`,
189+
$bundle?.tailwind ?? srcdoc_styles
190+
);
187191
error = null;
188192
}
189193
} catch (e) {

‎packages/repl/src/lib/Output/console/Console.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script module>
1+
<script module lang="ts">
22
export type Log = {
33
command: 'info' | 'warn' | 'error' | 'table' | 'group' | 'clear' | 'unclonable';
44
action?: 'console';

‎packages/repl/src/lib/Output/srcdoc/index.html

Lines changed: 8 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,13 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<style>
5-
body {
6-
--bg-1: hsl(0, 0%, 100%);
7-
--bg-2: hsl(206, 20%, 90%);
8-
--bg-3: hsl(206, 20%, 80%);
9-
--fg-1: hsl(0, 0%, 13%);
10-
--fg-2: hsl(0, 0%, 20%);
11-
--fg-2: hsl(0, 0%, 30%);
12-
--link: hsl(208, 77%, 47%);
13-
--link-hover: hsl(208, 77%, 55%);
14-
--link-active: hsl(208, 77%, 40%);
15-
--border-radius: 4px;
16-
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
17-
'Open Sans', 'Helvetica Neue', sans-serif;
18-
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
19-
'DejaVu Sans Mono', monospace;
20-
color-scheme: light;
21-
background: var(--bg-1);
22-
color: var(--fg-1);
23-
font-family: var(--font);
24-
line-height: 1.5;
25-
margin: 1rem;
26-
height: calc(100vh - 2rem);
27-
accent-color: var(--hover) !important;
28-
}
29-
30-
a {
31-
color: var(--link);
32-
}
33-
34-
a:hover {
35-
color: var(--link-hover);
36-
}
37-
38-
a:active {
39-
color: var(--link-active);
40-
}
41-
42-
code {
43-
background: var(--bg-2);
44-
font-family: var(--font-mono);
45-
font-size: 0.9em;
46-
padding: 0.15rem 0.3rem;
47-
border-radius: var(--border-radius);
48-
}
49-
50-
ul.todos {
51-
padding: 0;
52-
}
53-
54-
body.dark {
55-
color-scheme: dark;
56-
--bg-1: hsl(0, 0%, 18%);
57-
--bg-2: hsl(0, 0%, 30%);
58-
--bg-3: hsl(0, 0%, 40%);
59-
--fg-1: hsl(0, 0%, 90%);
60-
--fg-2: hsl(0, 0%, 70%);
61-
--fg-3: hsl(0, 0%, 60%);
62-
--link: hsl(206, 96%, 72%);
63-
--link-hover: hsl(206, 96%, 78%);
64-
--link-active: hsl(206, 96%, 64%);
65-
}
66-
</style>
4+
<style id="injected"></style>
675

686
<script>
697
(function () {
8+
const style = document.querySelector('style#injected');
9+
let styles = '';
10+
7011
function send(payload, origin = '*') {
7112
if (payload.command === 'info' && payload.args[0] instanceof Error) {
7213
const error = payload.args[0];
@@ -97,6 +38,10 @@
9738
}
9839

9940
if (action === 'eval') {
41+
if (data.args.style !== undefined && styles !== (styles = data.args.style)) {
42+
style.textContent = styles;
43+
}
44+
10045
(0, eval)(data.args.script);
10146
}
10247

‎packages/repl/src/lib/Output/srcdoc/styles.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
--bg-1: hsl(0, 0%, 100%);
3+
--bg-2: hsl(206, 20%, 90%);
4+
--bg-3: hsl(206, 20%, 80%);
5+
--fg-1: hsl(0, 0%, 13%);
6+
--fg-2: hsl(0, 0%, 20%);
7+
--fg-2: hsl(0, 0%, 30%);
8+
--link: hsl(208, 77%, 47%);
9+
--link-hover: hsl(208, 77%, 55%);
10+
--link-active: hsl(208, 77%, 40%);
11+
--border-radius: 4px;
12+
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
13+
'Open Sans', 'Helvetica Neue', sans-serif;
14+
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
15+
monospace;
16+
color-scheme: light;
17+
background: var(--bg-1);
18+
color: var(--fg-1);
19+
font-family: var(--font);
20+
line-height: 1.5;
21+
margin: 1rem;
22+
height: calc(100vh - 2rem);
23+
accent-color: var(--hover) !important;
24+
}
25+
26+
a {
27+
color: var(--link);
28+
}
29+
30+
a:hover {
31+
color: var(--link-hover);
32+
}
33+
34+
a:active {
35+
color: var(--link-active);
36+
}
37+
38+
code {
39+
background: var(--bg-2);
40+
font-family: var(--font-mono);
41+
font-size: 0.9em;
42+
padding: 0.15rem 0.3rem;
43+
border-radius: var(--border-radius);
44+
}
45+
46+
ul.todos {
47+
padding: 0;
48+
}
49+
50+
body.dark {
51+
color-scheme: dark;
52+
--bg-1: hsl(0, 0%, 18%);
53+
--bg-2: hsl(0, 0%, 30%);
54+
--bg-3: hsl(0, 0%, 40%);
55+
--fg-1: hsl(0, 0%, 90%);
56+
--fg-2: hsl(0, 0%, 70%);
57+
--fg-3: hsl(0, 0%, 60%);
58+
--link: hsl(206, 96%, 72%);
59+
--link-hover: hsl(206, 96%, 78%);
60+
--link-active: hsl(206, 96%, 64%);
61+
}

‎packages/repl/src/lib/Repl.svelte

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,9 @@
9595
9696
async function rebundle() {
9797
const token = (current_token = Symbol());
98-
const result = await bundler!.bundle(workspace.files as File[]);
98+
const result = await bundler!.bundle(workspace.files as File[], {
99+
tailwind: workspace.tailwind
100+
});
99101
if (token === current_token) $bundle = result as Bundle;
100102
}
101103

‎packages/repl/src/lib/types.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export type Bundle = {
2626
client: OutputChunk | null;
2727
error: (RollupError & CompileError) | null;
2828
server: OutputChunk | null;
29+
tailwind?: string;
2930
imports: string[];
3031
warnings: Warning[];
3132
};

0 commit comments

Comments
 (0)