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

> ```postcss
--color.primary: var(--color.pink);
--color.primary.main: var(--color.primary.500);
```

Considering the above example, we may also want to think through some sort of/alternative to a spread syntax, so a variable group can get some/all the values from another group and also add items.

I'm not sure what that could look like yet, but one idea could be to introduce a function that wraps the variable value during declaration:

```postcss
--color.primary: spread(
  /* spread all */
  var(--color.pink),
  /* pick some  */
  var(--color.pink) { 50, 500 },
  /* pick some, w/ optional aliasing 🤷🏻‍♂️  */
  var(--color.pink) { light: 50, main: 500 },
  /* add other custom values */
  {
    random-color: cyan;
    random-string: "hello world";
  }
);
```

As the author of a CSS/JS lib myself, I know this would technically be considered a breaking change since it’s already valid syntax, but I don’t believe this breaks any functionality that I currently support.

That said, we might want to do a survey for other CSS/JS library authors/maintainers, but this would not be a breaking change to the CSS language itself.

We’re discussing the spec for a `spread` function in #8391 already, which could possibly be useful for this use case too, as the use case and syntax are similar.

In simpler situations, this would look like this:

```postcss
--color.primary: spread(var(--color.pink), var(--color.pink) { light: 50, main: 500 });
```

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


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

Received on Tuesday, 27 February 2024 18:18:54 UTC