postcss-local-constants

PostCSS Local Constants

PostCSS plugin to process imported constants from a file, removing them from a global scope.

constants.js

module.exports = {
  colors: {
    primary: '#8EE7D3',
  },
};

input

~colors: "./constants.json";
.foo {
  color: primary from ~colors;
}

output

.foo {
  color: #8EE7D3;
}

Within static values

constants.js

module.exports = {
  borders: {
    weight: '2px',
    style: 'solid',
  },
};

input

~borders: "./constants.json";
.foo {
  border: weight from ~borders style from ~borders black;
}

output

.foo {
  border: 2px solid black;
}

@ Rules

constants.js

module.exports = {
  queries: {
    maxWidth: '200px',
  },
}

input

~queries: "./constants.json";

@media (max-width: maxWidth from ~queries) {
  color: blue;
}

output

@media (max-width: 200px) {
  color: blue;
}

Usage

postcss([ require('postcss-local-constants') ])

You can pass a default set of constants (that can be overriden), if you want to update default constants in webpack hot reload:

postcss([
  localConsts({
    defaults: {
      colors: {
        primary: 'blue',
      },
    }
  })
])

Call postcss-local-constants before any plugins that will compute values stored in constants. See PostCSS docs for examples for your environment.

Changelog

0.0.5

• lodash is used directly rather than lodash-node