Can I ask, what’s the reason for using the keyword “initial”? As I understand it it could be any string that doesn’t accidentally create a valid value?

The OP tweet this about it [0], which links to the CSS spec [1]. It seems like a variable defined as initial triggers a different behavior than a traditional "syntax" error.

[0] https://twitter.com/James0x57/status/1283909866915074048

[1] https://www.w3.org/TR/css-variables-1/#invalid-variables

I was playing around with this here: https://jsbin.com/zebipenidi/1/edit and tried editing the keyword to other things.

When I tried other strings (my name, "null", other CSS "words" like opacity) it broke.

I wonder if this is because the initial variable definition needs to be valid css in order to be replaced?

This is really cool. How did you come up with this technique?

Thanks! :D I wanted really badly to be able to do it, so I read the spec very carefully top to bottom a handful of times. And suddenly one day I just realized it. Dove right in and after a bit of progress, I discovered all the logic that was possible too.

I had already been using spaces as a fallback value to do dynamic composition of standard properties ( https://twitter.com/James0x57/status/1233246818118533120 ) so it wasn't too far off to combine it with the "initial" behavior that causes the entire var dependency tree to evaluate to initial, allowing fallback behavior from any point in the tree. :)