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 { describe, it } from "https://esm.town/v/jxnblk/test";
import { assert, assertEquals, assertMatch } from "jsr:@std/assert@1";
import { css } from "https://esm.town/v/jxnblk/tuna";
const matches = (a, b) => assertMatch(a, new RegExp(b));
export default describe("tuna tests", () => {
const bodyStyles = css({
body: {
color: "red",
fontFamily: "sans-serif",
},
});
it("generates css", () => {
assertEquals(bodyStyles.css, "body{color:red;font-family:sans-serif}");
});
it("generates a style tag", () => {
assertEquals(bodyStyles.tag.dangerouslySetInnerHTML.__html, bodyStyles.css);
});
// for debugging only
// it("fails", () => {
// assertEquals(1, 2);
// // throw new Error("Seeing if this throws");
// });
const styles = css({
button: {
color: "blue",
padding: "8px",
},
box: {
color: "blue",
padding: "32px",
},
});
it("creates atomic classnames", () => {
matches(styles.css, "x0");
matches(styles.css, "x1");
matches(styles.css, "x2");
});
it("creates atomic declarations", () => {
matches(styles.css, ".x0{color:blue}");
matches(styles.css, ".x1{padding:8px}");
matches(styles.css, ".x2{padding:32px}");
});
it("returns classnames for application", () => {
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
});
it("handles pseudoselectors", () => {
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",
},
},
});
it("handles child selectors", () => {
matches(children.css, ".x6{font-size:32px}");
matches(children.css, ".x7 > span{font-size:16px}");
});
const attrs = css({
input: {
"&[type=checkbox]": {
backgroundColor: "tomato",
},
},
});
it("handles attr selectors", () => {
assertEquals(attrs.css, ".x8[type=checkbox]{background-color:tomato}");