PostCSS plugin for wxss.
专门为 wxss 格式化处理的的一个 postcss 插件，特别是在做 css 转 wxss 的时候好用到爆。
- 清理 wxss 不支持的选择器。
- 清理 wxss 不支持的注释。
- 转换 rem 单位到 rpx。
- 转换 Web 的标签选择器到小程序的 class 选择器。
- style scoped（postcss插件部分）。
/* 被清理 */
* {
margin: 100px
}
/* 保持原样 */
view {
width: 50rpx;
}
.container {
width: 7.5rem;
font-size: .24rem
}
/* Web 标签转换 */
div {
width: 50rpx;
}
ul li {
width: 50rpx;
}
body {
width: 50rpx;
}view {
width: 50rpx;
}
.container {
width: 50rpx;
font-size: 24.4rpx
}
._div {
width: 50rpx;
}
._ul ._li {
width: 50rpx;
}
page {
width: 50rpx;
}postcss([ require('postcss-mpvue-wxss') ])or use .postcssrc.js
// https://github.com/michael-ciniawsky/postcss-load-config
const optopns = {}
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"postcss-mpvue-wxss": optopns
}
}
with options:
const replaceTagSelectorMap = require('postcss-mpvue-wxss/lib/wxmlTagMap')
const optopns = {
cleanSelector: ['*'],
remToRpx: 100,
replaceTagSelector: Object.assign(replaceTagSelectorMap, {
'*': 'view, text' // 将覆盖前面的 * 选择器被清理规则
})
}
更多详细文档请查阅 postcss-mpvue-wxss。
bug 或者交流建议等请反馈到 mpvue/issues。
See PostCSS docs for examples for your environment.