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 valconst styles = css({
button: {
background-color: "tomato",
"&:hover": {
background-color: "magenta",
},
"& > svg": {
fill: "currentColor",
},
},
});
Create valconst styles = css({
box: {
padding: 16,
"@media screen and (min-width: 768px)": {
padding: 32,
"&:hover": {
color: "tomato",
},
},
}
});
- Does not support HTML element selectors (other than
body)
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,
👆 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.