# gulp-webp-css-splitter

## Example
Duplicate background images with webp. Add .webp and .no-webp classes. Minify result css

```css
// Input
.logo {
  width: 30px;
  height: 30px;
  background: url(/logo.png);
}

// Output (minified in reality)
.logo {
  width: 30px;
  height: 30px;
}
.webp .logo {
  background: url(/logo.webp);
}
.no-webp .logo {
  background: url(/logo.png);
}
```
## Install
```bash
npm i --save-dev gulp-webp-css-splitter
```
## Usage
```javascript
var webpCss = require('gulp-webp-css-splitter');

gulp.task('css', function () {
    gulp.src('./assets/css/*.css') // or .pipe(sass())
        .pipe(webpCss()) // or .pipe(webpCss(['.jpg','.jpeg']))
        .pipe(gulp.dest('./public/css/'))
});
```