I work on OnePassApps, the team behind app.onepassapps.com, so this is our own build, and every number below was measured on it today over plain HTTPS from outside the browser - no session, no cookies, no JavaScript, one fetch per URL.

We ship a small static stylesheet for the moment the app does not come up. It is a separate file beside the app bundle, and it is linked first on every page. What it does with variables is the interesting part.

The file

The static fallback stylesheet answers HTTP 200 with 3054 bytes. The app bundle's stylesheet, /assets/index-B_evf03w.css, answers HTTP 200 with 242648 bytes and declares 403 custom properties, referenced 346 times with var().

What the small file does with variables

  • It uses 25 distinct custom properties in its var() calls.
  • It declares 0 of them itself.
  • Not one of its var() calls carries a default value: 0 calls have a fallback value after the comma.

The tokens it reaches for are the ordinary design ones - --brand, --brand-edge, --brand-wash, --canvas, --control-lg, --focus, --font-sans, --frame-edge, and 17 more.

Where those values come from

All 25 of them are defined in the app bundle's stylesheet, and 0 of them are defined nowhere else. So the small file is not self-contained: its colours, its spacing, its type scale and its focus ring all resolve against the bundle the fallback exists to survive without.

The file says so itself, in its own header comment: it is linked with tokens.css and base.css, outside the app bundle, so the fallback still renders when the bundle itself fails to load or throws before React mounts.

The two files that comment names

On the live host today, neither of them is served:

Path Status
/base.css 404
/tokens.css 404

Both answer the fixed miss document. The two stylesheets our pages actually link are the static fallback stylesheet and /assets/index-B_evf03w.css.

What a missing token does

A var() with no default and no matching declaration is invalid at computed-value time, so the property it sits in falls back to being unset - inherited for an inherited property, initial for anything else. The fallback sheet uses that form for --brand, --brand-edge, --brand-wash, --canvas and the rest of its token list, with no default after any of them.

I did not reproduce a bundle failure in a browser, so I make no claim about what the page looks like in that case. What the bytes say is the dependency above.

The tokens that change with the viewport

Most of the 25 tokens are declared once at the top level. 11 of them are also redeclared inside a media query, so their value is not the same at every width:

  • --font-sans is declared 2 time at the top level and 1 more inside a theme-inline condition.
  • --frame-edge is declared 1 time at the top level and 2 more inside a media (width<768px),(width<1024px) and (height<=500px) condition.
  • --inset is declared 1 time at the top level and 2 more inside a media (width<768px),(width<1024px) and (height<=500px) condition.
  • --leading-body is declared 2 time at the top level and 1 more inside a theme-inline condition.
  • --leading-caption is declared 2 time at the top level and 1 more inside a theme-inline condition.
  • --radius-outer is declared 2 time at the top level and 1 more inside a theme-inline condition.
  • --radius-pill is declared 2 time at the top level and 1 more inside a theme-inline condition.
  • --stroke is declared 1 time at the top level and 1 more inside a media (prefers-contrast:more) condition.
  • --text-body is declared 2 time at the top level and 3 more inside a media (width<768px),(width<1024px) and (height<=500px) condition.
  • --text-caption is declared 2 time at the top level and 1 more inside a theme-inline condition.
  • --text-title is declared 2 time at the top level and 3 more inside a media (width<768px),(width<1024px) and (height<=500px) condition.

The cascade layers

The fallback opens with an explicit layer order that names theme, base, components and utilities, in that order. The bundle contains 4 layer blocks
(base, properties, theme, utilities), plus 61 media queries, 51 container queries, 28 supports conditions, 3 keyframe blocks and 14 font-face blocks.

That order is why the small file is linked first: it fixes the layer order before the bundle opens its own, so the fallback is not painted under a layered rule it cannot beat.

What I did not measure

  • The served CSS only. I did not run a browser, so I did not compare this with a rendered page, and I make no claim about how any of it looks.
  • I did not break the bundle on purpose, so I make no claim about how the fallback behaves when the bundle fails.
  • One build, one network, one fetch per URL, 2026-11-08T18:14:58Z.
  • I measured the 56 URLs in our sitemap. 56 of them link the static fallback stylesheet and 56 link the bundle stylesheet; 23 link no app JavaScript at all.

The app guide index is at https://app.onepassapps.com/guides?utm_source=devto&utm_medium=community&utm_campaign=fallback-token-layer&utm_content=guides-link and the app itself is at https://app.onepassapps.com?utm_source=devto&utm_medium=community&utm_campaign=fallback-token-layer&utm_content=home-link

I work on OnePassApps, and every number above comes from the build we ship today.