Skip to content

Commit 1380f18

Browse files
devongovettdevongovett
committed
Add playground
1 parent 0325b92 commit 1380f18

File tree

5 files changed

+3963
-60
lines changed

5 files changed

+3963
-60
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@
22
node_modules/
33
target/
44
pkg/
5+
dist/
6+
.parcel-cache

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,17 @@
2727
"caniuse-lite": "^1.0.30001272",
2828
"cssnano": "^5.0.8",
2929
"esbuild": "^0.13.10",
30+
"parcel": "^2.0.1",
3031
"postcss": "^8.3.11"
3132
},
3233
"scripts": {
3334
"build": "napi build --platform",
3435
"build-release": "napi build --platform --release",
3536
"wasm:build": "wasm-pack build --target nodejs",
36-
"wasm:build-release": "wasm-pack build --target nodejs --release"
37+
"wasm:build-release": "wasm-pack build --target nodejs --release",
38+
"wasm-browser:build": "wasm-pack build --target web",
39+
"wasm-browser:build-release": "wasm-pack build --target web --release",
40+
"playground:start": "parcel playground/index.html",
41+
"playground:build": "yarn wasm-browser:build-release && parcel build playground/index.html"
3742
}
3843
}

‎playground/index.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Parcel CSS Playground</title>
5+
<style>
6+
html, body {
7+
margin: 0;
8+
height: 100%;
9+
box-sizing: border-box
10+
}
11+
12+
body {
13+
display: flex;
14+
flex-direction: column;
15+
gap: 5px;
16+
padding: 10px;
17+
}
18+
19+
.targets {
20+
display: table;
21+
margin-top: 10px;
22+
}
23+
24+
.targets label {
25+
display: table-row;
26+
}
27+
28+
.targets label span,
29+
.targets label input {
30+
display: table-cell;
31+
}
32+
33+
main {
34+
display: flex;
35+
flex: 1
36+
}
37+
38+
textarea {
39+
flex: 1;
40+
font: 14px monospace;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<h1>Parcel CSS Playground</h1>
46+
<main>
47+
<div>
48+
<label><input id="minify" type="checkbox" checked> Minify</label>
49+
<div class="targets">
50+
<label><span>Chrome: </span><input id="chrome" type="number" value="95"></label>
51+
<label><span>Firefox: </span><input id="firefox" type="number"></label>
52+
<label><span>Safari: </span><input id="safari" type="number"></label>
53+
<label><span>Opera: </span><input id="opera" type="number"></label>
54+
<label><span>Edge: </span><input id="edge" type="number"></label>
55+
<label><span>IE: </span><input id="ie" type="number"></label>
56+
<label><span>iOS: </span><input id="ios_saf" type="number"></label>
57+
<label><span>Android: </span><input id="android" type="number"></label>
58+
<label><span>Samsung: </span><input id="samsung" type="number"></label>
59+
60+
</div>
61+
</div>
62+
<textarea id="source">
63+
.foo {
64+
background: yellow;
65+
66+
-webkit-border-radius: 2px;
67+
-moz-border-radius: 2px;
68+
border-radius: 2px;
69+
70+
-webkit-transition: background 200ms;
71+
-moz-transition: background 200ms;
72+
transition: background 200ms;
73+
}</textarea>
74+
<textarea id="compiled"></textarea>
75+
</main>
76+
<script type="module" src="playground.js"></script>
77+
</body>
78+
</html>

‎playground/playground.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import init, {transform} from '../pkg';
2+
3+
let enc = new TextEncoder();
4+
let inputs = document.querySelectorAll('input[type=number]');
5+
6+
async function update() {
7+
await init();
8+
9+
let targets = {};
10+
for (let input of inputs) {
11+
if (input.value !== '') {
12+
targets[input.id] = input.valueAsNumber << 16;
13+
}
14+
}
15+
16+
let res = transform({
17+
filename: 'test.css',
18+
code: enc.encode(source.value),
19+
minify: minify.checked,
20+
targets
21+
});
22+
23+
compiled.value = res;
24+
}
25+
26+
update();
27+
source.oninput = update;
28+
for (let input of document.querySelectorAll('input')) {
29+
input.oninput = update;
30+
}

0 commit comments

Comments
 (0)