{"_id":"@csstools/postcss-image-set-function","_rev":"322770","name":"@csstools/postcss-image-set-function","description":"Deliver the most appropriate image resolution for a device using the image-set() function in CSS","dist-tags":{"latest":"1.0.0"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"time":{"modified":"2021-06-04T01:29:26.000Z","created":"2018-03-18T23:27:21.882Z","1.0.0":"2018-03-18T23:27:21.882Z"},"users":{},"author":{"name":"SuperOl3g","email":"oleglykasov@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/jonathantneal/postcss-image-set-polyfill.git"},"versions":{"1.0.0":{"name":"@csstools/postcss-image-set-function","version":"1.0.0","description":"Deliver the most appropriate image resolution for a device using the image-set() function in CSS","keywords":["postcss","css","postcss-plugin","image-set","background","image"],"author":{"name":"SuperOl3g","email":"oleglykasov@gmail.com"},"license":"MIT","engines":{"node":">=4.0.0"},"repository":{"type":"git","url":"git+https://github.com/jonathantneal/postcss-image-set-polyfill.git"},"dependencies":{"postcss":"^6.0.20","postcss-value-parser":"^3.3.0"},"devDependencies":{"benchmark":"^2.1.4","chai":"^4.1.2","eslint":"^4.19.0","husky":"^0.14.3","mocha":"^5.0.4"},"scripts":{"test":"mocha","lint":"eslint *.js **/*.js || true","benchmark":"node benchmark.js","precommit":"npm run lint","prepush":"npm test"},"gitHead":"445d5cff9916cd4ed35893f2ea40a546ddf6f76a","bugs":{"url":"https://github.com/jonathantneal/postcss-image-set-polyfill/issues"},"homepage":"https://github.com/jonathantneal/postcss-image-set-polyfill#readme","_id":"@csstools/postcss-image-set-function@1.0.0","_npmVersion":"5.7.1","_nodeVersion":"9.8.0","_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"dist":{"shasum":"1ef0913d90a9c4440495eb41624c202e53a703f3","size":4611,"noattachment":false,"key":"/@csstools/postcss-image-set-function/-/@csstools/postcss-image-set-function-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@csstools/postcss-image-set-function/download/@csstools/postcss-image-set-function-1.0.0.tgz"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-image-set-function_1.0.0_1521415641793_0.5266684509668433"},"_hasShrinkwrap":false,"publish_time":1521415641882,"_cnpm_publish_time":1521415641882}},"readme":"\n# postcss-image-set-polyfill [![CSS Standard Status](https://jonathantneal.github.io/css-db/badge/css-images-image-set-notation.svg)](https://jonathantneal.github.io/css-db/#css-images-image-set-notation) [![Build Status](https://travis-ci.org/SuperOl3g/postcss-image-set-polyfill.svg)](https://travis-ci.org/SuperOl3g/postcss-image-set-polyfill) [![npm version](https://badge.fury.io/js/postcss-image-set-polyfill.svg)](https://badge.fury.io/js/postcss-image-set-polyfill)\n\n[PostCSS] plugin for [polyfilling](http://caniuse.com/#feat=css-image-set) [`image-set`](https://drafts.csswg.org/css-images-4/#image-set-notation) CSS function.\n\n[PostCSS]: https://github.com/postcss/postcss\n\n```css\n.foo {\n  align-items: center;\n  background-image: image-set(url(img/test.png) 1x,\n                              url(img/test-2x.png) 2x,\n                              url(my-img-print.png) 600dpi);\n  color: black;\n}\n\n/* becomes */\n\n.foo {\n  align-items: center;\n  background-image: url(img/test.png);\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .foo {\n    background-image: url(img/test-2x.png);\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {\n  .foo {\n    background-image: url(my-img-print.png);\n  }\n}\n\n.foo {\n  color: black;\n}\n```\n<a href=\"https://astexplorer.net/#/gist/86d1248cc4628f850454d3191c95efec/3bbf606fe0ef2662917a845aa16a715d06435650\" target=\"_blank\">→Try it online←</a>\n\n\n❗️ Resolution media query is supported only by IE9+.\n\n## Installation\n\n`npm i postcss-image-set-polyfill -D`\n\n## Usage\n\n```js\nvar postcssImageSet = require('postcss-image-set-polyfill');\n\npostcss([postcssImageSet]).process(YOUR_CSS, /* options */);\n```\n\nSee [PostCSS] docs for examples for your environment.\n\n## Option\n\n### preserve\n\nThe `preserve` option determines whether the original `image-set()` rule should\nor not should not be removed. By default, the original `image-set()` rule is\nremoved.\n\n```js\npostcssImageSet({ preserve: true })\n```\n\n```css\n.foo {\n  align-items: center;\n  background-image: image-set(url(img/test.png) 1x,\n                              url(img/test-2x.png) 2x);\n  color: black;\n}\n\n/* becomes */\n\n.foo {\n  align-items: center;\n  background-image: url(img/test.png);\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .foo {\n    background-image: url(img/test-2x.png);\n  }\n}\n\n.foo {\n  background-image: image-set(url(img/test.png) 1x,\n                              url(img/test-2x.png) 2x);\n  color: black;\n}\n```\n\n### ⚠️️ Warning\n\nIf you use [autoprefixer](https://github.com/postcss/autoprefixer), place this plugin before it to prevent styles duplication.\n","_attachments":{},"homepage":"https://github.com/jonathantneal/postcss-image-set-polyfill#readme","bugs":{"url":"https://github.com/jonathantneal/postcss-image-set-polyfill/issues"},"license":"MIT"}