postcss-lazyimagecss
v0.1.3
Published
A PostCSS plugin that generates images's CSS width & height properties from stylesheets automatically.
Downloads
24
Maintainers
Readme
postcss-lazyimagecss
A 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. Thanks to hzlzh and littledu.
/* 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()
andbackground: 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:
yarn add postcss-lazyimagecss --dev
Usage
Work with Gulp
Example:
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
Example:
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 and Pull requests are welcome.
$ git clone https://github.com/Jeff2Ma/postcss-lazyimagecss
$ cd postcss-lazyimagecss
$ npm i
$ gulp