traceless-style DevTools

Inspect traceless-style atomic CSS classes, design tokens, dark mode, and RTL state on any page.

A DevTools panel for traceless-style — the zero-runtime atomic CSS library. Inspect any traceless-style class on the live page in real time: • Inspector — pick any element and see every tl* class on it, the (property, value, selector) triplet each class encodes, the cascade order showing which classes are currently contributing styles vs. overridden, and inline conflict warnings when two classes set the same property. • Classes — searchable browser of every tl* class on the page with use-counts. Filter by `prop:value` syntax to find every element using a specific property and value. • Tokens — every --tl-* CSS custom property surfaced from your tl.defineTokens calls, light and dark variants side-by-side, live-editable so you can iterate on token values without recompiling. • Theme — toggle dark mode and RTL direction live, preview different tlTheme* class overrides without touching code. • Animations — list every @keyframes registered via tl.keyframes, with a one-click preview button per animation. • Stats — rule count, used-class count, CSS bundle size, token / theme / animation counts. Pure read-only — the extension never executes user code, never makes network calls, never collects telemetry. All data stays inside DevTools. Works on any page using traceless-style v1.0.0 or later. Open DevTools (F12) on a page using the library, switch to the "traceless-style" tab. Source code: https://github.com/sparkgoldentech/traceless-style/tree/main/devtools