Convert CSS shorthand filters to SVG equivalent
JavaScript CSS
Latest commit 8fc51b3 Apr 1, 2016 @iamvdo 3.0.0
Failed to load latest commit information.
spec Fix test Mar 29, 2016
.gitignore Initial commit Jul 2, 2014
.npmignore Initial commit Jul 1, 2014
.travis.yml Add travis CI Jan 27, 2015
CHANGELOG.md 3.0.0 Apr 1, 2016
README.md Clarify note about applying filters on HTML and/or SVG Nov 12, 2014
index.js Create a plugin with a standard API Mar 29, 2016
package.json 3.0.0 Apr 1, 2016

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