Package Exports

postcss-image-set-generator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-image-set-generator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 v4+
C++11 compatible compiler such as gcc 4.8+, clang 3.0+ or MSVC 2013+
node-gyp and its dependencies (includes Python)

npm install postcss-image-set-generator --save-dev
yarn add postcss-image-set-generator --dev

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

JSPM