jxnblk avatar
jxnblk
tuna
Script
🐟 Simple CSS library for Val Town import { 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", }, }); // 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> ); // get raw CSS string styles.css Nested selectors and pseudoselectors const styles = css({ button: { background-color: "tomato", "&:hover": { background-color: "magenta", }, "& > svg": { fill: "currentColor", }, }, }); Media queries const 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
3
1
Next
Updated: May 8, 2024