Readme
Simple CSS Vars library
Create valimport { caviar } from "https://esm.town/v/jxnblk/caviar";
const vars = caviar({
dark: {
text: "#000",
bg: "#fff",
},
light: {
text: "#fff",
bg: "#000",
},
});
Create val// JSX example
<div style={vars.style.light}>
<h1
style={{
color: vars.text,
backgroundColor: vars.bg,
}}>
Hello
</h1>
</div>
Can also be used for non-dynamic CSS vars
Create valimport { caviar } from "https://esm.town/v/jxnblk/caviar";
const vars = caviar({
blue: "#0cf",
});
// <div style={vars.style} />
Tests: https://www.val.town/v/jxnblk/caviar_tests
- Fallback for missing mode keys
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
export function caviar(obj: any) {
const result: any = {
style: {},
};
for (const [key, val] of Object.entries(obj)) {
if (key === "style") {
throw new Error(`Cannot use reserved key: '${key}'`);
}
if (typeof val === "object") {
createMode(result, key, val);
} else {
const varKey = `--${key}`;
const varVal = `var(${varKey})`;
result[key] = varVal;
result.style[varKey] = val;
}
}
return result;
}
function createMode(result: any, mode: string, obj: any) {
result.style[mode] = {};
for (const [key, val] of Object.entries(obj)) {
const varKey = `--${key}`;
const varVal = `var(${varKey})`;
result[key] = varVal;
result.style[mode][varKey] = val;
}
}
👆 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.