PostCSS Auto Set Imageset

PostCSS plugin Auto set css property of image-set to compat 2x or 3x.

You should use autoprefixer plugin to add image-set prefix. Such as down(in webpack).

require('postcss-auto-set-imageset')(),
// autoprefixer will add -webkit- prefix to image-set
require('autoprefixer')()

input:

.test-file {
    background-image: url('../imgs/[email protected]'); /* 3x */
}

.test-dir {
    background-image: url('../imgs/@2x/[email protected]'); /* 3x */
}

output:

.test-file {
    /* compat the webview which image-set property is not support. Setting the @2x photo default */
    background-image: url('../imgs/[email protected]');
    background-image: image-set(
        url('../imgs/[email protected]') 2x,
        url('../imgs/[email protected]') 3x
    );
}

.test-dir {
    /* compat the webview which image-set property is not support. Setting the @2x photo default */
    background-image: url('../imgs/@2x/[email protected]');
    background-image: image-set(
        url('../imgs/@2x/[email protected]') 2x,
        url('../imgs/@3x/[email protected]') 3x
    );
}

Usage

postcss([ require('postcss-auto-set-imageset') ])

See PostCSS docs for examples for your environment.