[csswg-drafts] [css-mixins] Improve ergonomics of `using` by allowing wildcards (#10954)

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

== [css-mixins] Improve ergonomics of `using` by allowing wildcards ==
`using` is a great first step, but in practice if you actually need access to design system variables `using` will get *extremely* unwieldy.

For example, this is what it would look like if you want access to Open Props properties:

```css
@function --foo(--bar) using {
 --blue-1, --blue-2, --blue-3, --blue-4, --blue-5, --blue-6, --blue-7, --blue-8, --blue-9, --blue-10, --blue-11, --blue-12,
 --brown-1, --brown-2, --brown-3, --brown-4, --brown-5, --brown-6, --brown-7, --brown-8, --brown-9, --brown-10, --brown-11, --brown-12,
 --camo-1, --camo-2, --camo-3, --camo-4, --camo-5, --camo-6, --camo-7, --camo-8, --camo-9, --camo-10, --camo-11, --camo-12,
 --choco-1, --choco-2, --choco-3, --choco-4, --choco-5, --choco-6, --choco-7, --choco-8, --choco-9, --choco-10, --choco-11, --choco-12,
 --cyan-1, --cyan-2, --cyan-3, --cyan-4, --cyan-5, --cyan-6, --cyan-7, --cyan-8, --cyan-9, --cyan-10, --cyan-11, --cyan-12,
 --gray-1, --gray-2, --gray-3, --gray-4, --gray-5, --gray-6, --gray-7, --gray-8, --gray-9, --gray-10, --gray-11, --gray-12,
 --green-1, --green-2, --green-3, --green-4, --green-5, --green-6, --green-7, --green-8, --green-9, --green-10, --green-11, --green-12,
 --indigo-1, --indigo-2, --indigo-3, --indigo-4, --indigo-5, --indigo-6, --indigo-7, --indigo-8, --indigo-9, --indigo-10, --indigo-11, --indigo-12,
 --jungle-1, --jungle-2, --jungle-3, --jungle-4, --jungle-5, --jungle-6, --jungle-7, --jungle-8, --jungle-9, --jungle-10, --jungle-11, --jungle-12,
 --lime-1, --lime-2, --lime-3, --lime-4, --lime-5, --lime-6, --lime-7, --lime-8, --lime-9, --lime-10, --lime-11, --lime-12,
 --orange-1, --orange-2, --orange-3, --orange-4, --orange-5, --orange-6, --orange-7, --orange-8, --orange-9, --orange-10, --orange-11, --orange-12,
 --pink-1, --pink-2, --pink-3, --pink-4, --pink-5, --pink-6, --pink-7, --pink-8, --pink-9, --pink-10, --pink-11, --pink-12,
 --purple-1, --purple-2, --purple-3, --purple-4, --purple-5, --purple-6, --purple-7, --purple-8, --purple-9, --purple-10, --purple-11, --purple-12,
 --red-1, --red-2, --red-3, --red-4, --red-5, --red-6, --red-7, --red-8, --red-9, --red-10, --red-11, --red-12,
 --sand-1, --sand-2, --sand-3, --sand-4, --sand-5, --sand-6, --sand-7, --sand-8, --sand-9, --sand-10, --sand-11, --sand-12,
 --stone-1, --stone-2, --stone-3, --stone-4, --stone-5, --stone-6, --stone-7, --stone-8, --stone-9, --stone-10, --stone-11, --stone-12,
 --teal-1, --teal-2, --teal-3, --teal-4, --teal-5, --teal-6, --teal-7, --teal-8, --teal-9, --teal-10, --teal-11, --teal-12,
 --violet-1, --violet-2, --violet-3, --violet-4, --violet-5, --violet-6, --violet-7, --violet-8, --violet-9, --violet-10, --violet-11, --violet-12,
 --yellow-1, --yellow-2, --yellow-3, --yellow-4, --yellow-5, --yellow-6, --yellow-7, --yellow-8, --yellow-9, --yellow-10, --yellow-11, --yellow-12
}
```

With wildcards, it would become the much more manageable:

```css
@function --foo(--bar) using {
 --blue-*, --brown-*, --camo-*, --choco-*, --cyan-*, --gray-*, --green-*, 
 --indigo-*, --jungle-*, --lime-*, --orange-*, --pink-*, --purple-*, --red-*, 
 --sand-*, --stone-*, --teal-*, --violet-*, --yellow-*
}
```

And for many other design systems that use some kind of prefix for all colors (e.g. `--wa-color-*`), it would be even simpler.
It would even allow passing _all_ custom properties, by simply doing `--*`.

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


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

Received on Thursday, 26 September 2024 16:42:08 UTC