traceless-style DevTools Spark Golden Tech توسط

A DevTools panel for traceless-style — the zero-runtime atomic CSS library for React, Next.js, Vite, Remix, Astro,
SvelteKit, Qwik, and Solid.

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.
• Tokens — every --tl-* CSS custom property surfaced from your tl.defineTokens calls, light and dark variants
  side-by-side, live-editable.
• Theme — toggle dark mode and RTL direction live, preview different tlTheme* 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