PostCSS plugin to process imported constants from a file.

constants.js

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

input

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

output

.foo { color: #8EE7D3; }

constants.js

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

input

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

output

.foo { border: 2px solid black; }

constants.js

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

input

~queries: "./constants.js"; @media (max-width: ~queries.maxWidth) { color: blue; }

output

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

postcss([ require('postcss-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([ constants({ defaults: { colors: { primary: 'blue', }, } }) ])

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