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(bg@x1.webp) 1x,
    url(bg@1.5x.webp) 1.5x,
    url(bg.webp) 2x
  );
}

a {
  border-image: image-set(url(border@x1.webp) 1x, url(border@.webp) 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));

Options

scales

type : Array, default: [1, 1.5, 2, 3]

List supported scale images

suffix

type : String , default: @x

Miniature images naming <name><suffix><scale>.<ext>

Example: icon-star.webp -> icon-star@x2.webp

resolutionType

type: String, default: x

Available Values dpi || dppx || x

loadPaths

relativeTo