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:

• mixin arguments
• @contents blocks
• @result blocks
• layered @mixin declarations
• mixin overrides

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

.foo {
	@apply --foo;
}

/* becomes */

.foo {
	color: green;
}

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;
}

/* becomes */

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

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