https://github.com/mpvue/postcss-mpvue-wxss
PostCSS plugin for wxss
https://github.com/mpvue/postcss-mpvue-wxss
mpvue postcss vue wxmp wxss
Last synced: 5 months ago
JSON representation
PostCSS plugin for wxss
- Host: GitHub
- URL: https://github.com/mpvue/postcss-mpvue-wxss
- Owner: mpvue
- License: mit
- Created: 2018-03-08T03:51:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-05-10T06:59:24.000Z (about 7 years ago)
- Last Synced: 2025-09-18T14:55:57.667Z (9 months ago)
- Topics: mpvue, postcss, vue, wxmp, wxss
- Language: JavaScript
- Homepage: http://mpvue.com/build/postcss-mpvue-wxss
- Size: 5.86 KB
- Stars: 17
- Watchers: 9
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Wxss
[PostCSS] plugin for wxss.
专门为 wxss 格式化处理的的一个 postcss 插件，特别是在做 css 转 wxss 的时候好用到爆。
## 实现的功能
- 清理 wxss 不支持的选择器。
- 清理 wxss 不支持的注释。
- 转换 rem 单位到 rpx。
- 转换 Web 的标签选择器到小程序的 class 选择器。
- style scoped（postcss插件部分）。
``` css
/* 被清理 */
* {
margin: 100px
}
/* 保持原样 */
view {
width: 50rpx;
}
.container {
width: 7.5rem;
font-size: .24rem
}
/* Web 标签转换 */
div {
width: 50rpx;
}
ul li {
width: 50rpx;
}
body {
width: 50rpx;
}
```
``` css
view {
width: 50rpx;
}
.container {
width: 50rpx;
font-size: 24.4rpx
}
._div {
width: 50rpx;
}
._ul ._li {
width: 50rpx;
}
page {
width: 50rpx;
}
```
## Usage
```js
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](http://mpvue.com/build/postcss-mpvue-wxss)。
bug 或者交流建议等请反馈到 [mpvue/issues](https://github.com/Meituan-Dianping/mpvue/issues)。
See [PostCSS] docs for examples for your environment.
[PostCSS]: https://github.com/postcss/postcss