PostCSS Mixins

npm install @csstools/postcss-mixins --save-dev

PostCSS Mixins lets you use @mixin and @apply following CSS Mixins 1.

Several specification aspects of CSS Mixins still need to be settled.
This plugin is only a partial implementation to avoid conflicts with the final specification.

Unsupported:

• typed mixin arguments
• layered @mixin declarations
• mixin overrides

@mixin --foo() {
    color: green;
}

.foo {
    @apply --foo;
}

@mixin --bar(--baz) {
    color: rgb(var(--baz) 127 0);
}

.bar {
    @apply --bar(200);
}

@mixin --a {
    font-weight: 500;
}

@mixin --b {
    @apply --a;
    font-size: 2rem;
}

.c {
    @apply --b;
}

/* becomes */

.foo {
    color: green;
}

.bar {
    --_csstools-p-1agle9gi-0--arg-0: 200;
    --_csstools-p-1agle9gi-1--baz: var(--_csstools-p-1agle9gi-0--arg-0);
    color: rgb(var(--_csstools-p-1agle9gi-1--baz) 127 0);
}

.c {
    font-weight: 500;
    font-size: 2rem;
}

Usage

Add PostCSS Mixins to your project:

npm install postcss @csstools/postcss-mixins --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssMixins = require('@csstools/postcss-mixins');

postcss([
    postcssMixins(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is not preserved.

postcssMixins({ preserve: true })

@mixin --foo() {
    color: green;
}

.foo {
    @apply --foo;
}

@mixin --bar(--baz) {
    color: rgb(var(--baz) 127 0);
}

.bar {
    @apply --bar(200);
}

@mixin --a {
    font-weight: 500;
}

@mixin --b {
    @apply --a;
    font-size: 2rem;
}

.c {
    @apply --b;
}

/* becomes */

@mixin --foo() {
    color: green;
}

.foo {
    color: green;
    @apply --foo;
}

@mixin --bar(--baz) {
    color: rgb(var(--baz) 127 0);
}

.bar {
    --_csstools-p-1agle9gi-0--arg-0: 200;
    --_csstools-p-1agle9gi-1--baz: var(--_csstools-p-1agle9gi-0--arg-0);
    color: rgb(var(--_csstools-p-1agle9gi-1--baz) 127 0);
    @apply --bar(200);
}

@mixin --a {
    font-weight: 500;
}

@mixin --b {
    @apply --a;
    font-size: 2rem;
}

.c {
    font-weight: 500;
    font-size: 2rem;
    @apply --b;
}