{"_id":"@bung87/postcss-sprites","_rev":"2-593288764b77cc5217a39e21f5ce4750","name":"@bung87/postcss-sprites","dist-tags":{"latest":"4.2.2"},"versions":{"4.2.1":{"name":"@bung87/postcss-sprites","private":false,"version":"4.2.1","description":"Generate spritesheets from stylesheets","main":"lib/index.js","keywords":["postcss-plugin","postcss","css","spritesheet","spritesmith","sprite","png","svg"],"engines":{"npm":">= 5.0.0"},"scripts":{"test":"ava test/*.js --verbose --serial","build":"babel src/ --out-dir lib/","watch":"babel --watch src/ --out-dir lib/","prepublishOnly":"npm run build && npm test"},"repository":{"type":"git","url":"git+https://github.com/2createStudio/postcss-sprites.git"},"author":{"name":"2createStudio"},"license":"MIT","bugs":{"url":"https://github.com/2createStudio/postcss-sprites/issues"},"homepage":"https://github.com/2createStudio/postcss-sprites#readme","devDependencies":{"ava":"^0.15.2","babel-cli":"^6.4.0","babel-plugin-add-module-exports":"^0.2.1","babel-preset-es2015":"^6.3.13"},"dependencies":{"bluebird":"^3.1.1","debug":"^2.6.0","fs-extra":"^0.26.4","lodash":"^4.0.0","postcss":"^5.0.14","spritesmith":"^3.0.1","@bung87/svg-sprite":"^1.5.1"},"typings":"./typings.d.ts","gitHead":"2560f0e0cf791f551febed7361bdc69480262d16","_id":"@bung87/postcss-sprites@4.2.1","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-jALCTcxRjClFjm3CYLE5JKq9+H53KY+FTDOAQaAO4+nNfHYU61yW42wgvWntXREW4Abi6ifsy1dzCp/10dqvkw==","shasum":"6d82bc5f7a8b503564c2c9816512c9a420a23050","tarball":"https://registry.npmjs.org/@bung87/postcss-sprites/-/postcss-sprites-4.2.1.tgz","fileCount":21,"unpackedSize":58406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5mVhCRA9TVsSAnZWagAARcUP/izWgMCxS3H2jEtp0n1v\nTcCBfyUpoqj8WmHrOHHSWiOTdexTXJTEqdYfIbvXH6ehL2WtQA+qp5dOxr4a\nQV5oTCbs572lQ9+1mpYVRQEkKGlIOGJ0VPYmX0druL0PROLbj3PMzv+YKAnq\nzVIAcB78kzEPYCV/U0LWFLm6h2UA/EdBSUuEjG95YmdqGaT4m/xXCn8TsJ9D\n0V7gmqmQ1nruPsif+WdDIbxSyceTofOXQdg0kc6Ca99ogYWhkZdKyTv3XMjJ\nwzJk+eLzsDmGW8RAr1UavxdeKt10k7s+SmD5sAbSneC9m7vYvUDKjx7kA2uK\nyK5APt5jT5R18GfmrCsG6Me4GZFlV0fq6/7DNOxjOI1m9bXNg3P9vay8wYQb\nsB/4OiDxrMzLixDlpF4F1CM7ICOsQQsgzLY0qGFd+tY5aOR4rUuvv4GhxFYS\nS8GRGr00s3eImPCskOZB21zzrL21zlwvtyz9bdnrx5HkhO0FK5IbZAG0w/sN\nLhUOoqZJkvJYxGnUGVJ4PXQFQ3ipZfcHlaEnaPfq1reK7xo8O4bAeb6CMPUp\nYiUhDp1+tH0mYUjEYucwxe7ujnTA4dYi4xUhv5iN1GGRnnIIvwOAr2MKNnCK\nwZ/R20o82HQiDnxZmxZL/dST1p6KDyV1PMXJ1P0n8S9FuY680mRdD+1DIocF\nEOvo\r\n=3smP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOcl+tbV1WsNNx1G3OloUuJqNFVTdRfTYp724687qMwAiApccxS713HTS0FSE1F2WBhSEItU9BXhep9krqxKfhIFA=="}]},"maintainers":[{"name":"bung87","email":"crc32@qq.com"}],"_npmUser":{"name":"bung87","email":"crc32@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-sprites_4.2.1_1575380320819_0.33092676336327753"},"_hasShrinkwrap":false},"4.2.2":{"name":"@bung87/postcss-sprites","private":false,"version":"4.2.2","description":"Generate spritesheets from stylesheets","main":"lib/index.js","keywords":["postcss-plugin","postcss","css","spritesheet","spritesmith","sprite","png","svg"],"engines":{"npm":">= 5.0.0"},"scripts":{"test":"ava test/*.js --verbose --serial","build":"babel src/ --out-dir lib/","watch":"babel --watch src/ --out-dir lib/","prepublishOnly":"npm run build && npm test"},"repository":{"type":"git","url":"git+https://github.com/2createStudio/postcss-sprites.git"},"author":{"name":"2createStudio"},"license":"MIT","bugs":{"url":"https://github.com/2createStudio/postcss-sprites/issues"},"homepage":"https://github.com/2createStudio/postcss-sprites#readme","devDependencies":{"ava":"^0.15.2","babel-cli":"^6.4.0","babel-plugin-add-module-exports":"^0.2.1","babel-preset-es2015":"^6.3.13"},"dependencies":{"bluebird":"^3.1.1","debug":"^2.6.0","fs-extra":"^0.26.4","lodash":"^4.0.0","postcss":"^5.0.14","spritesmith":"^3.0.1","@bung87/svg-sprite":"^1.5.2"},"typings":"./typings.d.ts","gitHead":"10241577e2586c1d430529a7412e7cc90b124ec8","_id":"@bung87/postcss-sprites@4.2.2","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-Cx29Kc07q9omwQOGfZM6I77WQab6SixwWtIeVJWIGw7QwrMqxMLA/9m7hvipnmj7IVAWsNHuBd7FQ92iYtiWGw==","shasum":"7272d7d8b89e1ceb241b31fb2e3db6e031dfe55c","tarball":"https://registry.npmjs.org/@bung87/postcss-sprites/-/postcss-sprites-4.2.2.tgz","fileCount":21,"unpackedSize":58406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5mwiCRA9TVsSAnZWagAAeokP/jdh32MnxCmAbkXRq3Fw\nI+WEdfiVfM5gEwOtnQ7HOGU2uZsM3wRLpTDBZOCoUDDNI55pE9TaJWDJJNDz\n1KpU5Nq8b1K83SMR12816RLEf3ilCKP8A8R6y2xTaeDZf49ay+pNVKlpCoWF\nvV7zW16IS+jQTyL5ebrJEYXhUr86PtXrZh1FRc3ZbLFc5W9EP+ZH+VmPpUcz\n/UBOeycIEBnVvErUYIaWPmKlEKwP+24DwrYol7ib0tWurh5KaBKSbAnyHG5W\neOBEOlbRePk45Ad3dssDWa+CspFdJh+jub4HFOulShG3HtAvuBR/W+CzIp/2\nz1kv2vdwv7EeyZdhyT0S70son2TpjVlnDu6dF3rNj7JU+Rda2v9J7f75rJ1K\noXJRx9hkDHIpECtj8zPEIYqG7zORLQVrAZWTOZYQ+U6uftzJrrcxrVaxhYlG\nPT6wkW8tpBvf6KZMsUHUdjVFGIoJ7YHid96wqLynlwt4Obz+3SQZVYWBy3IO\nznZ4veYGVrYMKmK5xo2v3tixFC7eCFI7grrAFYf71uQMvIUx86rhJ77PUC2r\n8lFGx2Tvub6dXytfxD+9uSMFPovn2a1BX7uA1ol80TZwdgDLnDdeuYUiUAsk\nq1uLj7lyXzqW/kA1SftTnrLi07wvHj2ghBI3FUr044JLyi83cU5fpHMKdvjq\niPsU\r\n=bT6a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDWyh+IupFgp9i3xw3aXbxxfo0vbxjZk1Y4OiVxnsx7MAiA18NbIkWBkF6puJJSFerQpAIvyQ4lIWYO8G8xmA+5gOQ=="}]},"maintainers":[{"name":"bung87","email":"crc32@qq.com"}],"_npmUser":{"name":"bung87","email":"crc32@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-sprites_4.2.2_1575382050390_0.047621953048115895"},"_hasShrinkwrap":false}},"time":{"created":"2019-12-03T13:38:40.776Z","4.2.1":"2019-12-03T13:38:40.994Z","modified":"2022-04-04T21:06:11.101Z","4.2.2":"2019-12-03T14:07:30.509Z"},"maintainers":[{"name":"bung87","email":"crc32@qq.com"}],"description":"Generate spritesheets from stylesheets","homepage":"https://github.com/2createStudio/postcss-sprites#readme","keywords":["postcss-plugin","postcss","css","spritesheet","spritesmith","sprite","png","svg"],"repository":{"type":"git","url":"git+https://github.com/2createStudio/postcss-sprites.git"},"author":{"name":"2createStudio"},"bugs":{"url":"https://github.com/2createStudio/postcss-sprites/issues"},"license":"MIT","readme":"# postcss-sprites [![Build Status](https://travis-ci.org/2createStudio/postcss-sprites.svg?branch=master)](https://travis-ci.org/2createStudio/postcss-sprites) [![npm version](https://badge.fury.io/js/postcss-sprites.svg)](http://badge.fury.io/js/postcss-sprites)\n\n> [PostCSS](https://github.com/postcss/postcss) plugin that generates spritesheets from your stylesheets.\n\n```css\n/* Input */\n.comment { background: url(images/sprite/ico-comment.png) no-repeat 0 0; }\n.bubble { background: url(images/sprite/ico-bubble.png) no-repeat 0 0; }\n\n/* ---------------- */\n\n/* Output */\n.comment { background-image: url(images/sprite.png); background-position: 0 0; }\n.bubble { background-image: url(images/sprite.png); background-position: 0 -50px; }\n```\n\n----\n\n### Usage\n\n```javascript\nvar fs = require('fs');\nvar postcss = require('postcss');\nvar sprites = require('postcss-sprites');\n\nvar css = fs.readFileSync('./css/style.css', 'utf8');\nvar opts = {\n\tstylesheetPath: './dist',\n\tspritePath: './dist/images/'\n};\n\npostcss([sprites(opts)])\n\t.process(css, {\n\t\tfrom: './css/style.css',\n\t\tto: './dist/style.css'\n\t})\n\t.then(function(result) {\n\t\tfs.writeFileSync('./dist/style.css', result.css);\n\t});\n\n```\n\nSee [PostCSS](https://github.com/postcss/postcss) docs for examples for your environment.\n\n----\n\n### Options\n\n###### stylesheetPath\n\n> Relative path to the folder that will keep your output stylesheet(s). If it's null the path of CSS file will be used.\n\n- Default: null\n- Required: `false`\n\n###### spritePath\n\n> Relative path to the folder that will keep your output spritesheet(s).\n\n- Default: `./`\n- Required: `true`\n\n###### basePath\n\n> Your base path that will be used for images with absolute CSS urls.\n\n- Default: `./`\n- Required: `false`\n\n###### relativeTo\n\n> Indicates whether the url should be relative against current CSS context or original CSS stylesheet file.\n\n- Default: `file`\n- Required: `false`\n- Options: `file|rule`\n\n###### filterBy\n\n> Defines filter functions that will manipulate the list of images founded in your stylesheet(s).\n\n- Default: `[]`\n- Required: `false`\n- Options: `Function|Function[]`\n\n**Every function must return a ``Promise`` which should be resolved or rejected.**\n\nBuilt-in filters:\n\n- based on `fs.stat` and used to remove non exisiting images\n\n###### groupBy\n\n> Defines group functions that will manipulate the list of images founded in your stylesheet(s).\n\n- Default: `[]`\n- Required: `false`\n- Options: `Function|Function[]`\n\n**Every function must return a ``Promise`` which should be resolved with a string or rejected.**\n\nBuilt-in filters:\n\n- based on `@2x` naming convention\n\n###### retina\n\n> Defines whether or not to search for retina mark in the filename.\n\n- Default: `false`\n- Required: `false`\n\n###### hooks\n\n> Defines whether or not to search for retina mark in the filename.\n\n- Default: `{}`\n- Required: `false`\n\n###### hooks.onSaveSpritesheet\n\n> Hook that allows to rewrite the data of produced spritesheet.\n\n> If returned value is string, it is used as filepath value, and if returned value is object, it is used as value which will be merged with current spritesheet data.\n\n> Returned value can also be Promise which should return either string or object.\n\n- Default: `null`\n- Required: `false`\n\n###### hooks.onUpdateRule\n\n> Hook that allows to rewrite the CSS output for an image.\n\n- Default: `null`\n- Required: `false`\n\n###### spritesmith\n\n> A [spritesmith](https://github.com/Ensighten/spritesmith) configuration.\n\n- Default: `{}`\n- Required: `false`\n\n###### spritesmith.engine\n\n> The [engine](https://github.com/Ensighten/spritesmith#engines).\n\n- Default: `pixelsmith`\n- Required: `false`\n\n###### spritesmith.algorithm\n\n> The [algorithm](https://github.com/Ensighten/spritesmith#algorithms).\n\n- Default: `binary-tree`\n- Required: `false`\n\n###### spritesmith.padding\n\n> The space between images in spritesheet.\n\n- Default: `0`\n- Required: `false`\n\n###### spritesmith.engineOpts\n\n> The configuration of the [engine](https://github.com/Ensighten/spritesmith#engines).\n\n- Default: `{}`\n- Required: `false`\n\n###### spritesmith.exportOpts\n\n> The export options of the [engine](https://github.com/Ensighten/spritesmith#engines).\n\n- Default: `{}`\n- Required: `false`\n\n###### svgsprite\n\n> A [svg-sprite](https://github.com/jkphl/svg-sprite#configuration-basics) configuration.\n\n###### verbose\n\n> Prints the plugin output to the console.\n\n- Default: `false`\n- Required: `false`\n\n----\n\n### The Image\n\nEvery filter or group function will be called with an ``Image`` object.\n\n###### styleFilePath\n\n> An absolute path to the stylesheet - ``/Path/to/your/source/stylesheet.css``\n\n###### path\n\n> An absolute path to the image - ``/Path/to/your/image.png``\n\n###### originalUrl\n\n> The url found in your stylesheet including the query params - ``../image.png?v1``\n\n###### url\n\n> A normalized version of the original url - ``../image.png``\n\n###### ratio\n\n> The retina ratio of your image - ``2``\n\n###### retina\n\n> Indicates whenever your image is retina - ``true``\n\n###### groups\n\n> The groups associated with the image - ``['shapes', '@2x']``\n\n###### token\n\n> The string used as reference in your stylesheet - ``/* @replace|image.png */``\n\n###### coords\n\n> The position & dimensions of image in generated spritesheet - ``{ width: 20, height: 20, x: 0, y: 0 }``\n\n###### spritePath\n\n> A relative path to the generated spritesheet - ``dist/sprite.png``\n\n###### spriteUrl\n\n> A CSS url to the generated spritesheet - ``sprite.png``\n\n###### spriteWidth\n\n> The total width of the spritesheet - ``200``\n\n###### spriteHeight\n\n> The total height of the spritesheet - ``400``\n\n----\n\n### Advanced\n\n- [Filter By](examples/filter-by.md)\n- [Group By](examples/group-by.md)\n- [Output Dimensions](examples/output-dimensions.md)\n- [Skip Prefix](examples/skip-prefix.md)\n- [Responsive Spritesheets](examples/responsive-spritesheets.md)\n- [Relative To Rule](examples/relative-to-rule.md)\n- [Webpack Hot Load](examples/webpack-hot-load.md)\n\n----\n\n### Contributing\n\nPull requests are welcome.\n\n```\n$ git clone git@github.com:2createStudio/postcss-sprites.git\n$ npm install\n$ npm run watch\n```\n","readmeFilename":"README.md"}