Add option for @apply syntax

[michaelcpuckett]

According to this video, the Polymer team at Google has been working with the CSS standards body to add the ability to @apply a group of properties, as you would @include a Sass @mixin.

Here's the syntax:

--ui-message-header-theme: {
    color: #297187;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 7px;
};
.header {
    @apply(--ui-message-header-theme)
}

If I were interested in using this functionality, do you think it would make sense to add it here, or to a different plugin, or should it be a separate plugin?

Cheers.

[MadLittleMods]

@michaelcpuckett Thank you for the heads up on the @apply mixins :) - A very useful feature!

Seems straight-forward but do you have a link to the working draft/spec?

@ben-eb convinced me that this would be better as a separate plugin. The variable resolution code(checking if under the same scope) would be shared between this module and that one. I want to rewrite and tackle the variable resolution with postcss-selector-parser.

For usage with custom properties(css variables): Inherit from where it is @apply'ed seems correct. In which case the mixin plugin would run first, then postcss-css-variables

:root {
    --ui-message-header-theme: {
        color: var(--foo);
    };
}

.header {
    --foo: #ff0000;
    @apply(--ui-message-header-theme)
}

[MadLittleMods]

I sent a tweet to @robdodson asking for any documentation on CSS mixin syntax, etc.

I did manage to find some Polymer documentation on Custom CSS mixins.

[robdodson]

I've sent a message to the Polymer team to see if it's spec'd somewhere

[robdodson]

It sounds like it's been discussed but there hasn't been any sort of formal proposal yet.

[loktar00]

👍 this would be great!

[cabarclay]

👍! Would definitely decrease code written, while maintaining readability. I'm all for it.
Although I'm not understanding why it would be a separate plugin, you're just giving a variable a stylesheet, no?

[MoOx]

https://github.com/pascalduez/postcss-apply

[stephenway]

This issue can be closed.

[MadLittleMods]

@stephenway I'd like to tackle the @apply syntax in another plugin with the same logic in inheritance that we have here with postcss-css-variables but just haven't got around to tackle it. This issue serves as a reminder for me to refactor and split out in order to make postcss-css-variables cleaner and allow for the shared logic with the @apply syntax plugin.

[stephenway]

Oh, in that case, nevermind, that sounds like a great idea!