{"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":"anonymous","email":"jonathantneal@hotmail.com"},"dist":{"integrity":"sha512-B+uThZhN3rTRV7mjw3c+GCxIrBkHIAihnfZEb5Ig3+hauQMWGARD3j8UoMX7Hk6w4pBpMbm3Ggs9TVKvtn/kkA==","shasum":"1ef0913d90a9c4440495eb41624c202e53a703f3","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/@csstools/postcss-image-set-function/-/postcss-image-set-function-1.0.0.tgz","fileCount":5,"unpackedSize":12474,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIGA9bHVg1KpN/dOUnkk90UM+VAHCBvPPCwCFAlVe142sAh9aKoDP+83VVLct2JqUp9JFv1NZlHDufmjBUzjXOujd"}]},"maintainers":[{"name":"anonymous","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,"deprecated":"@csstools/postcss-image-set-function is deprecated. Please use, postcss-image-set-function instead","contributors":[]},"1.0.1":{"name":"@csstools/postcss-image-set-function","version":"1.0.1","description":"Display resolution-dependent images using the image-set() function in CSS","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"license":"CC0-1.0","repository":{"type":"git","url":"git+https://github.com/jonathantneal/postcss-image-set-function.git"},"homepage":"https://github.com/jonathantneal/postcss-image-set-function#readme","bugs":{"url":"https://github.com/jonathantneal/postcss-image-set-function/issues"},"main":"index.cjs.js","module":"index.es.js","scripts":{"prepublishOnly":"npm test","pretest":"rollup -c .rollup.js --silent","test":"echo 'Running tests...'; npm run test:js && npm run test:tape","test:ec":"echint --ignore index.*.js test","test:js":"eslint *.js --cache --ignore-path .gitignore --quiet","test:tape":"postcss-tape"},"engines":{"node":">=4.0.0"},"dependencies":{"postcss":"^6.0.22","postcss-values-parser":"^1.5.0"},"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^8.2.3","babel-preset-env":"^1.6.1","eslint":"^4.19.1","eslint-config-dev":"^2.0.0","postcss-tape":"^2.2.0","pre-commit":"^1.2.2","rollup":"^0.58.2","rollup-plugin-babel":"^3.0.4"},"eslintConfig":{"extends":"dev","parser":"babel-eslint"},"keywords":["postcss","css","postcss-plugin","image-set","background","image","responsive","resolution","negotiation","optimization"],"gitHead":"f9436809c6859b035bc619e4862c6255b89524d0","_id":"@csstools/postcss-image-set-function@1.0.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-MX6E/aBnWKLlUEC3kGKKN+Nv1Q4WANkB+cDdbIarmeSz8AbZ6e0l88aFj7Hr13r77tADofJySmf8Ju0zqySUVw==","shasum":"a8b4a2f77a3f58b09f916e99f4e1dcba808b4a53","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/@csstools/postcss-image-set-function/-/postcss-image-set-function-1.0.1.tgz","fileCount":5,"unpackedSize":23129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3gn9WIs0hYoBNFxiszUEez7ZAbnDLp4Pw/uXCCMHjkAiARkBGhbJw32rI9H1oyao9EQZq+JnZUI1Us+PJkaG+spA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisLhGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVFA//SDOa7YbPL/31S8C7DAI9sraM4cAYMBlqXTMqVZNFpbVBZ9bi\r\nE5Z8QeMJXHdp4iJp8SS9CQk1Fklo5zQricwZD9B4vPGGJ6ixVTutYUFzFd6q\r\nIZMt45lEBRx/VBz8vFxBWJAoOFd7M1PDyc5NUWapFRLMpD7CX0BcQ8AfCJN4\r\nrDmGv1Om5/Ov2y2gVe9yhpQVkN7A4uHbNbfJaHWsakPWKzAOzDSTLdqbWffw\r\n0kOW3ulWUw8VnIMhOkguTRD4ZbaT3i1yvRMBgoXf/FefOLJghe69fZnV+NoF\r\nhXKA79BeRyXHTZZy038P9QWPWgJ6t8i32vjmUTq9DK62qmHh1SenmRHsI7U6\r\nN8sKPi9IdyrkqpCLlAAGBep/nMCSJdo3wLoS26o+H/zKB0WJYv5kDWuGZivq\r\n0qCRYqrwmPskApdq8gQTdwrr7N991BmItOjiNoErKjQ4038uk2J98fU7pGng\r\nxPdjcWmUrJAypbFIHx4i7OaR3gDqFkVnqBDC9eEBRBmMd2uT1/SCGdNxGJZO\r\nF2v9dpXFDkd+xSy3a4gWf1u7niHBcf/vRQje/k135BylUce1kDEaRVcsuBC5\r\nPcQKze4S3LXLJ4LsmYsIc1T/4mqAlgCbsIwjzIxGrT79NZy81+3/F7C+9NH3\r\nEK36ClTzPn9mUcsl3cqDTTI1MvhbabAHXCc=\r\n=X5El\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"sombragriselros@gmail.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"sombragriselros@gmail.com"},{"name":"anonymous","email":"jonathantneal@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-image-set-function_1.0.1_1655748678493_0.6728613850108336"},"_hasShrinkwrap":false,"deprecated":"@csstools/postcss-image-set-function is deprecated. Please use, postcss-image-set-function instead","contributors":[]}},"dist-tags":{"latest":"1.0.1"},"name":"@csstools/postcss-image-set-function","time":{"created":"2022-01-28T03:08:52.882Z","1.0.0":"2018-03-18T23:27:21.882Z","modified":"2023-07-24T16:58:42.608Z","1.0.1":"2022-06-20T18:11:18.684Z"},"readme":"
⚠️ PostCSS image-set-polyfill() has been deprecated in favour of postcss-image-set-function. ⚠️
\n\n# PostCSS image-set() Function [\"PostCSS][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![CSS Standard Status][css-img]][css-url]\n[![Build Status][cli-img]][cli-url]\n[\"Discord\"][discord]\n\n[PostCSS image-set() Function] lets you display resolution-dependent images\nusing the `image-set()` function in CSS, following the [CSS Images]\nspecification.\n\n```pcss\n.example {\n background-image: image-set(\n url(img.png) 1x,\n url(img@2x.png) 2x,\n url(img@print.png) 600dpi\n );\n}\n\n/* becomes */\n\n@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {\n .example {\n background-image: url(img.png);\n }\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n .example {\n background-image: url(img@2x.png);\n }\n}\n\n\n@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {\n .example {\n background-image: url(my@print.png);\n }\n}\n\n.example {\n background-image: image-set(\n url(img.png) 1x,\n url(img@2x.png) 2x,\n url(img@print.png) 600dpi\n );\n}\n```\n\n## Usage\n\nAdd [PostCSS image-set() Function] to your build tool:\n\n```bash\nnpm install postcss-image-set-function --save-dev\n```\n\n#### Node\n\nUse [PostCSS image-set() Function] to process your CSS:\n\n```js\nimport postcssImageSetFunction from 'postcss-image-set-function';\n\npostcssImageSetFunction.process(YOUR_CSS, /* processOptions */, /* pluginOptions */);\n```\n\n#### PostCSS\n\nAdd [PostCSS] to your build tool:\n\n```bash\nnpm install postcss --save-dev\n```\n\nUse [PostCSS image-set() Function] as a plugin:\n\n```js\nimport postcss from 'gulp-postcss';\nimport postcssImageSetFunction from 'postcss-image-set-function';\n\npostcss([\n postcssImageSetFunction(/* pluginOptions */)\n]).process(YOUR_CSS);\n```\n\n#### Webpack\n\nAdd [PostCSS Loader] to your build tool:\n\n```bash\nnpm install postcss-loader --save-dev\n```\n\nUse [PostCSS image-set() Function] in your Webpack configuration:\n\n```js\nimport postcssImageSetFunction from 'postcss-image-set-function';\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n 'style-loader',\n { loader: 'css-loader', options: { importLoaders: 1 } },\n { loader: 'postcss-loader', options: {\n ident: 'postcss',\n plugins: () => [\n postcssImageSetFunction(/* pluginOptions */)\n ]\n } }\n ]\n }\n ]\n }\n}\n```\n\n#### Gulp\n\nAdd [Gulp PostCSS] to your build tool:\n\n```bash\nnpm install gulp-postcss --save-dev\n```\n\nUse [PostCSS image-set() Function] in your Gulpfile:\n\n```js\nimport postcss from 'gulp-postcss';\nimport postcssImageSetFunction from 'postcss-image-set-function';\n\ngulp.task('css', () => gulp.src('./src/*.css').pipe(\n postcss([\n postcssImageSetFunction(/* pluginOptions */)\n ])\n).pipe(\n gulp.dest('.')\n));\n```\n\n#### Grunt\n\nAdd [Grunt PostCSS] to your build tool:\n\n```bash\nnpm install grunt-postcss --save-dev\n```\n\nUse [PostCSS image-set() Function] in your Gruntfile:\n\n```js\nimport postcssImageSetFunction from 'postcss-image-set-function';\n\ngrunt.loadNpmTasks('grunt-postcss');\n\ngrunt.initConfig({\n postcss: {\n options: {\n use: [\n postcssImageSetFunction(/* pluginOptions */)\n ]\n },\n dist: {\n src: '*.css'\n }\n }\n});\n```\n\n## Options\n\n### preserve\n\nThe `preserve` option determines whether the original declaration using\n`image-set()` is preserved. By default, it is preserved.\n\n```js\npostcssImageSetFunction({ preserve: false })\n```\n\n```pcss\n.example {\n background-image: image-set(\n url(img.png) 1x,\n url(img@2x.png) 2x,\n url(img@print.png) 600dpi\n );\n}\n\n/* becomes */\n\n@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {\n .example {\n background-image: url(img.png);\n }\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n .example {\n background-image: url(img@2x.png);\n }\n}\n\n\n@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {\n .example {\n background-image: url(my@print.png);\n }\n}\n```\n\n### onvalid\n\nThe `oninvalid` option determines how invalid usage of `image-set()` should be\nhandled. By default, invalid usages of `image-set()` are ignored. They can be\nconfigured to display a `warning` or `throw` an error.\n\n```js\npostcssImageSetFunction({ oninvalid: 'warning' }) // warn on invalid usages\n```\n\n```js\npostcssImageSetFunction({ oninvalid: 'throw' }) // throw on invalid usages\n```\n\n[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-image-set-function.svg\n[cli-url]: https://travis-ci.org/jonathantneal/postcss-image-set-function\n[css-img]: https://cssdb.org/images/badges/image-set-function.svg\n[css-url]: https://cssdb.org/#image-set-function\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://shields.io/badge/npm-deprecated-red\n[npm-url]: https://www.npmjs.com/package/postcss-image-set-function\n[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-image-set-function.svg\n[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-image-set-function\n\n[CSS Images]: https://drafts.csswg.org/css-images-4/#image-set-notation\n[Gulp PostCSS]: https://github.com/postcss/gulp-postcss\n[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Loader]: https://github.com/postcss/postcss-loader\n[PostCSS image-set() Function]: https://github.com/jonathantneal/postcss-image-set-function\n[discord]: https://discord.gg/bUadyRwkJS","users":{}}