PostCSS Color Summary

PostCSS plugin that extrat css colors and generate a summary file, which help you maintain your color palette.

Input

Style files be processed by postcss

a {
  color: red;
  color: aqua;
}
b {
  color: rgb(251, 0, 0);
}

Result

This plugin with generate a html file which summarize all css color used in your webapp.

Current Threshold: 3

1. rgba(255,0,0,1)similiar with color rgba(251,0,0,1)

   1. <input css 1>(2,3):
2. rgba(0,255,255,1)

   1. <input css 1>(3,3):
3. rgba(251,0,0,1)similiar with color rgba(255,0,0,1)

   1. <input css 1>(6,3):

Usage

Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you already use PostCSS, add the plugin to the end of your plugins list:

module.exports = {
  plugins: [
    require('autoprefixer')
+   require('postcss-color-summary'),
  ]
}

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