Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
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 { kebabCase } from "https://esm.sh/change-case@5.4.4";
const reserved = ["css", "tag"];
const cache = new Map();
const px = n => typeof n === "number" ? `${n}px` : n;
const createDeclaration = (key, val) => `${kebabCase(key, {})}:${px(val)}`;
const NESTED_RE = /&/;
const MEDIA_RE = /^@media/;
function createRule(obj, parentKey) {
const rules = [];
const classNames = [];
for (const [key, val] of Object.entries(obj)) {
const nested = NESTED_RE.test(key);
const media = MEDIA_RE.test(key);
// consider: typeof val === "object";
if (nested) {
// e.g. `&:hover`
const { _rules, _classNames } = createNestedRule(key, val);
rules.push(..._rules);
classNames.push(..._classNames);
continue;
}
if (media) {
const { _rules, _classNames } = createMediaRule(key, val);
rules.push(..._rules);
classNames.push(..._classNames);
continue;
}
const dec = createDeclaration(key, val);
if (cache.has(dec)) {
const cn = cache.get(dec);
classNames.push(cn);
} else {
const cn = "x" + cache.size.toString(36);
const rule = `.${cn}{${dec}}`;
rules.push(rule);
classNames.push(cn);
cache.set(dec, cn);
}
}
const css = rules.join("");
const className = classNames.join(" ");
return {
css,
className,
};
}
// e.g. box { "&:hover": { color: "red" } }
// "&:hover", { color: "red" }
function createNestedRule(selector, obj) {
const _rules = [];
const _classNames = [];
for (const [key, val] of Object.entries(obj)) {
if (typeof val === "object") {
throw new Error("Nested selectors are only supported one level deep");
}
const cn = "x" + cache.size.toString(36);
const className = selector.replace("&", cn);
const rule = `.${className}{${createDeclaration(key, val)}}`;
_rules.push(rule);
_classNames.push(cn);
cache.set(rule, className); // only used to increment cache size
}
return {
_rules,
_classNames,
};
}
function createMediaRule(media, obj) {
const _rules = [];
const _classNames = [];
for (const [key, val] of Object.entries(obj)) {
const nested = NESTED_RE.test(key);
if (nested) {
const n = createNestedRule(key, val);
const rule = `${media}{${n._rules.join("")}}`;
_rules.push(rule);
_classNames.push(...n._classNames);
continue;
}
const cn = "x" + cache.size.toString(36);
const dec = createDeclaration(key, val);
const rule = `${media}{.${cn}{${dec}}}`;
_rules.push(rule);
_classNames.push(cn);
cache.set(rule, cn); // increment cache size
}
return {
_rules,
August 4, 2024