1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { assert, assertEquals, assertMatch } from "https://deno.land/std@0.224.0/assert/mod.ts";
import { css } from "https://esm.town/v/jxnblk/tuna";
const matches = (a, b) => assertMatch(a, new RegExp(b));
const bodyStyles = css({
body: {
color: "red",
fontFamily: "sans-serif",
},
});
assertEquals(bodyStyles.css, "body{color:red;font-family:sans-serif}");
assertEquals(bodyStyles.tag.dangerouslySetInnerHTML.__html, bodyStyles.css);
const styles = css({
button: {
color: "blue",
padding: "8px",
},
box: {
color: "blue",
padding: "32px",
},
});
matches(styles.css, "x0");
matches(styles.css, "x1");
matches(styles.css, "x2");
matches(styles.css, ".x0{color:blue}");
matches(styles.css, ".x1{padding:8px}");
matches(styles.css, ".x2{padding:32px}");
assertEquals(styles.button, "x0 x1");
assertEquals(styles.box, "x0 x2");
// pseudoselectors
const pseudos = css({
box: {
backgroundColor: "tomato",
"&:hover": {
backgroundColor: "blue",
color: "black",
},
},
// "box:hover": { }, // not supported
});
matches(pseudos.css, ".x3{background-color:tomato}");
matches(pseudos.css, ".x4:hover{background-color:blue}");
matches(pseudos.css, ".x5:hover{color:black}");
// child selectors
const children = css({
title: {
fontSize: "32px",
"& > span": {
fontSize: "16px",
},
},
});
matches(children.css, ".x6{font-size:32px}");
matches(children.css, ".x7 > span{font-size:16px}");
const attrs = css({
input: {
"&[type=checkbox]": {
backgroundColor: "tomato",
},
},
});
assertEquals(attrs.css, ".x8[type=checkbox]{background-color:tomato}");
const numbers = css({
box: {
fontSize: 12,
padding: 7,
},
});
matches(numbers.css, ".x9{font-size:12px}");
matches(numbers.css, ".xa{padding:7px}");
const media = css({
/* possible api??
"@media screen and (min-w-width: 768px)": {
box: {
fontSize: 13,
padding: 11,
},
},
*/
box: {
"@media screen and (min-width: 768px)": {
fontSize: 13,
padding: 11,
"&:hover": {
color: "red",
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.