Controlling when CSS custom properties are computed

When and how CSS custom properties are calculated might not be what you expect, and it has a big impact on your styles. The default Take this HTML: <div></div><div class="second-item"> <p>…</p></div>And this CSS: .second-item { --index: sibling-index(); & > :first-child { scale: var(--index); }}If you're unfamiliar with sibling-index(), here's a quick video intro I posted recently: Instagram TikTok YouTube The question is, how much is the paragraph going to scale? sibling-index() is 1-indexed, but is it going to pick up the index of the second div - where the custom property is defined, or its first child - where the custom property is used? The answer is: it depends. If the code is taken in isolation, the value of the custom property will be stored as a token stream, so it's computed a little like this: .second-item { --index: sibling-index(); /* …Which is computed to: */ --index: sibling-index(); /* (as in, no change) */ & > :first-child { scale: var(--index); /* …Which is…