DEVELOPER WORKBENCH

CSS Custom Property Explorer

Trace CSS variable definitions, var() uses and nested fallbacks. Review missing source declarations, unreferenced names and potential dependency cycles; export an inventory or graph.

Local processingEditable exampleCopy + file exports

Settings

Try the example or enter your own settings.

Source inventory, not computed CSS. Selectors, inheritance, registrations, conditions and cascade winners are not resolved. Merged graph cycles can be false positives; fallback edges are included. Unreferenced does not mean safe to delete. CSS is never applied, and URLs/imports are never fetched.

Using CSS Custom Property Explorer

Trace CSS variable definitions, var() uses and nested fallbacks. Review missing source declarations, unreferenced names and potential dependency cycles; export an inventory or graph.

  1. Paste a CSS stylesheet or select declaration-list mode for a block without braces. Try the editable example to see fallbacks and a potential cycle.
  2. Analyze the source and filter the variable inventory by missing declarations, unreferenced names, potential cycles or a case-sensitive name substring.
  3. Use the JSON audit for source lines, contexts, fallback references and definition values. Export filtered text/CSV or full Graphviz DOT, then verify behavior in the rendered page.

Example

Try the included editable example.
Analyze the source and filter the variable inventory by missing declarations, unreferenced names, potential cycles or a case-sensitive name substring.

Questions & answers

Does the tool apply CSS or request imports?

No. The existing local CSS Tree parser analyzes source in a worker. Styles, scripts, URLs and imports are never applied or fetched. This does not inspect other stylesheets or a live document.

What does a missing declaration mean?

A var() name has no custom-property declaration in the pasted source. Another stylesheet, inheritance, JavaScript or an unmodeled registration may provide it. A fallback may make it intentional; the audit records fallback presence and text.

Are unreferenced variables safe to delete?

Not necessarily. The report only means no var() use was found in the current source. Scripts, other stylesheets or external components may use the custom property. Review those consumers before changing production CSS.

Are reported cycles guaranteed browser failures?

No. The graph merges all declarations across selectors, conditions and overrides, including nested fallback references. Browser dependency graphs are computed per element. A merged cycle is a review prompt and can be a false positive; JSON preserves contexts for investigation.

Are property names case-sensitive?

Yes. CSS escapes are decoded, but names are not lowercased or Unicode-normalized. --Brand and --brand are distinct. Definition lines and important flags are preserved; winning declarations are not calculated.

What are the limits and export rules?

100,000 CSS characters, 20,000 AST/value nodes, 64 levels, 2,000 declarations, 2,000 var() references and 500 distinct names. Long context/value/fallback excerpts cap at1,000 characters; values/fallbacks include a truncation flag. Unsupported/unparsed declaration values are rejected; unknown raw at-rule blocks are noted. JSON/DOT contain the full inventory, while text/CSV follow the filter. @property semantics are not modeled.

KEEP YOUR WORKFLOW MOVING

A useful next step for your task.

Browse Developer & Data

Help improve this tool

Report a problem or suggest an improvement

Describe the issue without pasting private tool input. Feedback goes to our admin inbox.

Find another tool · Read practical guides