demo · v139

Deep Fallback Theme

Real design systems layer five or more var() fallbacks per token so any override level can be set independently. Before v139, a hidden cycle anywhere in that chain would poison the whole property. Short-circuiting means the chain stops as soon as a value resolves — cycles in deeper fallbacks can never interfere.

Chrome 139+: var() short-circuits at the first resolved level — deep fallbacks are never traversed.

Select a theme level to set — deeper overrides take precedence.

Feature Announcement

This card's colour comes from the deepest unset var() fallback. Change the theme level above and watch exactly which variable in the chain resolves.

Fallback branch tester

Run the two important branches directly in CSS: one where the primary token resolves before a cyclic fallback is evaluated, and one where the missing primary forces the browser into the broken fallback.

This sample text is styled by the live fallback expression below. 

  


  
/* Five-level token chain — component reads only --card-bg */
.card {
  background: var(--card-bg,          /* 1. card instance */
    var(--component-bg,               /* 2. component type */
      var(--brand-surface,            /* 3. brand/product */
        var(--site-surface,           /* 4. site-wide */
          var(--global-surface,       /* 5. hard-coded safe value */
            var(--bg-paper))))));
}

/* Before Chrome 139: setting any level AND having a cycle deep
   in the chain could poison the whole property.
   After Chrome 139: var() stops evaluating as soon as it resolves
   — cycles in levels 2-5 are invisible when level 1 is set. */


  

    
see also