CSS Custom Properties Auditor
Paste CSS and find every --token, its usage count, duplicates, and unused or undefined variables
@media condition). Good for spotting duplicate tokens and dead CSS variables quickly, not a substitute for a real CSS parser when that distinction matters.About this tool
The ToolNinja CSS Custom Properties Auditor parses pasted CSS for every --custom-property declaration and var(--name) usage, then cross-references them: which tokens are declared but never actually used anywhere, which are used via var() but never declared at all (a silent bug — an undefined custom property falls back to its initial value or inherits, not an error), and which names get declared more than once with genuinely different values across the stylesheet. This is the kind of drift that accumulates naturally in any CSS codebase using design tokens — a color variable renamed in one place but not another, a spacing token added during a refactor and never cleaned up after the old approach was removed, a typo in a var(--nmae) call that silently falls through to nothing instead of erroring loudly the way a JavaScript typo would. Everything runs 100% in your browser via pattern matching — your CSS never leaves your machine.
When to use it
- →Auditing a design system's CSS for custom properties that are declared but no longer referenced anywhere
- →Catching a typo'd var(--name) call that silently fails instead of throwing a visible error
- →Finding where the same token name got redefined with conflicting values across a large stylesheet
- →Getting a quick inventory of every design token a CSS file actually defines, with where each one lives
Tips
- ◆A var(--name) used but never declared doesn't throw a CSS error — it just silently falls back to the property's initial value (or a fallback you provided as a second argument to var()), which makes this exact category of bug easy to miss without a tool actively checking for it.
- ◆Selector detection shows the innermost rule only, not the full nesting context — a duplicate declared inside a media query will show the rule's own selector, not the surrounding @media condition, so treat it as a pointer to go looking, not a complete picture.
- ◆A variable flagged as a duplicate isn't necessarily a bug — intentionally overriding a token's value inside a more specific selector (e.g. a dark-mode class) is a completely standard CSS custom property pattern. Review each flagged name with that context in mind.
Frequently asked questions
Why doesn't a typo in var(--primry-color) throw an error like a JavaScript typo would?
CSS is designed to degrade gracefully rather than halt on an error — an undefined custom property reference is treated as if the property were never set at all, falling back to the declaration's initial value or inheriting from a parent, with no console warning or visual indicator that anything went wrong. That silent-failure behavior is exactly why a dedicated check like this one is useful — the browser genuinely won't tell you.
Is a 'declared but unused' variable always safe to delete?
Usually, but double-check first — this tool only detects var(--name) usage within the CSS you pasted. If the variable is referenced from JavaScript (via getComputedStyle or style.setProperty), from an inline style attribute elsewhere in your codebase, or from a separate stylesheet you didn't paste in, it won't show up as 'used' here even though it's genuinely load-bearing.
Why would the same custom property be declared with different values on purpose?
This is a standard, intentional CSS pattern — redeclaring --color-primary inside a .dark-mode class or a more specific component selector overrides the value only within that scope, letting the same token name adapt contextually (theme switching, component-level overrides) without renaming it. The duplicates list is meant to prompt a review, not flag every match as automatically wrong.