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/icon-new@2x.png); //icon-new@2x.png - 16x16
}
/* Output */
.icon-close {
background-image: url(../slice/icon-close.png);
width: 16px;
height: 16px;
}
.icon-new {
background-image: url(../slice/icon-new@2x.png);
width: 8px;
height: 8px;
background-size: 8px 8px;
}
Support jpg
/jpeg
/png
/gif
/bmp
/svg
file type.
Support retina image (file name should like demo@2x.png
).
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.
Install with npm:
npm install postcss-lazyimagecss --save-dev
Or install width yarn:
yarn add postcss-lazyimagecss --dev
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'));
});
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'));
});
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
)
Issues and Pull requests are welcome.
$ git clone https://github.com/Jeff2Ma/postcss-lazyimagecss
$ cd postcss-lazyimagecss
$ npm i
$ gulp