{"id":14968175,"url":"https://github.com/2createstudio/postcss-sprites","last_synced_at":"2025-05-16T13:06:27.576Z","repository":{"id":32763523,"uuid":"36354941","full_name":"2createStudio/postcss-sprites","owner":"2createStudio","description":"Generate sprites from stylesheets.","archived":false,"fork":false,"pushed_at":"2021-11-17T07:35:52.000Z","size":156,"stargazers_count":413,"open_issues_count":10,"forks_count":50,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-03T11:08:49.344Z","etag":null,"topics":["css","postcss","postcss-plugin","sprites","spritesheets","spritesmith","svg","svg-sprites"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/2createStudio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-27T08:50:43.000Z","updated_at":"2025-03-26T23:01:12.000Z","dependencies_parsed_at":"2022-07-12T16:09:47.783Z","dependency_job_id":null,"html_url":"https://github.com/2createStudio/postcss-sprites","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2createStudio%2Fpostcss-sprites","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2createStudio%2Fpostcss-sprites/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2createStudio%2Fpostcss-sprites/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2createStudio%2Fpostcss-sprites/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/2createStudio","download_url":"https://codeload.github.com/2createStudio/postcss-sprites/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248544828,"owners_count":21122036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","postcss","postcss-plugin","sprites","spritesheets","spritesmith","svg","svg-sprites"],"created_at":"2024-09-24T13:39:27.926Z","updated_at":"2025-04-12T09:24:23.066Z","avatar_url":"https://github.com/2createStudio.png","language":"JavaScript","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\u003e [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\u003e 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\u003e Relative path to the folder that will keep your output spritesheet(s).\n\n- Default: `./`\n- Required: `true`\n\n###### basePath\n\n\u003e Your base path that will be used for images with absolute CSS urls.\n\n- Default: `./`\n- Required: `false`\n\n###### relativeTo\n\n\u003e 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\u003e 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\u003e 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\u003e Defines whether or not to search for retina mark in the filename.\n\n- Default: `false`\n- Required: `false`\n\n###### hooks\n\n\u003e Defines whether or not to search for retina mark in the filename.\n\n- Default: `{}`\n- Required: `false`\n\n###### hooks.onSaveSpritesheet\n\n\u003e Hook that allows to rewrite the data of produced spritesheet.\n\n\u003e 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\u003e 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\u003e Hook that allows to rewrite the CSS output for an image.\n\n- Default: `null`\n- Required: `false`\n\n###### spritesmith\n\n\u003e A [spritesmith](https://github.com/Ensighten/spritesmith) configuration.\n\n- Default: `{}`\n- Required: `false`\n\n###### spritesmith.engine\n\n\u003e The [engine](https://github.com/Ensighten/spritesmith#engines).\n\n- Default: `pixelsmith`\n- Required: `false`\n\n###### spritesmith.algorithm\n\n\u003e The [algorithm](https://github.com/Ensighten/spritesmith#algorithms).\n\n- Default: `binary-tree`\n- Required: `false`\n\n###### spritesmith.padding\n\n\u003e The space between images in spritesheet.\n\n- Default: `0`\n- Required: `false`\n\n###### spritesmith.engineOpts\n\n\u003e The configuration of the [engine](https://github.com/Ensighten/spritesmith#engines).\n\n- Default: `{}`\n- Required: `false`\n\n###### spritesmith.exportOpts\n\n\u003e The export options of the [engine](https://github.com/Ensighten/spritesmith#engines).\n\n- Default: `{}`\n- Required: `false`\n\n###### svgsprite\n\n\u003e A [svg-sprite](https://github.com/jkphl/svg-sprite#configuration-basics) configuration.\n\n###### verbose\n\n\u003e 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\u003e An absolute path to the stylesheet - ``/Path/to/your/source/stylesheet.css``\n\n###### path\n\n\u003e An absolute path to the image - ``/Path/to/your/image.png``\n\n###### originalUrl\n\n\u003e The url found in your stylesheet including the query params - ``../image.png?v1``\n\n###### url\n\n\u003e A normalized version of the original url - ``../image.png``\n\n###### ratio\n\n\u003e The retina ratio of your image - ``2``\n\n###### retina\n\n\u003e Indicates whenever your image is retina - ``true``\n\n###### groups\n\n\u003e The groups associated with the image - ``['shapes', '@2x']``\n\n###### token\n\n\u003e The string used as reference in your stylesheet - ``/* @replace|image.png */``\n\n###### coords\n\n\u003e The position \u0026 dimensions of image in generated spritesheet - ``{ width: 20, height: 20, x: 0, y: 0 }``\n\n###### spritePath\n\n\u003e A relative path to the generated spritesheet - ``dist/sprite.png``\n\n###### spriteUrl\n\n\u003e A CSS url to the generated spritesheet - ``sprite.png``\n\n###### spriteWidth\n\n\u003e The total width of the spritesheet - ``200``\n\n###### spriteHeight\n\n\u003e 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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2createstudio%2Fpostcss-sprites","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F2createstudio%2Fpostcss-sprites","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2createstudio%2Fpostcss-sprites/lists"}