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