postcss-rgb-filter

PostCSS plugin to convert rgb colors to css filters.

Full credit to MultiplyByZer0 for this code. This PostCSS plugin just wraps that code.

Created to help colour SVG background images.

For this code to work well the starting color of the icon SVG needs to be black. Also note filters are not supported in IE11, so the black icon will be the fallback.

.foo {
  filter: rgb(0, 92, 250);
}

Converts to:

.foo {
  filter: invert(25%) sepia(96%) saturate(4236%) hue-rotate(214deg) brightness(97%) contrast(107%);
}

Install

npm i --save-dev postcss-rgb-filter

Usage

postcss([ require('postcss-rgb-filter') ])

See PostCSS docs for examples for your environment.

If you use the css variables plugin and want to use a variable for the color value, make sure it also runs before this plugin.

If you prefer writing colours in hex format simple add a plugin like postcss-rgb-plz and make sure it runs before this plugin.

If you use an autoprefixer plugin make sure it runs after this plugin, otherwise the prefixed value won't be converted.