[csswg-drafts] [css-functions-mixins] Custom CSS Function Parameter Implications/Questions (#11190)

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

== [css-functions-mixins] Custom CSS Function Parameter Implications/Questions ==
Copying from the main thread https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-2458466997

> Two quick questions...
> 
> 1) vars containing values with commas would spread across params on a call to a function, right?
> 
> ```css
> --args: 1, 2, 3;
> --val: --custom-fn(var(--args)); /* called with 3 arguments? */
> ```
> 
> 2) If my custom function only takes 1 param, is it okay to call it and still pass in 10 values where the last 9 are ignored?
> 
> if yes on q 1, (and helped along with a 'yes' on q 2) this opens the door to arrays which means CSS libraries (with minor restrictions) can begin providing shorthand properties in their API! That's gonna be sick!
> 
> ```css
> @function --at-0 (--p0) { result: var(--p0); }
> @function --at-1 (--p0, --p1) { result: var(--p1); }
> @function --at-2 (--p0, --p1, --p2) { result: var(--p2); }
> ...
> 
> .library-border {
>   --size: --at-0(var(--api-shorthand));
>   --style: --at-1(var(--api-shorthand));
>   --color: --at-2(var(--api-shorthand));
>   border: var(--size, var(--api-size, 1px))
>     var(--style, var(--api-style, solid))
>     var(--color, var(--api-color, black));
> }
> ```
> 
> ```html
> <div class="library-border" style="--api-shorthand: 2px, solid, hotpink;">
>   I have a 2px solid border that's hotpink!
> </div>
> ```
> 

.

@mirisuzanne [replied](https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-2468849977):

> Those are interesting questions. I think it would be good to open separate issues for them at this point. I don't have an immediate answer, but would be interested in the discussions/implications.

.

@tabatkins [replied]()

> > vars containing values with commas would spread across params on a call to a function, right?
> 
> Per current specs, yes. (And I think that's good.) If you want to make sure that a variable only expands into one argument, you can call the function like --custom-fn({var(--args)}).
> 
> > If my custom function only takes 1 param, is it okay to call it and still pass in 10 values where the last 9 are ignored?
> 
> Yeah, we should raise this as a separate issue, as there are multiple possible answers and none of them are "obvious".

.

I LOVE the _option_ to not expand the args using the curly braces. Awesome
The [current functions spec](https://drafts.csswg.org/css-mixins-1/#function-rule) does not appear to mention this yet

The 2nd question though appears to be the main discussion point for now!

Thank you!


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


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

Received on Wednesday, 13 November 2024 06:22:33 UTC