ToolJovia
Developer

CSS Custom Property Resolver

Resolve var() references, fallbacks and cycles in an explicit custom-property map.

✓ Browser-local processing

Loading tool…

How to use CSS Custom Property Resolver

Resolve var() references, fallbacks and cycles in an explicit custom-property map. The supplied JSON maps --names to CSS token strings. The tool builds the complete dependency graph, marks cycles, and substitutes available values or declared fallbacks without applying a stylesheet or guessing DOM inheritance.

  1. Provide json object: custom property → token string.
  2. Choose the supported mode and run the tool. Review its assumptions and any reported errors.
  3. Copy the result or download a separate output; reset to clear the current form.

Good to know

  • 1–200 ASCII custom-property names,50,000 JSON characters,5,000 per token value;100 CSS nesting levels. Token spacing is normalized.
  • Explicit environment only: no DOM cascade/inheritance, @property typed validation, computed units or browser-style application. Missing/invalid references without a valid fallback return null. initial is guaranteed-invalid; inherit/unset/revert/revert-layer require a cascade and are refused. Escaped reference identifiers are decoded case-sensitively.
  • 10-second parser startup and2-second isolated computation limit.
  • Inputs are processed on this device and are not automatically saved or uploaded.

Common questions

Why is a variable with a fallback still cycle-invalid?

Dependency cycles include references inside fallbacks. A variable in such a cycle is invalid; a different variable may still replace that invalid reference with its own usable fallback.

Does this change my original input?

No. The tool returns a separate result. Review that output before using it in another application.

Keep going with related tools

All developer →
Developer

CSS Formatter and Minifier

Format a CSS stylesheet or serialize its syntax tree with compact token spacing.

Developer

CSS Selector Specificity Analyzer

Calculate selector specificity tuples, including supported functional selector rules.

Developer

CSS Clamp Generator

Derive fluid CSS clamp sizing from two viewport and size anchor points.

Developer

Static Email CSS Inliner

Inline selected author CSS into a standards-mode HTML document with explicit cascade ordering, without rendering the supplied markup or fetching stylesheets.