postcss-color-summary
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

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.

<style>.error{color:red;}</style>

    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.

Package Sidebar

Install

npm i postcss-color-summary

Weekly Downloads

4

Version

0.0.5

License

MIT

Unpacked Size

20.5 kB

Total Files

8

Last publish

Collaborators

  • zm093