postcss-image-set-polyfill

PostCSS plugin for polyfilling image-set CSS function.

.foo {
  align-items: center;
  background-image: image-set(url(img/test.png) 1x,
                              url(img/test-2x.png) 2x,
                              url(my-img-print.png) 600dpi);
  color: black;
}

/* becomes */

.foo {
  align-items: center;
  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);
  }
}

.foo {
  color: black;
}

→Try it online←

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

Installation

npm i postcss-image-set-polyfill -D

Usage

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

postcss([postcssImageSet]).process(YOUR_CSS, /* options */);

See PostCSS docs for examples for your environment.

Option

preserve

The preserve option determines whether the original image-set() rule should or not should not be removed. By default, the original image-set() rule is removed.

postcssImageSet({ preserve: true })

.foo {
  align-items: center;
  background-image: image-set(url(img/test.png) 1x,
                              url(img/test-2x.png) 2x);
  color: black;
}

/* becomes */

.foo {
  align-items: center;
  background-image: url(img/test.png);
}

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

.foo {
  background-image: image-set(url(img/test.png) 1x,
                              url(img/test-2x.png) 2x);
  color: black;
}

⚠️️ Warning

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

Current Tags

• 1.0.0                                ...           latest (8 years ago)

1 Versions

• 1.0.0                                ...           8 years ago