fallbackVar

Provides fallback values for variables that have been created using vanilla-extract APIs, e.g. createVar, createTheme, etc.

As these APIs produce variable references that contain the CSS var function, e.g. var(--colorVar__qzfheg0), it is necessary to handle the wrapping function when providing a fallback.

style.css.ts
import {  createVar,  fallbackVar,  style } from '@vanilla-extract/css';  export const colorVar = createVar();  export const color = style({  color: fallbackVar(colorVar, 'blue') });
CSS
.style_color__1p33h4l1 {  color: var(--colorVar__1p33h4l0, blue); }

Multiple fallback values

The fallbackVar function handles falling back across multiple variables by providing multiple parameters.

style.css.ts
import {  createVar,  fallbackVar,  style } from '@vanilla-extract/css';  export const primaryVar = createVar(); export const secondaryVar = createVar();  export const color = style({  color: fallbackVar(primaryVar, secondaryVar, 'blue') });
CSS
.style_color__1p33h4l2 {  color: var(--primaryVar__1p33h4l0, var(--secondaryVar__1p33h4l1, blue)); }