Re: [csswg-drafts] Proposal: CSS Variable Groups (as a solution to several design systems pain points) (#9992)

I really like this, and the authors wanted to have an ability to have arrays, lists, and maps in CSS for years! This proposal sounds good enough to cover most of their use cases on the first glance.

> @MaxArt2501
> A question I have is that it's not clear how to get the root property name from a specific one, i.e. from --color-primary-dark-75 to --color-primary with dark and 75 specifiers. (What that mean some kind of string manipulation in CSS?)

If I understood the proposal correctly, the part that covers this is the [functional syntax](https://lea.verou.me/docs/var-groups/#functional-syntax):

>  If we automatically exposed a function for every group, we could select the right token on the fly, possibly as a result of calculations. Nested groups would create functions with more than one argument.

With it, we could potentially do

```CSS
.note {
    color: --color-primary(dark, 75);
}
```

And get the value of `--color-primary-dark-75`.

I 100% sure we need some way to dynamically extract values, and, especially, use dynamic variables to do so, like `--color-primary(var(--theme), var(--tint))` or something. This could unlock many doors, and could make the variable groups and any related CSS features like mixins and functions tremendously powerful.

What I'm not sure about is the syntax: I am not sure that promoting the variable groups to functions/mixins is a good idea, as it makes it easy to clash with the regular functions, and makes the double-dashed functional syntax tightly coupled with the variables themselves.

If I proposed something, I'd try something like a `get()` function, which will accept the group's name as the first argument, and the list of arguments to get as the following ones, so instead of `--color-primary(dark, 75)` we could do `get(--color-primary, dark, 75)`. Bonus point will be if _every_ argument could accept a CSS variable: `get(var(--dict), var(--theme), var(--tint))`.

- - -

Some other quick unsorted notes after reading the proposal:

- Do we need some kind of a shorthand syntax for defining lists/arrays? So instead of `--list: { 0: foo; 1: bar; }` we could do something like `--list: [foo, bar]`?
- For the `default` fallback property a name like `fallback` could work better, as it might be easy to confuse “default” with “base” (and it was already proposed as an alternative: “alternative names: default, value”)/
- Do we need to have a way of merging several groups into one? Like destructuring two objects in JS?

I'll need to spend more time thinking about this proposal, but I just want to reiterate how excited I am about it.

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


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

Received on Saturday, 24 February 2024 10:25:11 UTC