{"id":20410367,"url":"https://github.com/jeff2ma/postcss-lazysprite","last_synced_at":"2025-07-07T06:10:22.681Z","repository":{"id":57328178,"uuid":"77692107","full_name":"Jeff2Ma/postcss-lazysprite","owner":"Jeff2Ma","description":"A PostCSS plugin that automatic generates sprites from the directory of images with hight perfomance.","archived":false,"fork":false,"pushed_at":"2021-08-10T11:07:41.000Z","size":553,"stargazers_count":31,"open_issues_count":4,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T19:50:04.699Z","etag":null,"topics":["css","generates-sprites","postcss","postcss-plugin","retina-support","sprites","spritesmith","stylesheets","svg-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/Jeff2Ma.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":"2016-12-30T14:50:01.000Z","updated_at":"2023-07-14T13:05:15.000Z","dependencies_parsed_at":"2022-08-23T14:01:12.771Z","dependency_job_id":null,"html_url":"https://github.com/Jeff2Ma/postcss-lazysprite","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jeff2Ma%2Fpostcss-lazysprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jeff2Ma%2Fpostcss-lazysprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jeff2Ma%2Fpostcss-lazysprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jeff2Ma%2Fpostcss-lazysprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jeff2Ma","download_url":"https://codeload.github.com/Jeff2Ma/postcss-lazysprite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248593591,"owners_count":21130310,"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","generates-sprites","postcss","postcss-plugin","retina-support","sprites","spritesmith","stylesheets","svg-sprites"],"created_at":"2024-11-15T05:45:51.697Z","updated_at":"2025-04-12T16:03:25.850Z","avatar_url":"https://github.com/Jeff2Ma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-lazysprite\n\n\u003cimg align=\"right\" width=\"130\" height=\"130\" title=\"PostCSS\" src=\"http://postcss.github.io/postcss/logo.svg\"\u003e\n\n[![Build Status](https://travis-ci.org/Jeff2Ma/postcss-lazysprite.svg?branch=master)](https://travis-ci.org/Jeff2Ma/postcss-lazysprite)\n[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/Jeff2Ma/postcss-lazysprite?branch=master\u0026svg=true)](https://ci.appveyor.com/project/Jeff2Ma/postcss-lazysprite)\n[![npm version](https://badge.fury.io/js/postcss-lazysprite.svg)](https://www.npmjs.com/package/postcss-lazysprite)\n[![change-log](https://img.shields.io/badge/changelog-md-blue.svg)](https://github.com/Jeff2Ma/postcss-lazysprite/blob/master/CHANGELOG.md)\n\nA [PostCSS](https://github.com/postcss/postcss) plugin that generates sprites from the directory of images automatically.\n\nA lazy way to generate sprites and proper CSS with retina support. Feel free to use it :)\n\n## Example\n\n[Demo Example](https://res.devework.com/2018/postcss-lazysprite/html/index.html)\n\n### Input\n\n```CSS\n/* ./src/css/index.css */\n@lazysprite \"filetype\";\n```\n\n### Output\n\n```CSS\n/* ./dist/css/index.css */\n.icon-filetype__excel {\n\tbackground-image: url(../sprites/filetype.png);\n\tbackground-position: 0 0;\n\twidth: 32px;\n\theight: 32px;\n}\n.icon-filetype__pdf {\n\tbackground-image: url(../sprites/filetype.svg);\n\tbackground-position: 0 0;\n\twidth: 32px;\n\theight: 32px;\n}\n.icon-filetype__ppt {\n\tbackground-image: url(../sprites/filetype.png);\n\tbackground-position: -32px 0;\n\twidth: 32px;\n\theight: 32px;\n}\n.icon-filetype__word {\n\tbackground-image: url(../sprites/filetype.svg);\n\tbackground-position: -32px 0;\n\twidth: 32px;\n\theight: 32px;\n}\n\n@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio:2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (min-device-pixel-ratio:2), only screen and (min-resolution:2dppx), only screen and (min-resolution:192dpi) {\n\t.icon-filetype__excel {\n\t\tbackground-image: url(../sprites/filetype@2x.png);\n\t\tbackground-position: 0 0;\n\t\tbackground-size: 64px 32px;\n\t}\n\t.icon-filetype__ppt {\n\t\tbackground-image: url(../sprites/filetype@2x.png);\n\t\tbackground-position: -32px 0;\n\t\tbackground-size: 64px 32px;\n\t}\n}\n```\n\n### File tree\n\n\u003e Just a example for above output result, you can dynamic yourself with options.\n\n```\n.\t\t\t\n├── gulpfile.js\n├── dist\n└── src\n    ├── css\n    │   └── index.css\n    ├── html\n    │   └── index.html\n    └── slice\n        └── filetype\n            ├── excel.png\n            ├── excel_2x.png\n            ├── pdf.svg\n            ├── ppt.png\n            ├── ppt@2x.png\n            └── word.svg\n```\n\nMore examples with different options: [nameSpace](./examples/nameSpace.md), [outputDimensions](./examples/outputDimensions.md), [dynamicClassBlock](./examples/dynamicClassBlock.md), [pseudoClass](./examples/pseudoClass.md)\n\n## Features\n\n- Simple and easy, just need to put your images to the special folder.\n\n- Retina support (`@2x`, `@3x`, `_2x`, `_3x` are all available).\n\n- Support SVG Sprites. [Demo](https://res.devework.com/2018/postcss-lazysprite/html/index.html)\n\n- Fully work well with Source Map.\n\n- Cache way and good perfomance to run faster.\n\n- Support sprites with`:hover`、`:active` condition([example](./examples/pseudoClass.md)).\n\n## User\n\n[WeChat for Work](https://work.weixin.qq.com) and [Wechat Reader](https://weread.qq.com) are using `postcss-lazysprite` in production.\n\n\u003ca href=\"https://work.weixin.qq.com\"\u003e\u003cimg width=\"104\" height=\"32\" title=\"WeChat for Work\" src=\"./examples/src/slice/logo/WeWork@2x.png\" alt=\"WeChat for Work\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://weread.qq.com\"\u003e\u003cimg width=\"104\" height=\"32\" title=\"Wechat Reader\" src=\"./examples/src/slice/logo/WeRead@2x.png\" alt=\"Wechat Reader\"\u003e\u003c/a\u003e\n\n\n## Installation\n\n```bash\nnpm install postcss-lazysprite --save\n```\n\n## Usage\n\nWork with [Gulp](http://gulpjs.com/)\n\nExample:\n\n```javascript\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\nvar lazysprite = require('postcss-lazysprite');\n\ngulp.task('css', function () {\n\treturn gulp.src('./test/src/css/**/*.css')\n\t\t.pipe(postcss([lazysprite({\n\t\t\timagePath:'./test/src/slice',\n\t\t\tstylesheetInput: './test/src/css',\n\t\t\tstylesheetRelative: './test/dist/css',\n\t\t\tspritePath: './test/dist/slice',\n\t\t\tnameSpace: 'icon-'\n\t\t})]))\n\t\t.pipe(gulp.dest('./test/dist/css'));\n});\n```\n\n## Options\n\n#### imagePath\n\n\u003e Relative path to the folder that sprite images are stored. For resolving absolute images. This option also as the base relative to the value of `@lazysprite` which is what you output.\n\n- Default: null\n- Required: `true`\n\n\n#### stylesheetInput\n\n\u003e The directory that store css(or scss/less) source files. If you are use gulp.js, simply the value of `gulp.src` without the part of `**` and so on.\n\n- Default: null\n- Required: `true`\n\n#### stylesheetRelative\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: `false`\n\n#### nameSpace\n\n\u003e NameSpace(Prefix) of the class name of each image.\n\n- Default: null\n- Required: `false`\n\n#### logLevel\n\n\u003e Deside which level to output log. Can be either \"debug\", \"info\", or \"silent\".\n \n```javascript\n// Show me additional info about the process\nlogLevel: \"debug\"\n\n// Just show basic info\nlogLevel: \"info\"\n\n// output NOTHING except alert\nlogLevel: \"silent\"\n```\n\n- Default: `info`\n- Required: `false`\n\n#### cssSeparator\n\n\u003e Separator between css selector's 'block' and 'element'. In this plugin. 'block' is equal to file dirname or dynamic one, 'element' is the base name of file.\n\n- Default: `'__'`\n- Required: `false`\n\n#### retinaInfix\n\n\u003e Deside the created sprite retina file is whether '@2x' or '_2x' as part of name.\n\n- Default: `@`\n- Required: `false`\n\n#### outputExtralCSS\n\n\u003e Deside whether output extral css details, which list like:\n\n```css\n.icon-filetype {\n    display: inline-block;\n    overflow: hidden;\n    font-size: 0;\n    line-height: 0;\n}\n```\n\nwhen set this option as `true`, the html sould like:\n\n```html\n\u003ci class=\"icon-filetype icon-filetype__doc\"\u003e\u003c/i\u003e\n```\n\n- Default: `false`\n- Required: `false`\n\n#### pseudoClass\n\n\u003e If the file naming with `Hover`or `Active` as suffix，it will turn to   the `:hover` or `:active` pseudo class.([example](./examples/pseudoClass.md))\n\n- Default: `false`\n- Required: `false`\n\n#### outputDimensions\n\n\u003e Deside whether output `width` \u0026 `height` properties.\n\n- Default: `true`\n- Required: `false`\n\n#### keepBackGroundSize\n\n\u003e add `background-size` attribute when 1x.\n\n- Default: `false`\n- Required: `false`\n\n## Contributing\n\nThanks the inspirations from [postcss-sprites](https://github.com/2createStudio/postcss-sprites) plugin.\n\n[Issues](https://github.com/Jeff2Ma/postcss-lazysprite/issues) and [Pull requests](https://github.com/Jeff2Ma/postcss-lazysprite/pulls) are welcome.\n\n```bash\n$ git clone https://github.com/Jeff2Ma/postcss-lazysprite\n$ cd postcss-lazysprite\n$ npm i\n$ gulp # for dev\n$ gulp test # for test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeff2ma%2Fpostcss-lazysprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeff2ma%2Fpostcss-lazysprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeff2ma%2Fpostcss-lazysprite/lists"}