traceless-style Atomic CSS That Leaves No Trace

If you’re still shipping a CSS-in-JS runtime just to color a button, it’s worth asking why.

traceless-style compiles every style at build time — zero runtime, zero CSS-in-JS engine on the page. What you ship is clean, deduped atomic CSS.

A quick look

import { tl } from "traceless-style";

const $ = tl.create({
  card: {
    padding: "1.5rem",
    background: "#ffffff",
    color: "#0f172a",
    borderRadius: "12px",

    _hover: { transform: "translateY(-2px)" },
    _dark: { background: "#13131a" },
  },
});

...
;

This compiles down to plain atomic classes:

.tlm92pvu { padding: 1.5rem }
.tla7dffa { background: #ffffff }
.tlb1c4lk { color: #0f172a }
.tlc883bz { border-radius: 12px }
.tld5e2f1:hover { transform: translateY(-2px) }
.dark .tla7dffa { background: #13131a }

No styled-components wrapper. No Babel plugin. No CSS-in-JS engine running in the browser.

What makes it different

Zero runtime, by construction

Every tl.create call is statically transformed at build time into a class-string literal. The only runtime helper left is ~2 KB, and it exists solely for SSR and non-bundled tests.

WCAG built into the build

This is the part that stands out. Every style block is checked against WCAG 2.1 §1.4.3 (AA 4.5:1), §1.4.6 (AAA 7:1), §1.4.11 (UI 3:1), and §2.4.13 (focus 3:1) — before your CSS is written to disk.