postcss-constants

PostCSS Constants

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;
}

Within static values

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;
}

Nested values

constants.js

module.exports = {
  theme: {
    orange: {
      color: 'orange',
      icons: {
        color: 'green',
      },
    },
  },
};

input

~theme: "./constants.js";
.icon {
  background: ~theme.orange.icons.color;
}

@ Rules

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;
}

Usage

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.

Changelog

0.2.0

• Nesting to the nth level works (~colors.blues.bright.primary)
• baseDir is an option that allows paths to be found in another directory