Package Exports

postcss-constants

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-constants) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.