Minimal support for @mixin and @apply

[mindplay-dk]

What would you want to propose?

Would you consider supporting bare minimum CSS @mixin and @apply as proposed by the W3C CSS Custom Functions and Mixins Module Level 1 draft?

@mixin --center-content {
  display: grid;
  place-content: center;
}

body {
  @apply --center-content;
  /*
    display: grid;
    place-content: center;
  */
}

It's a big proposal, but even if nothing more than this is supported, it would already be a huge win for design systems.

Even it just this is supported with no functions, arguments, setting variables, @contents, @env etc. it would already be a huge step up for things like typography, for which there is currently no good standard solution. Typographies often have 10+ properties, and there is sadly, still to this day, no good way to simlpy reuse a set of properties with native CSS.

I know about postcss-mixins but it is non standard and will be superseded by this standard, but I expect it could be years still before we have this.

In the mean time, everyone is reaching for tailwind or CSS-in-JS or SASS just for such a little thing, and they are getting way more complexity than they bargained for. I honestly feel like this is last big pain point for standard CSS. I don't even care about functions or the rest of mixins features - I really just need a way to create reusable typographies, and it is one of the last reasons I'd reach for any of those other tools.

Happy new year to you all. 🙂

Suggested solution

I would be happy with even the most basic implementation of this, e.g. @apply would simply copy the properties defined by @mixin.

This basic feature already goes a long way in SASS and CSS-in-JS etc. - it would just be nice if we could start using the syntax from the upcoming standard already, since @function is landing in browsers now, and these directives are part of the same standard.

Additional context

No response

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR