Re: [csswg-drafts] Proposal: Custom CSS Functions & Mixins (#9350)

@matthew-dean See the spec text at <https://drafts.csswg.org/css-values-5/#component-function-commas>, and the recent telcon minutes in #11500.

In short:
* In custom functions (and all substitution functions, unless we need to make a compat exception for `var()`), commas separating arguments must (by default) be present *literally*. A `var()` cannot provide multiple arguments for a function unless it's explicitly using the "spread" syntax (which we haven't decided on yet, but similar in spirit to JS's `...` operator). So, it's safe to do `--fonts: Arial, serif;` and then `--font-fn(var(--fonts))` - `--font-fn()` will only receive one argument, and it'll be the value `Arial, serif`.
* If you want to write in a literal value with commas in it as a single arg, use the {}-wrapper syntax: `--font-fn({Arial, serif})`.
* This behavior is different than how var() and other substitution functions work in *non*-substitution functions. It's still perfectly safe to write `--components: 0, 127, 255; color: rgb(var(--components), .5);`. Non-substitution functions *never* take arguments containing commas, almost by definition, so that's generally safe - subbing in a var with commas *must* be intended to provide multiple arguments.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-2669808805 using your GitHub account


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

Received on Wednesday, 19 February 2025 21:33:15 UTC