[csswg-drafts] [css-mixins-1] Syntax to alias mixins (#13107)

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

== [css-mixins-1] Syntax to alias mixins ==
A common use case for dynamic mixins (i.e. having the mixin _name_ in a variable) is passing mixins around, so that a design system can communicate with components (e.g. "if you need to render a button, this is my button style").
Since dynamic mixins are hard (see #12927) a very low-fi way to do this would be if the component could specify something like "if you have a button style, I expect to find it in the mixin `foo-bar-button`"). Of course, it doesn't make sense for the design system to use `foo-bar-button` for its own need, ergo aliasing.

Sure, we can already do:

```css
@mixin --button(--priority: <syntax1>, --variant: <syntax2>) {
 /* ... */
}

@mixin --foo-bar-button(--priority: <syntax1>, --variant: <syntax2>) {
 @apply --button(var(--priority), var(--variant));
}
```

And if we do actually need to map arguments, it's the only way.
However, it would be nice if there was syntactic sugar, for the cases where we _don't_ need to map arguments:

```css
@mixin --foo-bar-button: --button;
```

We could even support currying (not MVP):

```css
@mixin --foo-bar-button: --button(primary, danger);
```

cc @tabatkins @andruud 

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


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

Received on Friday, 14 November 2025 06:31:37 UTC