postcss-constants
PostCSS plugin to process imported constants from a file.
Last updated 4 years ago by ojame .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install postcss-constants 
SYNC missed versions from official npm registry.

PostCSS Constants Build Status

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.

Current Tags

  • 0.2.0                                ...           latest (4 years ago)

5 Versions

  • 0.2.0                                ...           4 years ago
  • 0.1.4                                ...           4 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 9
Last Day 0
Last Week 3
Last Month 12
Dependencies (4)
Dev Dependencies (4)

Copyright 2014 - 2016 © taobao.org |