@apply CSS Rule in browsers

Google has implemented @apply (https://tabatkins.github.io/specs/css-apply-rule/) in Chrome behind a flag (as of stable version 51) and CSSNext has a PostCSS tool to help promote usage. This is a great start but what do the other browser vendors think about this? Are there plans to add this soon? If not, what are the alternative solutions for shared rulesets in CSS they are considering? As far as I can see, @apply is NOT a replacement for CSS precompiler mixins. It changes how we could use precompilers though which is exciting. Please share your thoughts.

There are two biggest problems (IMO) for Custom Sets of Properties (aka mixins):

1. Currently, there are implemented only in Chrome (behind a flag)
2. You cannot pass variables to mixins: E.g. take a look at the demo: http://codepen.io/malyw/pen/grRNZy Inside of it I define a pure CSS triangle mixin, where --triangle-to-bottom-size CSS variable is used to set the triangle size:

--triangle-to-bottom: {
 ...
 border-width: var(--triangle-to-bottom-size) ...
 ...
}

When I’m applying it, the browser just inlines the mixin value from a place, where it’s defined. It means, if you try to apply a different value for a variable, used by the mixin (which is kinda passing of the variable as an argument in preprocessors), it simply doesn’t work:

.triangle-to-bottom {
  --triangle-to-bottom-size: 10px; /* has no effect */
  @apply --triangle-to-bottom;
}

I would propose to consider both issues. IMO passing variables to mixins is the biggest miss for the current mixins/@apply spec.

@tabatkins could apply this in the spec that way on purpose, but the ability is missed.

Some update is here https://github.com/w3c/csswg-drafts/issues/532#issuecomment-255472033

Sadly, this rule may have no future. I’ve requested a new champion in a new thread. I am not part of the CSSWG, and my company does not have “skin in the game”, so I am likely ineligible. Needed: New “champion” for CSS @apply rule