Convert CSS shorthand filters to SVG equivalent.
Used by Pleeease, a CSS post-processor.
Try it by yourself in the Pleeease playground
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);
}
It converts all 10 CSS shorthand filters:
- grayscale
- sepia
- saturate
- hue-rotate
- invert
- opacity
- brightness
- contrast
- blur
- drop-shadow
Learn more about CSS filters
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);
}
$ npm install pleeease-filters
var filters = require('pleeease-filters'),
fs = require('fs');
var css = fs.readFileSync('app.css', 'utf8');
// define options here
var options = {};
var fixed = filters.process(css, options);
fs.writeFile('app.min.css', fixed, function (err) {
if (err) {
throw err;
}
console.log('File saved!');
});
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);
}
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.
MIT ยฉ 2014 Vincent De Oliveira ยท iamvdo
This module is an adaptation of CSS-Filters-Polyfill. Copyright (c) 2012 - 2013 Christian Schepp Schaefer