postcss-color-summary

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

Usage no npm install needed!

<script type="module">
  import postcssColorSummary from 'https://cdn.skypack.dev/postcss-color-summary';
</script>

README

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'),
  ]
}
Options Usage default value
resultUrl summary file output path /src/css-color-summary.html
threshold similarity threshold, (0~100) 3

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