PostCSS Constants With Reload

PostCSS plugin to process imported constants from a file.

constants.js

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

input

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

output

.foo {
  color: #8EE7D3;
}

Within static values

constants.js

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

input

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

output

.foo {
  border: 2px solid black;
}

@ Rules

constants.js

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

input

@constants: "./constants.js";

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

output

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

Usage

postcss([ require('postcss-constants-with-reload') ])

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',
      },
    }
  })
])

you can pass an alias option, which will be used to resolve related constants file

postcss([
  constants({
    alias: path.resolve( process.cwd(), 'css' )
  })
])

then you can write code like this

@constants: "css/constants.js";

if 'css' was found in alias option, 'css/constants.js' will be parsed to complete path

webpack user?

you can pass an webpack option in option

postcss: function( webpack ){
    return [
        constantsWithReload({
            webpack: webpack
        })
    ];
}

it will add constants files as dependency. when you modify the constants file, it causes webpack recomplie all related resource and livereload in browser.

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