w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.52k stars 672 forks source link

[css-functions-mixins] Custom CSS Function Parameter Implications/Questions #11190

Open JaneOri opened 1 week ago

JaneOri commented 1 week ago

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?

--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!

@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));
}
<div class="library-border" style="--api-shorthand: 2px, solid, hotpink;">
  I have a 2px solid border that's hotpink!
</div>

.

@mirisuzanne replied:

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 does not appear to mention this yet Splitting into separate args by default is an exciting possibility, I agree it's good (great!) so I really appreciate it! ty!

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

Thank you!