Readme

🐟 Simple CSS library for Val Town

Create valimport { css } from "https://esm.town/v/jxnblk/tuna"; const styles = css({ body: { // special keyword for <body> element fontFamily: "system-ui, sans-serif", margin: 0, backgroundColor: "#f5f5f5", }, container: { padding: 32, // numbers are converted to pixel units margin: "0 auto", maxWidth: 1024, }, input: { fontFamily: "inherit", fontSize: "inherit", lineHeight: "1.5", padding: "2px 8px", border: "1px solid #ccc", borderRadius: "4px", }, });
Create val// JSX example const html = render( <div className={styles.container}> <style {...styles.tag} /> <h1>Tuna Example</h1> <input type="text" defaultValue="hi" className={styles.input} /> </div> );
Create val// get raw CSS string styles.css

Nested selectors and pseudoselectors

Create valconst styles = css({ button: { background-color: "tomato", "&:hover": { background-color: "magenta", }, "& > svg": { fill: "currentColor", }, }, });

Media queries

Create valconst styles = css({ box: { padding: 16, "@media screen and (min-width: 768px)": { padding: 32, "&:hover": { color: "tomato", }, }, } });

Limitations

  • Does not support HTML element selectors (other than body)

Tests: https://www.val.town/v/jxnblk/tuna_tests

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,
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.