# pleeease-filters

> Convert CSS shorthand filters to SVG ones

Latest version **4.0.0** (published 2017-05-09) · 0 weekly downloads

## Install

```sh
npm install pleeease-filters
pnpm add pleeease-filters
yarn add pleeease-filters
bun add pleeease-filters
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2017-05-09 |
| First published | 2014-07-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 96 |
| Author | Vincent De Oliveira |
| Maintainers | iamvdo |
| Keywords | postprocessor, css, postcss, pleeease, filters |

## Links

- npm: https://www.npmjs.com/package/pleeease-filters
- Repository: https://github.com/iamvdo/pleeease-filters
- Homepage: https://github.com/iamvdo/pleeease-filters#readme
- Issues: https://github.com/iamvdo/pleeease-filters/issues
- npm.io page: https://npm.io/package/pleeease-filters

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^6.0.1
- [onecolor](https://npm.io/package/onecolor.md) ^3.0.4

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2017-05-09
- 3.0.1 — 2017-02-07
- 3.0.0 — 2016-04-01
- 2.0.0 — 2015-09-14
- 1.0.1 — 2015-05-25
- 1.0.0 — 2015-01-27
- 0.1.5 — 2014-12-23
- 0.1.4 — 2014-12-11
- 0.1.3 — 2014-07-07
- 0.1.2 — 2014-07-02
- 0.1.1 — 2014-07-02
- 0.1.0 — 2014-07-02

## README

Pleeease: filters
=================

Convert CSS shorthand filters to SVG equivalent.

Used by [Pleeease](https://github.com/iamvdo/pleeease), a CSS post-processor.

Try it by yourself in the [Pleeease playground](http://pleeease.io/playground.html?div%20%7B%0A%20%20filter:%20blur(4px)%0A%7D)

##Example

You write `foo.css`:

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

You get `bar.css`:

```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](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)

##Prefixes

This tool doesn't add prefixes. If you want them, you should use [Autoprefixer](https://github.com/ai/autoprefixer). This is what [Pleeease](https://github.com/iamvdo/pleeease) does:

```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');
	-webkit-filter: blur(4px);
	        filter: blur(4px);
}
```

##Usage

	$ npm install pleeease-filters

```javascript
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:

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

Using the first example, you'll get:

```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);
	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](http://caniuse.com/#feat=svg-filters) for more info.

##Licence

MIT © 2014 [Vincent De Oliveira &middot; iamvdo](https://github.com/iamvdo)

This module is an adaptation of [CSS-Filters-Polyfill](https://github.com/Schepp/CSS-Filters-Polyfill). Copyright (c) 2012 - 2013 Christian Schepp Schaefer

---
_Source: https://npm.io/package/pleeease-filters · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._