Short-circuiting var() and attr()

concepts

1. Short-circuit

   var() and attr() now short-circuit: when the first argument resolves, the fallback chain stops being evaluated. Cheaper for big trees with deep fallbacks; matches CSS spec.

2. Cycle in Fallback

   The motivating bug: a cycle hidden in a fallback used to poison the whole property even when the primary value was set. v139 doesn't walk the fallback, so the cycle never bites. Toggle the primary and see.

3. Deep Fallback Theme

   A five-level token cascade (card → component → brand → site → global) where each level can independently override the colour. Short-circuiting means the chain resolves at the first set level — cycles in deeper levels can never interfere.

4. Cycle Detector

   Paste a snippet, hit Apply: the page graphs the var() chain, identifies cycles, and reports the v138 vs v139 verdicts. Three preset examples cover clean / fallback-only cycle / primary cycle.

why it shipped

When the fallback is not taken, var()/attr() functions evaluate without looking for cycles in that fallback.

references

• ChromeStatus entry