How to Parse CSS Variables and Find Unused Declarations

Paste nonempty CSS into the tool to list recognized custom properties, count recognized var() references, and identify declarations without a matching reference. Use the unreferenced list for review, then verify each candidate in the stylesheet before changing it.

What this CSS variables parser checks

Use this CSS Variables tool to inspect custom-property declarations in a block of CSS, see which recognized variables are referenced with var(), and spot declarations with no matching recognized reference. It is useful during cleanup, refactoring, and quick reviews of a stylesheet when you want a focused report on variable names and references rather than a full CSS validation pass.

The tool works from CSS text that you provide. Its report is based on recognizable custom-property declarations and var() references, so the result helps you review naming and usage patterns in the supplied text.

How to analyze CSS variables

1. Prepare the CSS you want to review. Include custom-property declarations such as --brand-color: #2563eb; and the rules that may reference them with syntax such as var(--brand-color).

2. Paste the CSS into the tool's text input. The input is optional at the control level, but processing requires a nonempty selected CSS value. If the tool receives both supported CSS inputs, a nonempty text-input value takes priority over the other value.

3. Start the analysis. The tool recognizes declarations whose names begin with two hyphens, contain word characters or hyphens, and have a colon, value, and semicolon. Recognized declaration values are trimmed before they are reported.

4. Review the declaration list and totals. Then check the per-name reference counts to see how often each recognized variable appears in a recognized var(--name) reference. References can include optional content inside the parentheses, and each recognized reference is counted by variable name.

5. Open the unreferenced-declaration part of the result. It compares recognized declaration names with recognized reference names and lists declarations that have no matching recognized reference. Use that list as a review queue, then confirm each item in the surrounding stylesheet before deleting or renaming anything.

6. If processing fails, check that the selected CSS input is not empty and that the text is available in the input control. A processing exception is returned as an unsuccessful result instead of being exposed as an uncaught error.

How to read the result

A successful result reports the recognized declarations, the total number of declarations, the total number of unreferenced declarations, and reference counts grouped by variable name. A declaration appears in the unreferenced list when its recognized name does not match a recognized reference name in the supplied text.

Treat the report as a targeted usage check, not as a verdict that a variable is safe to remove. A variable may be used through CSS patterns the tool does not recognize, and the analysis does not evaluate values, resolve fallback behavior, or establish every possible custom-property use. Check the stylesheet and its runtime behavior before making a change.

Worked example

You are reviewing a small theme stylesheet containing --brand-color: #2563eb;, a rule that uses var(--brand-color), and a second custom property that has no matching recognized reference.

Paste the CSS into the input, run the analysis, and compare the declaration list with the reference counts and unreferenced-declaration list.

The report contains the recognized declarations, declaration and unreferenced totals, and per-name reference counts; the declaration without a matching recognized reference appears in the unreferenced list.

Limitations

• The analysis is pattern-based rather than complete CSS parsing. It does not establish standards validation, value evaluation, fallback resolution, or detection of every custom-property use.

Common errors

• If the result is unsuccessful or declarations are missing, the selected CSS input may be empty or may not use the recognized declaration shape. Provide nonempty CSS and check that each declaration has a two-hyphen name, a colon, a value, and a semicolon.

FAQ

What CSS variable declarations does the tool recognize?

The tool recognizes custom-property declarations with names beginning with two hyphens, followed by a supported name pattern, a colon, a value, and a semicolon. Declarations outside that pattern are not included in the report.

How are var() references counted?

It counts recognized references that begin with var(--name), grouped by variable name. Optional content inside the reference parentheses is included in the recognized reference.

Why did the CSS variables analysis fail?

A nonempty CSS value must be selected for processing. If both supported inputs are supplied, a nonempty text-input value takes priority; an empty selected value produces an unsuccessful result.