postcss-image-set-generator


Example or Demo

``css
/ 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

$3

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

`bash
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

$3

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

`js
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"));
});
`

$3

`js
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

$3

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

List supported scale images

$3

type : String , default: @x

Miniature images naming .

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

$3

type: String, default: x

Available Values dpi || dppx || x`

$3

$3