postcss-image-set-polyfill

PostCSS plugin for polyfilling image-set CSS function for most browsers.

1/* Input example */
2.foo {
3    background-image: image-set(url(img/test.png) 1x,
4                                url(img/test-2x.png) 2x,
5                                url(my-img-print.png) 600dpi);
6}

1/* Output example */
2.foo {
3    background-image: url(img/test.png);
4}
5
6@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
7    .foo {
8        background-image: url(img/test-2x.png);
9    }
10}
11
12
13@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
14    .foo {
15        background-image: url(my-img-print.png);
16    }
17}

→Try it online←

❗️ Resolution media query is supported only by IE9+.

Installation

npm i postcss-image-set-polyfill -D

Usage

1var postcssImageSet = require('postcss-image-set-polyfill');
2
3postcss([postcssImageSet]).process(YOUR_CSS, /* options */);

See PostCSS docs for examples for your environment.

⚠️️ Warning

If you use autoprefixer, place this plugin before it to prevent styles duplication.