How are variables handled?


“How does Warhol handle CSS variables?”

Long story short: CSS variables are to Warhol like any other CSS value! They work more akin to compile-time variables that you may know from compile-to-CSS languages like SASS and Less and not at all like actual CSS variables.

How CSS variables work

Custom CSS properties (also known as CSS variables) are a powerful feature and a somewhat recent addition to CSS. CSS variables are scoped by nesting elements. Consider the following example:

.foo {
  --myVar: red;
}
.bar {
  --myVar: green;
}
.child {
  color: var(--myVar, blue);
}

If a .child elements appears inside a .foo element, its color will end up as green. If the .child element appears inside .bar instead, the color will be red - and if the .child element has neither .foo nor .bar as ancestors, its color defaults to blue. The computed value for the color used on .child depends on the elements parent elements and the way the parent elements define and re-define the custom property --myVar.

How Warhol handles CSS variables

Warhol handles CSS variables like any other value. A properties computed value is the only really relevant value, while the original specified values are only really relevant for showing better error messages (if possible). On other words: Warhol only cares about the effects of CSS properties and not about the way the effect was achieved. If a CSS variable in your pattern library computes to red, it is to Warhol as if you had specified red without a variable. The same is true for testing the production web site: only the computed values really matter.

Although CSS variables can be extremely dynamic, Warhol has to treat them more like compile-time variables popularized by CSS pre-processors like SASS. If you rely on the dynamic aspects of CSS variables a lot (e.g. to implement theming) you cannot build a pattern library with one set of theme variables and expect Warhol to understand a production page that uses other theme variables. Warhol, at least at the moment, needs concrete and non-dynamic styles to perform its tests.

Why does Warhol handle CSS variables like this?

There is two reasons for the way that Warhol handles CSS variables. One is that CSS variables are so dynamic that they are hard to reason about without building a CSS engine from scratch. The other is that, when it comes to design consistency, the actual keywords that were used to define a particular computed value are best treated as an implementation detail. The precise nature of CSS is not visible to a human user of your pattern library - they only see (and care about) the visible effects your CSS has.

While you can do all sorts of magic tricks with CSS variables, there is only one way to do so responsibly: by including examples of all of the magic tricks in your pattern library. You can only expect everybody (humans and Warhol) to know all possible permutations of a CSS variable when each and every permutation is represented in the pattern library.

See also