Developer & data · focused workspace

CSS Variable Dependency Auditor

Trace custom-property references, fallback usage, missing variable names and dependency cycles in a stylesheet.

Variable referencesEditable projectsLocal processing

Source → inspect → export

Open project

Preparing the worked example…

Your source & settings

Settings & options

Open your media file

Files stay in your browser. Try the built-in sample first.

Choose file

Source text is limited to 1.5 million characters per editor; imported text files are limited to 1.5 MB.

Inspect your result

PREVIEW & EXPORT

Output file

Know what changed

Static name-level analysis, not computed CSS cascade evaluation. Declarations from different selectors or media conditions are merged by name for dependency review. A reported cycle may not occur in one active scope.

Choose another output above or open Export files.

Explore the example

Trace custom-property references, fallback usage, missing variable names and dependency cycles in a stylesheet.

What you can inspect

Variable references — Property, Variable, Fallback, Source line, Status.
Dependency cycles — a review ledger when applicable.

Keep the result you need

Use the output selector to inspect each generated file, then download it. Save a project to keep source inputs and settings together. Result files and editable projects serve different purposes.

Processing & file support

Source text is limited to 1.5 million characters per editor; imported text files are limited to 1.5 MB.

Your working session

Processing runs locally in a worker with a 30-second cancellation limit. Undo and redo keep up to 20 edits in this tab. Project files include imported assets and are limited to 40 MiB. There is no automatic saving.

Public pages include advertising and optional analytics under our privacy policy. Review the method and any flagged output before sharing files.

Using CSS Variable Dependency Auditor

Trace custom-property references, fallback usage, missing variable names and dependency cycles in a stylesheet.

Start with the worked example in css source, then paste your own source or open a text file.
Review your input structure and make any needed edits in the source editors.
Choose “Process source”. Inspect the variable references and dependency cycles before using the result.
Download the selected output, inspect other files in Export files and save a project if you want to reopen the same inputs.

Example

Try the built-in example, inspect variable references and compare the result after changing one option.

Questions & answers

What does CSS Variable Dependency Auditor do?

Trace custom-property references, fallback usage, missing variable names and dependency cycles in a stylesheet.

What are the important limitations?

Can I save and reopen my work?

Yes. Save a project JSON file containing your inputs, settings and any imported assets. Projects are limited to 40 MiB. Undo/redo stores up to 20 edits in this session and is not saved in the project. There is no automatic saving.

How do imports and output previews work?

Source text is limited to 1.5 million characters per editor; imported text files are limited to 1.5 MB. Text previews show up to 150,000 characters; downloads include the complete output. Tables show 50 rows per page; CSV files include all rows.