CSS Variables Parser
Analyze CSS custom properties, inspect variable values, count references, and identify unused definitions.
Run tool
CSS custom properties help structure style rules across modern web projects, but tracking where each token is defined and used can become difficult as stylesheets grow. This online analyzer processes your raw style rules to find custom property definitions and their matching references across selectors. When you enter CSS into the input field, the utility detects property declarations starting with two hyphens, captures their assigned values, and inspects your rules for variable call patterns such as standard var expressions. It tabulates every detected custom property alongside the number of times it appears in property values. In addition to calculating total declarations and reference counts for each token, the tool highlights unreferenced definitions that might represent leftover or obsolete styles. If the stylesheet lacks custom properties or contains unsupported formatting, the result area will display an alert rather than broken output. You can use this breakdown to audit design systems, clean up unused theme tokens, and verify consistent variable naming before deployment.
Instructions
- Paste your CSS rules into the CSS text area.
- Click the analyze button to process custom-property declarations and references.
- Review the summary to check total declarations, reference counts, and unreferenced properties.
Examples
- Paste ":root { --primary-color: #0070f3; --font-base: 16px; } body { color: var(--primary-color); }" to see both properties listed, with one reference noted for the color token and zero for the font size.
- Paste ":root { --gap: 1rem; --radius: 4px; } .card { padding: var(--gap); border-radius: var(--radius); }" to verify that both declared properties are referenced once.
FAQ
How does the tool recognize custom properties?
The parser looks for property names that begin with two hyphens followed by standard identifier characters, a colon, and a value terminated by a semicolon.
How are variable references tracked?
The tool scans the stylesheet for occurrences matching standard var expressions and increments the count for each corresponding variable name.
What happens if a declared variable is never referenced?
The tool lists it under unreferenced declarations so you can easily identify unused theme tokens or leftover styling rules.
Does the parser validate CSS syntax or compute fallback values?
No. The analyzer extracts custom properties and counts matching reference names based on pattern matching without evaluating fallback values or checking full CSS syntax rules.