PostCSS Color Tokenizer

PostCSS plugin to convert colour values into variables.

Alpha release; does not output new SCSS variables to a stylesheet at present.

1.foo {
2    color: black;
3    background: #fff;
4    border: 2px solid rgb(0 0 0);
5}

1.foo {
2    color: $color_0;
3    background: $color_1;
4    border: 2px solid $color_0;
5}

Usage

Step 1: Install plugin:

1npm install --save-dev postcss postcss-color-tokenizer

Step 2: Check your project for an existing PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

1module.exports = {
2  plugins: [
3+   require('postcss-color-tokenizer'),
4    require('autoprefixer')
5  ]
6}