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/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;
}
 

Features

• 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.

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