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
TODO
- Fallback for missing mode keys
Test color contrast values with a URL that unfurls to share with others
Usage
Add hex color values to the end of the URL. Don't include the #
symbol. You can use 3 or 6 digit codes.
https://jxnblk-color_contrast.web.val.run/f8f/313
Share the link on social media or in chat to see a preview of the colors along with the level of contrast
🐟 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>
);
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
)
SVG favicon service, with support for custom text/letters and colors
<img src="https://jxnblk-svg_favicon.web.val.run?text=Hi&color=000&bg=f0f" />
React SSR and client-side hydration for Val Town
Usage
Create val/** @jsxImportSource https://esm.sh/react */
import resrv, { React } from "https://esm.town/v/jxnblk/resrv";
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<h1>Resrv</h1>
<p>React SSR with client-side hydration in Val Town</p>
<pre>{count}</pre>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}
export default resrv(App, import.meta.url);
React requires matching versions for SSR and hydration.
Import React
from https://esm.town/v/jxnblk/resrv
to ensure your component uses the same version as this library (currently react@18.3.1).
HTML Root Hydration
To render a component that includes a <head>
and <body>
tag, pass root: true
to the third options
argument:
Create valfunction App ({ script }) {
return (
<body>
<h1>Hello</h1>
{script}
</body>
);
}
export default resrv(App, import.meta.url, { root: true });
Inspired by https://www.val.town/v/stevekrouse/react_http