{"id":13493850,"url":"https://github.com/glebmachine/postcss-easysprites","last_synced_at":"2025-04-11T05:37:38.894Z","repository":{"id":2311231,"uuid":"46213671","full_name":"glebmachine/postcss-easysprites","owner":"glebmachine","description":"Easy sprites for postcss. Just append `#spritename` to the end of image url. No complicated mechanism or strict folder structure.","archived":false,"fork":false,"pushed_at":"2025-01-28T13:09:42.000Z","size":3753,"stargazers_count":61,"open_issues_count":9,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T13:37:18.753Z","etag":null,"topics":["assets-management","postcss","postprocessing","retina-images","sprites"],"latest_commit_sha":null,"homepage":"","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/glebmachine.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-11-15T10:47:29.000Z","updated_at":"2024-08-12T10:52:00.000Z","dependencies_parsed_at":"2023-10-10T14:39:51.192Z","dependency_job_id":"57bb3ad7-c9a6-4d30-a1f3-ee1d7527273c","html_url":"https://github.com/glebmachine/postcss-easysprites","commit_stats":{"total_commits":183,"total_committers":11,"mean_commits":"16.636363636363637","dds":0.5956284153005464,"last_synced_commit":"f631620f1f3955dbfc376c277bb34532405144f4"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glebmachine%2Fpostcss-easysprites","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glebmachine%2Fpostcss-easysprites/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glebmachine%2Fpostcss-easysprites/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glebmachine%2Fpostcss-easysprites/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glebmachine","download_url":"https://codeload.github.com/glebmachine/postcss-easysprites/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248232380,"owners_count":21069487,"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":["assets-management","postcss","postprocessing","retina-images","sprites"],"created_at":"2024-07-31T19:01:19.385Z","updated_at":"2025-04-11T05:37:38.872Z","avatar_url":"https://github.com/glebmachine.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Easysprite [![Build Status](https://travis-ci.org/glebmachine/postcss-easysprites.svg?branch=master)](https://travis-ci.org/glebmachine/postcss-easysprites) [![npm version](https://badge.fury.io/js/postcss-easysprites.svg)](http://badge.fury.io/js/postcss-easysprites) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n## Usage\n\nJust append `#spritename` to the end of the image url. No complicated mechanism or strict folder structure is needed.\n\n## Retina\n\nThe plugin moves all retina images with any ratio to a separate sprite. To achieve this all retina images should be declared with a `@2x` suffix (where number is the image ratio.)\n\n## Caching/performance\n\nProjects with a large number of sprites can take a long time to compile. The help with this, the plugin checks files against a md5 hash to only compile new/changed sprites. This does not yet work for the [first time a sprite is generated](https://github.com/glebmachine/postcss-easysprites/issues/5).\n\n## Relative/absolute paths\n\nThe plugin supports both relative and absolute paths on input file, but can currently only [generate relative paths on output file](https://github.com/glebmachine/postcss-easysprites/issues/4).\n\n## Plugin options\n\n| Option | Description | Default |\n| --- | --- | --- |\n| `imagePath` | Path for resolving absolute images. | `process.cwd()` |\n| `spritePath` | Path to use for saving the generated sprites file(s). | `process.cwd()` |\n| `stylesheetPath` | Path for resolving relative images (overriding options, css file folder used for default.) | `''` |\n| `padding` | The amount of space in pixels to put around images in the sprite. _**Note:**_ This value will be scaled proportionally for retina images. | `20` |\n| `outputDimensions` | Whether to also output the pixel `height` and `width` of the image. | `false` |\n| `algorithm` | The [layout algorithm](https://github.com/twolfson/layout) spritesmith should use. | `binary-tree` |\n| `outputStylesheetPath` | Optional. Path of the final CSS file. If defined, sprite urls are relative to this path. | `undefined` |\n\n## Input example\n\n```css\n.arrow {\n  background-image: url('images/arrow-next.png#elements');\n}\n.arrow:hover {\n  background-image: url('images/arrow-next--hover.png#elements');\n}\n\n@media only screen and (min-resolution: 1.5dppx) {\n  .arrow {\n    background-image: url('images/arrow-next@2x.png#elements');\n  }\n  .arrow:hover {\n    background-image: url('images/arrow-next--hover@2x.png#elements');\n  }\n}\n\n@media only screen and (min-resolution: 2.5dppx) {\n  .arrow {\n    background-image: url('images/arrow-next@3x.png#elements');\n  }\n  .arrow:hover {\n    background-image: url('images/arrow-next--hover@3x.png#elements');\n  }\n}\n```\n\n## Output example\n\n```css\n.arrow {\n  background-image: url(sprites/elements.png);\n  background-position: 0 0;\n}\n\n.arrow:hover {\n  background-image: url(sprites/elements.png);\n  background-position: -48px 0;\n}\n\n@media only screen and (min-resolution: 1.5dppx) {\n  .arrow {\n    background-image: url(sprites/elements@2x.png);\n    background-position: 0 0;\n    background-size: 76px 27px;\n  }\n\n  .arrow:hover {\n    background-image: url(sprites/elements@2x.png);\n    background-position: -48px 0;\n    background-size: 76px 27px;\n  }\n}\n\n@media only screen and (min-resolution: 2.5dppx) {\n  .arrow {\n    background-image: url(sprites/elements@3x.png);\n    background-position: 0 0;\n    background-size: 76px 27px;\n  }\n\n  .arrow:hover {\n    background-image: url(sprites/elements@3x.png);\n    background-position: -48px 0;\n    background-size: 76px 27px;\n  }\n}\n```\n\n## PostCSS Usage\n\n```js\npostcss([\n  easysprite({\n    imagePath: './public/images',\n    spritePath: './public/sprites',\n  }),\n]);\n```\n\nSee the [PostCSS](https://postcss.org) docs for examples of your particular environment.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglebmachine%2Fpostcss-easysprites","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglebmachine%2Fpostcss-easysprites","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglebmachine%2Fpostcss-easysprites/lists"}