postcss-image-set-polyfill

PostCSS plugin for polyfilling image-set CSS function.

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

/* Output example */
.foo {
    background-image: url(img/test.png);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .foo {
        background-image: url(img/test-2x.png);
    }
}


@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
    .foo {
        background-image: url(my-img-print.png);
    }
}

→Try it online←

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

Installation

npm i postcss-image-set-polyfill -D

️❕ NodeJS version must be 6+.

Usage

var postcssImageSet = require('postcss-image-set-polyfill');

postcss([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.

1.0.0 (March 7, 2019)

• update postcss version up to ^7.0.14
• node@v4.9.1 isn't supported anymore :<

0.4.4 (September 7, 2017)

• add media query for safari support #17

0.4.3 (July 16, 2017)

• fixed no error message bug

0.4.2 (July 16, 2017)

• fix old node compatibility

0.4.1 (July 16, 2017)

• fix bug with multiple brackets constructions #13

0.4.0 (July 14, 2017)

• add dpcm and dppx units support #14
• moved to ES6 #9
• improved error messages

0.3.5 (June 12, 2017)

• changed DPI ratio from 72 to 96 #11
• add decimal densites value support #8

0.3.4 (May 23, 2017)

• upgrade to postcss version 6.0.1 #6

0.3.3 (May 6, 2017)

• turn back to ES5 for better compatibility of old version of NodeJS

0.3.2 (May 1, 2017)

• fix styles order bug
• add multiple background values support

0.3.1 (February 25, 2017)

• limited possible property list

0.3.0 (February 25, 2017)

• add background property support #3

0.2.3 (February 14, 2017)

• fix media query bug

0.2.2 (February 11, 2017)

• remove gulp from dependencies

0.2.1 (February 9, 2017)

• dppx units have been replaced with dpi units for better browser compatibility
• Remove screen and from media-query

0.2.0 (February 6, 2017)

• Remove redundant original properties

0.1.0 (February 2, 2017)

• Fallback to background property have been replaced with polyfill

0.0.1 (April 4, 2015)

• Initial release