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.
Newv1.0.0 — first stable release
Atomic CSS that leaves no trace.
Build-time atomic CSS with zero runtime, strict-by-default WCAG validation, and auto dark mode — for every modern framework.
$npm install traceless-stylecomponents/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>;.tlm92pvu { padding: 1.5rem }
.tla7dffa { background: #ffffff }
.tlb1c4lk { color: #0f172a }
.tlc883bz { border-radius: 12px }
.tld5e2f1:hover { transform: translateY(-2px) }
.dark .tla7dffa { background: #13131a }Drops into every modern framework
Next.jsViteRemixAstroSvelteKitQwikSolidWebpackRollupesbuildNext.jsViteRemixAstroSvelteKitQwikSolidWebpackRollupesbuild
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-contrastprompt 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.
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.