node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

rework-image-set

rework-image-set Build Status js-standard-style

Rework plugin to add future-proofed support for W3C-style image set notation. This provides a backround-image fallback for browsers that don't support image-set.

Installation

npm install --save rework-image-set

Usage

var fs = require('fs')
var rework = require('rework')
var imageSet = require('rework-image-set')
 
var css = fs.readFileSync('css/my-file.css', 'utf8').toString()
var out = rework(css).use(imageSet()).toString()

Input

.bg-img {
  background-image: image-set('my-img.png' 1x,
                              'my-img-2x.png' 2x,
                              'my-img-print.png' 600dpi);
}

Output

.bg-img {
  background-image: url('my-img.png');
  background-image: image-set('my-img.png' 1x,
                              'my-img-2x.png' 2x,
                              'my-img-print.png' 600dpi);
}

Note: This functionality currently requires CSS prefixing, it's recommended to use autoprefixer.

License

MIT

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Crafted with <3 by John Otander (@4lpine).