[csswg-drafts] [css-variables] To what extent are substitution functions usable *in* substitution functions? (#10947)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-variables] To what extent are substitution functions usable *in* substitution functions? ==
It's currently clear and well-defined how substitution functions work when passed in the `<declaration-value>` part of another substitution function. For example, `var(--foo, var(--bar))` is just fine - it's a valid `var()` function, and during [substitution](https://drafts.csswg.org/css-variables/#substitute-a-var), the `var()` in the fallback is substituted if necessary.

What's less clear (arguably undefined) is what happens if you use a `var()` *elsewhere* inside of a `var()`. 

For example, does this work?

```css
.foo {
  --foo: , blue;
  color: var(--bar var(--foo));
}
```

Currently this doesn't work in Chrome, it's invalid.

What about this one, probably more reasonable?

```css
.foo {
  --foo: --bar;
  --bar: blue;
  color: var(var(--foo));
}
```

This is also currently invalid in Chrome.

That second one is pretty unfortunate, I think, particularly when applied to the new substitution functions. For example, it's completely valid to write `color-mix(var(--percent), red, blue)`, because `color-mix()` is a normal function. But `mix()` is a substitution function, so if `mix(var(--percent), red, blue)` doesn't work, that kinda sucks.

-------

Since nothing is capable of containing mismatched braces of any kind, it's safe to tell exactly where a function ends. So we could seek to the end of the substitution function, and if we found more substitution functions in its contents, sub them in *before* validating the outer function's grammar.

Aka, from my first example, `var(--foo var(--bar))` would work by first treating it like `var(█████)`. Then it would examine the interior, finding a `var(███)`. Examining *that* interior, it finds `--bar`, forming `var(--bar)`. That's valid, so substitute it. Now the outer function's interior is `--foo , blue`, forming `var(--foo , blue)`. That's valid, so we substitute it too.

This ensures that substitution functions act identical to non-subsitution functions, wrt using substitutions inside of them.

Thoughts? @andruud, specifically?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10947 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 25 September 2024 21:37:46 UTC