Convert CSS shorthand filters to SVG equivalent
JavaScript CSS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
spec
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
README.md
index.js
package.json

README.md

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 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!');
});

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