Developer · Validator

CSS custom property auditor.

Paste a stylesheet and list every --name that is defined but never used, every var() that points at nothing, names redefined in several places, and circular references. Runs in your browser; your CSS is never uploaded.

Advertisement

Input

Paste one or more stylesheets. Only the pasted text is checked; variables set in other files, inline styles or JavaScript are not visible here.

Result

Paste CSS and press Audit.

What the audit reports

Unused: a custom property that is declared (--name: value) but never read by any var(--name) in the pasted CSS.

Undefined, no fallback: a var(--name) with no second argument, where --name is not declared anywhere in the pasted CSS. If the property really is missing, the spec makes the declaration invalid at computed-value time.

Undefined, has fallback: the same, but the var() supplies a fallback (a bare comma, var(--x,), is a valid empty fallback), so it is often deliberate. Listed for information.

Redefined: a name declared more than once. Several scopes (for example :root and .dark) are normal theming. Repeated inside one rule means the earlier value is overridden.

Cycles: the spec says a var() inside a custom property's value, including inside its fallback, creates a dependency edge; if the edges form a loop, every property in the loop is invalid at computed-value time. Self-references such as --a: var(--a) are cycles too.

Names are case-sensitive: --Brand and --brand are different properties. A name registered with @property counts as defined. Comments and quoted strings are ignored.

Source: CSS Custom Properties for Cascading Variables Module Level 1, W3C, section 2 (defining custom properties) and section 3 (var() and dependency cycles).

Frequently asked questions

Is an “unused” variable safe to delete?

Only if nothing outside the pasted CSS reads it. JavaScript (getPropertyValue), other stylesheets, inline styles and design-token consumers can all use a variable this tool cannot see. Treat the list as candidates, then search your codebase.

Why is a variable flagged undefined when my page works?

It is probably set elsewhere, such as a different stylesheet, a style attribute or script. Paste every stylesheet together for a fuller picture.

Can the cycle check be wrong?

It builds one graph per name, not per element. Two rules that would never match the same element can therefore look like a loop here. Read the reported path and check whether the rules can apply together.

Does it rewrite my CSS?

No. It only reports, with line numbers. Nothing is changed or sent anywhere.

Static check of pasted text only

This tool reads the CSS you paste and applies the rules of the W3C custom properties module. It does not run a browser cascade, load other files or execute JavaScript, so it reports candidates for review, not proof that a variable is safe to remove.

Advertisement
Advertisement
Listening…