Jeff2Ma / postcss-lazyimagecss

A PostCSS plugin that generates images's CSS width & height properties automatically.
MIT License
39 stars 1 forks source link
css nodejs postcss postcss-lazyimagecss postcss-plugin

postcss-lazyimagecss

Greenkeeper badge

Build Status npm version

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

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

Contributing

Issues and Pull requests are welcome.

$ git clone https://github.com/Jeff2Ma/postcss-lazyimagecss
$ cd postcss-lazyimagecss
$ npm i
$ gulp