How are variables handled?

“How does Warhol handle CSS variables?”

Long story short: CSS variables are to Warhol like any other css value and work more like compile-time variables that you may know from tools like SASS and Less and less like actual CSS variables - at least at the moment.

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 in that the computed value is the only really relevant value, while the original values are only really relevant for showing better error messages (if possible). 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 matter.

Although css variables can be extremly dynamic, Warhol has to treat them more like compile-time variables popularized by css preprocessors like SASS. If you rely on the dynamic aspects of css variables a lot (eg. 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.