Pleeease: filters

Convert CSS shorthand filters to SVG equivalent.

Used by Pleeease, a CSS post-processor.

Try it by yourself in the Pleeease playground

Example

You write foo.css:

.blur {
	filter: blur(4px);
}

You get bar.css:

.blur {
	filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter');
	filter: blur(4px);
}

Filters

It converts all 10 CSS shorthand filters:

• grayscale
• sepia
• saturate
• hue-rotate
• invert
• opacity
• brightness
• contrast
• blur
• drop-shadow

Learn more about CSS filters

Prefixes

This tool doesn't add prefixes. If you want them, you should use Autoprefixer. This is what Pleeease does:

.blur {
	filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter');
	-webkit-filter: blur(4px);
	        filter: blur(4px);
}

Usage

$ npm install postcss pleeease-filters

const fs      = require('fs');
const filters = require('pleeease-filters');
const postcss = require('postcss');

const css = fs.readFileSync('app.css', 'utf8');

// define options here
const options = {};

const fixed = postcss()
	.use([filters(options)])
	.process(css)
	.css;


fs.writeFile('app.min.css', fixed, function (err) {
  if (err) {
    throw err;
  }
  console.log('File saved!');
});

Options

You can also add IE filters with an option:

// set options
var options = {
	oldIE: true
}

Using the first example, you'll get:

.blur {
	filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter');
	filter: blur(4px);
	filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=4);
}

Note

Be careful, not all browsers support CSS or SVG filters on HTML content:

• latest WebKit browsers support CSS shorthand
• Firefox support SVG filters (and CSS shorthand since FF35)
• IE9- support IE filters (limited and slightly degraded)

It means that IE10+, Opera Mini and Android browsers have no support at all on HTML, only in SVG.

Moreover, IE filters shouldn't be used.

See caniuse for more info.

Licence

MIT © 2014 Vincent De Oliveira · iamvdo

This module is an adaptation of CSS-Filters-Polyfill. Copyright (c) 2012 - 2013 Christian Schepp Schaefer