v1.0 · Open source · MIT licensed

traceless-style — zero runtime, atomic CSS, no trace

Build-time atomic CSS for React, Next.js, Vite, Remix and every other modern framework — with strict-by-default WCAG 2.1 contrast validation. No Tailwind, no Babel plugin, no runtime.

Get started Read the docs

$npm install traceless-style

Drops into every modern framework

Next.jsViteRemixAstroSvelteKitQwikSolidWebpackRollupesbuildNext.jsViteRemixAstroSvelteKitQwikSolidWebpackRollupesbuild

How it works

Write objects. Ship classes.

Every tl.create call is statically transformed at build time. Your component file ships with a plain class-string object literal — and the atomic CSS lands in one stylesheet.

components/Card.tsx

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" },
  },
});

<div className={$.card}>...</div>;

public/traceless-style.css

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

/* and in your bundle —
   $.card → "tlm92pvu tla7dffa tlb1c4lk
             tlc883bz tld5e2f1" */

0 KB

Runtime CSS-in-JS

~30 KB

Plateau bundle

10+

Frameworks

245

Library tests

Strict by default

The build fails before the page ships.

Every tl.create 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). The failing rule shows you what was tried, what passed, and a hue-preserving suggestion you can accept with a single keystroke.

✓APCA Lc readout in every diagnostic for a perception-weighted second opinion.
✓Interactive --fix-contrast prompt suggests AAA replacements via OKLCH search.
✓Stable TLS#### identifiers on every error so you can grep, link, and document them.

traceless-style build

$ traceless-style build
  scanning project…

✘ TLS0301  app/Button.tsx:24:7
  WCAG 2.1 §1.4.3 — AA 4.5:1 not met.

  fg #94a3b8  bg #ffffff
  ratio  2.85 : 1   APCA -58

  → suggested  #475569
    ratio  7.55 : 1   APCA -91   AAA ✓

  Run with --fix-contrast to apply.

Built into the box

Everything you'd expect, none of the boilerplate.

Every feature below ships in the default install. No optional plugins. No "premium" tier. One package, one install command.

Zero runtime, by construction

Every tl.create call is statically transformed at build time into a class-string literal. Your bundle ships compiled atomic CSS — no styled-components wrapper, no Babel plugin, no CSS-in-JS engine on the page.

WCAG 2.1 + 2.2 contrast on every build

Strict-by-default validator runs the AA 4.5:1 / AAA 7:1 / UI 3:1 / focus 3:1 checks before your CSS is written to disk. APCA Lc readout in every diagnostic. Interactive --fix-contrast prompt.

Auto dark mode

Every color you write gets a derived dark variant. Pair-aware so contrast survives the inversion. Override per-block via _dark when you want.

Auto RTL

Physical properties rewrite to logical equivalents at build time. One stylesheet works for every script direction.

Strict by default

Lint blocks inline styles, string classNames, CSS modules, and Tailwind utilities. Property allowlist + injection guards.

Atomic, deduped

Same property:value across 1,000 components compiles to one class. Bundles plateau around 30 KB at FB scale.

Design tokens

tl.defineTokens emits :root vars. tl.createTheme overrides them. Cross-file token member access works with full type safety.

IDE-grade tooling

VS Code: autocomplete, color swatches, hover docs, diagnostics. DevTools: inspect every class on the live page.

01 —

Performance is correctness

A styling system that ships KB of runtime is broken. We compile to class strings; the runtime helper is ~2 KB and exists only for SSR and non-bundled tests.

02 —

Accessibility is non-optional

Section 508 and EN 301 549 require WCAG 2.1 AA. The contrast validator runs on every build. Strict by default; opt out per-rule if you must.

03 —

Zero config, zero magic

`traceless-style init` detects your framework and wires everything. No bundler plugin to install. No babel.config additions. No incantations.

Ready when you are

Ship safer styles in five minutes.

One install command, one config-free init, and the library scales from a first-day prototype to a Facebook-sized monorepo.

Install Browse diagnostics