Jane OriMar 6

CSS vars holding arrays should've expanded into multiple parameters for --function calls. Especially because there's a syntax to prevent it.

~~What a bummer!~~
Bummer averted! There's a spread operator coming to restore the behavior optionally 🎉

https://jsfiddle.net/wdmnockj/1/
https://github.com/w3c/csswg-drafts/issues/11190#issuecomment-2596276757
https://issues.chromium.org/issues/390205875
https://drafts.csswg.org/css-values-5/#comma-containing-productions:~:text=For%20example%2C%20font%2Dfamily%3A%20random%2Ditem(%2D%2Dx%2C%20%7Bvar(%2D%2Dlist1)%7D%2C%20monospace)%20will%20work%20correctly%20regardless%20of%20whether%20the%20%2D%2Dlist1%20custom%20property%20contains%20a%20comma%2Dseparated%20list%20or%20not.

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

Show threadJane OriMar 6
Heya @tabatkins , are you open to a spread operator so vars with comma separated values fill multiple arguments in a function call like originally planned?
There's tons of exciting potential there, happy to write up a request issue to track if there wasn't a technical limitation preventing it 🤙
Show threadso tab todayMar 6

@JaneOri Spread operator is already defined in the spec!

https://drafts.csswg.org/css-values-5/#early-resolution

CSS Values and Units Module Level 5

Show threadso tab todayMar 6
@JaneOri Sorry, more direct link https://drafts.csswg.org/css-values-5/#spread-syntax
CSS Values and Units Module Level 5

Show threadJane OriMar 17

@tabatkins I'm grateful the spread operator will open this potential but I keep coming back to feeling the inconsistentcy that csv vars spread in standard function calls but not in custom function calls

It *feels* wrong/broken from this side of using CSS since the expectation is already set. As the/a spec author do you feel any way about the discrepancy? Seemed like Anders solved it to spread before the discussion decision to ship no-spread; Without knowing why, I'm left curious

Show threadso tab todayMar 17
@JaneOri The inconsistency is slightly annoying, but we were locked in by compat. If I could redo it, I'd make CSS vars respect commas in normal properties too, and require ... to expand out into multiple. (Tho that *would* require being a little more specific about function and property syntax structures; *all* functions would need to define an argument grammar as well as a normal grammar, like arb-sub functions now do.)
Show threadso tab todayMar 17
@JaneOri The need for an explicit spread, btw, is so that we can reasonably do short-circuiting, and avoid resolving variables/etc in branches of an `if()` that we aren't taking. To do that, we need to know the overall structure of the function ahead of time, so we can control what variables need to be substituted and when. The spread op skirts around that and just eagerly resolves the arb-sub function immediately.
Show threadJane Ori

@tabatkins oh that's what arb-sub means. Probably should have googled it first.

Fascinating...

Makes sense now!

Thank you!

Mar 17 at 10:23pmWeb