postcss-image-set-generator

Example or Demo

/* Input */
i {
  backgroung-image: image-set(url(bg.webp) 196dpi);
}

a {
  border-image: image-set(url(border.webp) 1.5x);
}

dd {
  backgroung: #fff image-set(url(bg.webp) 1x, url(bg-lg.webp) 2x); /* skiped */
}

/* Output */
i {
  backgroung-image: image-set(
    url([email protected]) 1x,
    url([email protected]) 1.5x,
    url(bg.webp) 2x
  );
}

a {
  border-image: image-set(url([email protected]) 1x, url([email protected]) 1.5x);
}

dd {
  backgroung: #fff image-set(url(bg.webp) 1x, url(bg-lg.webp) 2x); /* skiped */
}

About this plugin

This plugin add postcss function for image-set.

This function checks if only one argument was passed to it, it automatically makes thumbnails of the images according to the sizes previously set.

You must specify only one picture of the largest size and specify for which pixelity pixel it is used

Install

Prerequisites

Node v6+
C++11 compatible compiler such as gcc 4.8+, clang 3.0+ or MSVC 2013+
node-gyp and its dependencies (includes Python)

yarn add postcss-image-set-generator
# or
npm install postcss-image-set-generator

Example

Demo how it work look on this repo demo-modern-images-usage-css

Usage

Gulp

In Gulp you can use [gulp-postcss] with postcss-image-set-generator npm package.

gulp.task("autoprefixer", function() {
  const postcss = require("gulp-postcss");
  const sourcemaps = require("gulp-sourcemaps");
  const generatoRrr = require("postcss-image-set-generator");

  return gulp
    .src("./src/*.css")
    .pipe(sourcemaps.init())
    .pipe(postcss([generatoRrr(/* options */)]))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("./dest"));
});

Postcss Api

const { readFileSync, writeFileSync } = require("fs");
const { resolve } = require("path");
const postcss = require("postcss");
const generatoRrr = require("postcss-image-set-generator");

const options = {
  from: resolve(__dirname, "./assets/css/style.css"),
  to: resolve(__dirname, "./assets/css/style.dist.css")
};
const { from, to } = options;

postcss()
  .use(generatoRrr(/* options */))
  .process(readFileSync(from), options)
  .then(result => writeFileSync(to, result.css));