@csstools/postcss-mixins

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