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));
}

PreviouscreateVar

NextcreateTheme