Needy Poetic Mothers

    postcss-image-set-generator

    1.0.0 • Public • Published

    postcss-image-set-generator

    npm AppVeyor Travis

    Logo 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

    loadPaths

    relativeTo

    Install

    npm i postcss-image-set-generator

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    17.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • retyui