postcss-javascript-mixins

Write CSS mixins in Javascript.

Install

npm install --save-dev postcss-javascript-mixins

OR

yarn add --dev postcss-javascript-mixins

Usage

In your CSS, include an at rule with the js-mixin keyword followed by the path to the JS file generating CSS. Optionally, you may give the at rule a set of key-value declarations that will be passed as an object to the JS function.

The file path resolves from the project root (i.e. the location of postcss.config.js and/or package.json). This can be overriden with the rootDir option passed via the PostCSS configuration (see below).

Each mixin should be a separate JS module exporting a single function in a dialect of Javascript your version of Node understands. The function must return a string (the CSS).

Example

CSS

/* src/style.css */

body {
  @js-mixin tests/makeTheme {
    themeName: 'dark';
  }
}

@js-mixin mixins/makeColumns {
  columnCount: 4;
}

main {
  overflow: auto;
}

Javascript

// ./mixins/makeColumns.js

module.exports = ({ columnCount }) => {
    let output = '';
    for (let i = 1; i <= columnCount; i += 1) {
        output += `
.col-${i} {
  width: ${100 / columnCount * i}%;
}
`;
    }

    return output;
};

// ./mixins/makeTheme.js

module.exports = ({ themeName }) => {
    if (themeName === 'dark') {
        return `
  color: white;
  background-color: black;
`;
    }

    return '';
};

Result

/* dist/style.css */

body {
  color: white;
  background-color: black
}

.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-4 {
  width: 100%;
}

main {
  overflow: auto;
}

Options

rootDir

A path to prepend to the Javascript files when imported. The full path should be used. Defaults to the project root.