CSSNext Variable Fallback

How to set fallbacks for CSSNext variables for which values aren't present.

CSSNext Variables

CSSNext is a library that allows you to use tomorrow's CSS syntax and features today -- much as Babel does for JavaScript. One such feature is CSS variables.

The variables are defined like:

:root {
  --superHot: red;
}

And then to use the variable:

.vrOfTheFuture {
  color: var(--superHot);
}

And it's awesome -- variables in CSS (of the future).

Lack of Fallback

But in the case that the variable isn't present, you have a problem. Color doesn't get set at all in the above example of .vrOfTheFuture. The variable value might not be present for any number of reasons: you forgot to import it or merely misspelled it.

Your CSS compiler will likely give you an error like:

(Emitted value instead of an instance of Error) postcss-custom-properties: 
/Users/.../my.css:24:3: variable '--superHot' is undefined and used without a fallback

As you can see in the error report, CSSNext gets its variable support from a subdependency library, postcss-custom-properties. In fact, CSSNext is simply a collection of postcss libraries whose combined features are present or expected in the CSS spec.

Setting a Fallback

A fallback is the value that will be used in the case that the variable is unavailable. To set it, pass it as the second value to var(), like this:

.vrOfTheFuture {
  color: var(--superHot, fuchsia);
}

Fallback present. Superhot might look a bit odd when the fallback is used, but at least we have a fallback color.

Do you ever end up using fallbacks? What are your favorite uses?