Package Exports

postcss-auto-set-imageset

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-auto-set-imageset) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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/photo@2x.png'); /* 3x */
}

.test-dir {
    background-image: url('../imgs/@2x/photo@2x.png'); /* 3x */
}

output:

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

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

Usage

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

See PostCSS docs for examples for your environment.