PostCSS Colors Only

PostCSS plugin to remove all rules except those which contain one or more colors.

This tool is useful if you are re-skinning a site with a new color scheme and need a starting point for a new stylesheet.

.foo {
  color: red;
  border: 1px solid #ab560f;
  font-size: 16px;
  background-image: linear-gradient(to-bottom, red, blue);
}

.bar {
  color: rgba(0, 128, 255, 0.5);
}

.baz {
  display: block;
}

.foo {
  color: red;
  border-color: #ab560f;
  background-image: linear-gradient(to-bottom, red, blue);
}

.bar {
  color: rgba(0, 128, 255, 0.5);
}

This plugin will remove any CSS rules that do not contain a color (named, hex, rgb, rgba, hsl, or hsla) value. It looks at the following CSS properties for colors:

• color
• background
• background-color
• background-image
• border
• border-top
• border-right
• border-bottom
• border-left
• border-color
• border-top-color
• border-right-color
• border-bottom-color
• border-left-color
• outline
• outline-color
• text-decoration
• text-decoration-color
• text-shadow
• box-shadow
• fill
• stroke
• stop-color
• flood-color
• lighting-color

The following CSS properties will be transformed, leaving only the color part of the declaration:

• background → background-color
• border → border-color
• border-top → border-top-color
• border-right → border-right-color
• border-bottom → border-bottom-color
• border-left → border-left-color
• outline → outline-color
• text-decoration → text-decoration-color

Installation

Use npm.

npm install postcss-colors-only

Usage

var postcss = require('postcss');
var colorsOnly = require('postcss-colors-only');
var options = {
  withoutGrey: false, // set to true to remove rules that only have grey colors
  withoutMonochrome: false, // set to true to remove rules that only have grey, black, or white colors
  inverse: false, // set to true to remove colors from rules
};

postcss()
  .use(colorsOnly(options))
  .process('a { color: red; background: #FF0 url(foo.jpg); font-size: 12px; }')
  .css;
//=> 'a { color: red; background-color: #FF0; }'

CLI

This plugin is also part of a standalone command line tool. See css-color-extractor-cli.

License

Copyright (c) 2015 Rob Sanchez

Licensed under the MIT License.