• Stars
    star
    96
  • Rank 351,245 (Top 7 %)
  • Language
    JavaScript
  • Created over 10 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Convert CSS shorthand filters to SVG equivalent

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

More Repositories

1

pleeease

Process CSS with ease: combine preprocessors and PostCSS
JavaScript
474
star
2

stickyElements

๐Ÿ’„ Everything can stick. Just because.
JavaScript
316
star
3

css-houdini.rocks

๐ŸŽฉ Very experimental with CSS Houdini
JavaScript
303
star
4

postcss-opacity

PostCSS plugin to add opacity filter for IE8 and legacy browsers
JavaScript
30
star
5

morphing-hamburger-menu

๐Ÿ” UI concept
CSS
23
star
6

Heeere

Are you heeere?
JavaScript
19
star
7

Greeed

Another JS grid layout system
JavaScript
17
star
8

Reveal-liveCoding

Live coding in Reveal.js
JavaScript
16
star
9

speedometer-pwa

๐Ÿš— Speedometer Progressive Web App
JavaScript
16
star
10

postcss-vmin

A simple PostCSS plugin to convert vmin to vm for IE9.
JavaScript
13
star
11

css-svg-masks

CSS & SVG Masks testcases on HTML content
HTML
11
star
12

pleeease-brunch

Add Pleeease support to Brunch
JavaScript
7
star
13

globe-react-d3-topojson

๐ŸŒ Idea from https://earthview.withgoogle.com - Live demo :
JavaScript
6
star
14

iamvdo.github.io

Personal website
PHP
4
star
15

houdini-worklet-smooth-corners

CSS Houdini paint worklet to create smooth corners (superellipse)
JavaScript
4
star
16

postcss-vars

A "not so bad" CSS variables support
JavaScript
3
star
17

pleeease-cli

CLI package for Pleeease
JavaScript
3
star
18

revealjs-boilerplate

RevealJS boilerplate (custom theme, plugins, etc.)
JavaScript
3
star
19

media-queries

http://lab.iamvdo.me/media-queries
HTML
3
star
20

git-ensg

2
star
21

flappy

Demo files for multiplayer Flappy Bird
JavaScript
1
star
22

brunch-with-pleeease

Brunch skeleton for Pleeease CSS postprocessor.
CSS
1
star
23

model-viewer

HTML
1
star