Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeff2ma/postcss-lazysprite
A PostCSS plugin that automatic generates sprites from the directory of images with hight perfomance.
https://github.com/jeff2ma/postcss-lazysprite
css generates-sprites postcss postcss-plugin retina-support sprites spritesmith stylesheets svg-sprites
Last synced: about 2 hours ago
JSON representation
A PostCSS plugin that automatic generates sprites from the directory of images with hight perfomance.
- Host: GitHub
- URL: https://github.com/jeff2ma/postcss-lazysprite
- Owner: Jeff2Ma
- License: mit
- Created: 2016-12-30T14:50:01.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T11:07:41.000Z (over 3 years ago)
- Last Synced: 2024-11-14T09:43:44.396Z (about 22 hours ago)
- Topics: css, generates-sprites, postcss, postcss-plugin, retina-support, sprites, spritesmith, stylesheets, svg-sprites
- Language: JavaScript
- Homepage:
- Size: 540 KB
- Stars: 31
- Watchers: 4
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-lazysprite
[](https://travis-ci.org/Jeff2Ma/postcss-lazysprite)
[](https://ci.appveyor.com/project/Jeff2Ma/postcss-lazysprite)
[](https://www.npmjs.com/package/postcss-lazysprite)
[](https://github.com/Jeff2Ma/postcss-lazysprite/blob/master/CHANGELOG.md)
A [PostCSS](https://github.com/postcss/postcss) plugin that generates sprites from the directory of images automatically.
A lazy way to generate sprites and proper CSS with retina support. Feel free to use it :)
## Example
[Demo Example](https://res.devework.com/2018/postcss-lazysprite/html/index.html)
### Input
```CSS
/* ./src/css/index.css */
@lazysprite "filetype";
```
### Output
```CSS
/* ./dist/css/index.css */
.icon-filetype__excel {
background-image: url(../sprites/filetype.png);
background-position: 0 0;
width: 32px;
height: 32px;
}
.icon-filetype__pdf {
background-image: url(../sprites/filetype.svg);
background-position: 0 0;
width: 32px;
height: 32px;
}
.icon-filetype__ppt {
background-image: url(../sprites/filetype.png);
background-position: -32px 0;
width: 32px;
height: 32px;
}
.icon-filetype__word {
background-image: url(../sprites/filetype.svg);
background-position: -32px 0;
width: 32px;
height: 32px;
}
@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) {
.icon-filetype__excel {
background-image: url(../sprites/[email protected]);
background-position: 0 0;
background-size: 64px 32px;
}
.icon-filetype__ppt {
background-image: url(../sprites/[email protected]);
background-position: -32px 0;
background-size: 64px 32px;
}
}
```
### File tree
> Just a example for above output result, you can dynamic yourself with options.
```
.
├── gulpfile.js
├── dist
└── src
├── css
│ └── index.css
├── html
│ └── index.html
└── slice
└── filetype
├── excel.png
├── excel_2x.png
├── pdf.svg
├── ppt.png
├── [email protected]
└── word.svg
```
More examples with different options: [nameSpace](./examples/nameSpace.md), [outputDimensions](./examples/outputDimensions.md), [dynamicClassBlock](./examples/dynamicClassBlock.md), [pseudoClass](./examples/pseudoClass.md)
## Features
- Simple and easy, just need to put your images to the special folder.
- Retina support (`@2x`, `@3x`, `_2x`, `_3x` are all available).
- Support SVG Sprites. [Demo](https://res.devework.com/2018/postcss-lazysprite/html/index.html)
- Fully work well with Source Map.
- Cache way and good perfomance to run faster.
- Support sprites with`:hover`、`:active` condition([example](./examples/pseudoClass.md)).
## User
[WeChat for Work](https://work.weixin.qq.com) and [Wechat Reader](https://weread.qq.com) are using `postcss-lazysprite` in production.
## Installation
```bash
npm install postcss-lazysprite --save
```
## Usage
Work with [Gulp](http://gulpjs.com/)
Example:
```javascript
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var lazysprite = require('postcss-lazysprite');
gulp.task('css', function () {
return gulp.src('./test/src/css/**/*.css')
.pipe(postcss([lazysprite({
imagePath:'./test/src/slice',
stylesheetInput: './test/src/css',
stylesheetRelative: './test/dist/css',
spritePath: './test/dist/slice',
nameSpace: 'icon-'
})]))
.pipe(gulp.dest('./test/dist/css'));
});
```
## Options
#### imagePath
> 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.
- Default: null
- Required: `true`
#### stylesheetInput
> 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.
- Default: null
- Required: `true`
#### stylesheetRelative
> Relative path to the folder that will keep your output stylesheet(s). If it's null the path of CSS file will be used.
- Default: null
- Required: `false`
#### spritePath
> Relative path to the folder that will keep your output spritesheet(s).
- Default: `./`
- Required: `false`
#### nameSpace
> NameSpace(Prefix) of the class name of each image.
- Default: null
- Required: `false`
#### logLevel
> Deside which level to output log. Can be either "debug", "info", or "silent".
```javascript
// Show me additional info about the process
logLevel: "debug"
// Just show basic info
logLevel: "info"
// output NOTHING except alert
logLevel: "silent"
```
- Default: `info`
- Required: `false`
#### cssSeparator
> 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.
- Default: `'__'`
- Required: `false`
#### retinaInfix
> Deside the created sprite retina file is whether '@2x' or '_2x' as part of name.
- Default: `@`
- Required: `false`
#### outputExtralCSS
> Deside whether output extral css details, which list like:
```css
.icon-filetype {
display: inline-block;
overflow: hidden;
font-size: 0;
line-height: 0;
}
```
when set this option as `true`, the html sould like:
```html
```
- Default: `false`
- Required: `false`
#### pseudoClass
> If the file naming with `Hover`or `Active` as suffix，it will turn to the `:hover` or `:active` pseudo class.([example](./examples/pseudoClass.md))
- Default: `false`
- Required: `false`
#### outputDimensions
> Deside whether output `width` & `height` properties.
- Default: `true`
- Required: `false`
#### keepBackGroundSize
> add `background-size` attribute when 1x.
- Default: `false`
- Required: `false`
## Contributing
Thanks the inspirations from [postcss-sprites](https://github.com/2createStudio/postcss-sprites) plugin.
[Issues](https://github.com/Jeff2Ma/postcss-lazysprite/issues) and [Pull requests](https://github.com/Jeff2Ma/postcss-lazysprite/pulls) are welcome.
```bash
$ git clone https://github.com/Jeff2Ma/postcss-lazysprite
$ cd postcss-lazysprite
$ npm i
$ gulp # for dev
$ gulp test # for test
```