tuna (WIP)

NOTE: this was ported over from another val and may not be fully working

🐟 Simple CSS library for Val Town

Create val
import { css } from "https://esm.town/v/jxnblk/tuna/main.tsx";

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 val
const styles = css({
  button: {
    background-color: "tomato",
    "&:hover": {
      background-color: "magenta",
    },
    "& > svg": {
      fill: "currentColor",
    },
  },
});

Media queries

Create val
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