postcss-background-image-suffix

> PostCSS 7.x 插件，用于在 CSS background image 中添加扩展参数，使用场景：png 转 WebP 格式追加 CDN 转换参数。

Usage

1. 修改 postcss.config.js 配置文件：

``js
module.exports = {
plugins: [
require('postcss-background-image-suffix')({
webpPrefixClass: '_webp',
pngPrefixClass: '_png',
suffix: '?x-oss-process=image/format,webp',
specialFilter: {
webpPrefixClass: '_webp',
pngPrefixClass: '_png',
suffix: '?imageMogr2/format/webp',
projects: ['game'],
},
}),
require('autoprefixer'),
],
};
`

2. 在 HTML 入口 head 区域添加以下脚本，用于区分当前浏览器是否支持 webp 格式。

`html

`

Example

Before:

`
.foo {
font-size: 12px;
position: relative;
background-image: url(./bg.png);
background: url(./bg.png) no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2Z==);
}

.bar {
background: url(./bg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 -1px;
}
`

After:

`
.foo {
font-size: 12px;
position: relative;
}
._webp .foo {
background-image: url(./bg.png?x-oss-process=image/format,webp);
background-image: url(data:image/svg+xml;base64,PHN2Z==);
background: url(./bg.png?x-oss-process=image/format,webp) no-repeat;
}
._png .foo {
background-image: url(./bg.png);
background-image: url(data:image/svg+xml;base64,PHN2Z==);
background: url(./bg.png) no-repeat;
}

._webp .bar {
background: url(./bg.png?x-oss-process=image/format,webp) no-repeat;
background-size: 100% 100%;
background-position: 0 -1px;
}

._png .bar {
background: url(./bg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 -1px;
}
``