Function mixins with postcss-mixins

If you use postcss with postcss-mixins, it´s very likely you struggled with conditionals on mixins.

Function mixins gives you the power of javascript and you can define this mixins in mixins option. This is good to declare one or two mixins, but on a larger project you will probably have more than that. In this case, we have the mixinsDir option. This will autoload all mixins from one or more dirs and the mixin name will be taken from the file name.

Lets take the size mixin as an example:

webpack config:

mixinsDir: path.join(__dirname, 'mixins')

mixins/size.js file:

module.exports = (mixin, width, height) => {
if (!height) { height = width; }
    return { width, height };


@mixin size 10px -> width: 10px; height: 10px;
@mixin size 10px, 15px -> width: 10px; height: 15px;