Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeff2ma/postcss-lazyimagecss
A PostCSS plugin that generates images's CSS width & height properties automatically.
https://github.com/jeff2ma/postcss-lazyimagecss
css nodejs postcss postcss-lazyimagecss postcss-plugin
Last synced: about 2 hours ago
JSON representation
A PostCSS plugin that generates images's CSS width & height properties automatically.
- Host: GitHub
- URL: https://github.com/jeff2ma/postcss-lazyimagecss
- Owner: Jeff2Ma
- License: mit
- Created: 2016-10-09T07:54:35.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-06T15:06:24.000Z (about 7 years ago)
- Last Synced: 2024-11-13T08:19:17.505Z (2 days ago)
- Topics: css, nodejs, postcss, postcss-lazyimagecss, postcss-plugin
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 39
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-lazyimagecss
[](https://greenkeeper.io/)
[](https://travis-ci.org/Jeff2Ma/postcss-lazyimagecss)
[](http://badge.fury.io/js/postcss-lazyimagecss)
A [PostCSS](https://github.com/postcss/postcss) plugin that generates images's CSS `width` & `height` properties from stylesheets automatically.
Another lazy way to write CSS, feel free to use it :)
Based on [gulp-lazyimagecss](https://github.com/weixin/gulp-lazyimagecss). Thanks to [hzlzh](https://github.com/hzlzh) and [littledu](https://github.com/littledu).
```css
/* Input */
.icon-close {
background-image: url(../slice/icon-close.png); //icon-close.png - 16x16
}
.icon-new {
background-image: url(../slice/[email protected]); //[email protected] - 16x16
}
/* Output */
.icon-close {
background-image: url(../slice/icon-close.png);
width: 16px;
height: 16px;
}
.icon-new {
background-image: url(../slice/[email protected]);
width: 8px;
height: 8px;
background-size: 8px 8px;
}
```
## Features
- Support `jpg`/`jpeg`/`png`/`gif`/`bmp`/`svg` file type.
- Support retina image (file name should like `[email protected]`).
- Both `background-image: url()` and `background: url()` can be detected successfully.
- CSS property generating will be ignored if any of those `width` / `height` / `background-size` already set.
## Installation
Install with npm:
npm install postcss-lazyimagecss --save-dev
Or install width [yarn](https://github.com/yarnpkg/yarn):
yarn add postcss-lazyimagecss --dev
## Usage
### Work with [Gulp](http://gulpjs.com/)
Example:
```js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var lazyimagecss = require('postcss-lazyimagecss');
gulp.task('css', function () {
return gulp.src('./src/css/*.css')
.pipe(another-plugin())
.pipe(postcss([lazyimagecss({
imagePath: ['../img','../slice']
})]))
.pipe(gulp.dest('./dist/css'));
});
```
### Work with Gulp & [gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps)
Example:
```js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var lazyimagecss = require('postcss-lazyimagecss');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function () {
return gulp.src('./src/css/*.css')
.pipe(sourcemaps.init())
.pipe(another-plugin())
.pipe(postcss([lazyimagecss({
imagePath: ['../img','../slice']
})]))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest('./dist'));
});
```
## Options
- **imagePath** Set image path to be worked (e.g. `['../slice','../img']`)
- **width** Whether output `width` properties in CSS ( default: `true` )
- **height** Whether output `height` properties in CSS ( default: `true` )
- **backgroundSize** Whether output `background-size` properties in CSS ( default: `true` )
## Contributing
[Issues](https://github.com/Jeff2Ma/postcss-lazyimagecss/issues/) and [Pull requests](https://github.com/Jeff2Ma/postcss-lazyimagecss/pulls) are welcome.
```shell
$ git clone https://github.com/Jeff2Ma/postcss-lazyimagecss
$ cd postcss-lazyimagecss
$ npm i
$ gulp
```