Today I read “Cyclic Dependency Space Toggles” by Roman Komarov, one of the most mind-bending CSS articles I have read in a while. It made me think about all these patterns using CSS custom properties we explored in the last few years and how many we still have to discover. I also learned two exciting concepts from this post, so let me share them with you.

Invalid cyclic dependencies#

When custom properties refer to each other, all the custom properties in the cycle are invalid. A quote from the specification:

This can create cyclic dependencies where a custom property uses a var() referring to itself, or two or more custom properties each attempt to refer to each other. […] If there is a cycle in the dependency graph, all the custom properties in the cycle are invalid at computed-value time.

div {
  --a: var(--b);
  --b: var(--a);
}

Valid empty fallback value using a bare comma#

If the initial value passed to a var() function is missing or invalid, but it is followed by a bare comma, the computed value is a valid empty fallback. And here is the explanation from the specification:

[…] a bare comma, with nothing following it, must be treated as valid in var(), indicating an empty fallback value.

div {
  --my-var: var(--missing-var,);
  /*                         👆 */
}

How are these two concepts useful?#

If you are wondering how any of this is helpful, I recommend reading Roman’s article, which presents a powerful use case for value toggling. Of course, it is not the only way to take advantage of valid/invalid evaluations of custom properties. Have a look at this simplified example.

<!-- index.html -->

<div></div>
<div style="--color: var(--is-red)"></div>
<div style="--color: var(--is-green)"></div>

/* style.css */

div {
  --color: var(--is-default);

  --is-default:   var(--color,);
  --is-red:   var(--color,);
  --is-green:   var(--color,);

  background-color: var(--is-default, gray) var(--is-red, red) var(--is-green, green);
}

The value of --color custom property determines the validity of --is-default, --is-red and --is-green. Then, the corresponding fallback value for a background-color is applied (gray, red or green).

It is not something I would use in any of my projects, but it is another example of how powerful CSS custom properties are. I hope you enjoyed this article and learned a thing or two. Thanks for reading 🫶

Leave a comment#