PostCSS Wxss

PostCSS plugin for wxss.

专门为 wxss 格式化处理的的一个 postcss 插件，特别是在做 css 转 wxss 的时候好用到爆。

实现的功能

  • 清理 wxss 不支持的选择器。
  • 清理 wxss 不支持的注释。
  • 转换 rem 单位到 rpx。
  • 转换 Web 的标签选择器到小程序的 class 选择器。
  • style scoped（postcss插件部分）。

例子

  1. /* 被清理 */
  2. * {
  3.   margin: 100px
  4. }
  6. /* 保持原样 */
  7. view {
  8.   width: 50rpx;
  9. }
  10. .container {
  11.   width: 7.5rem;
  12.   font-size: .24rem
  13. }
  15. /* Web 标签转换 */
  16. div {
  17.   width: 50rpx;
  18. }
  19. ul li {
  20.   width: 50rpx;
  21. }
  22. body {
  23.   width: 50rpx;
  24. }
  1. view {
  2.   width: 50rpx;
  3. }
  4. .container {
  5.   width: 50rpx;
  6.   font-size: 24.4rpx
  7. }
  8. ._div {
  9.   width: 50rpx;
  10. }
  11. ._ul ._li {
  12.   width: 50rpx;
  13. }
  14. page {
  15.   width: 50rpx;
  16. }

Usage

  1. postcss([ require('postcss-mpvue-wxss') ])

or use .postcssrc.js

  1. // https://github.com/michael-ciniawsky/postcss-load-config
  2. const optopns = {}
  4. module.exports = {
  5.   "plugins": {
  6.     // to edit target browsers: use "browserslist" field in package.json
  7.     "postcss-mpvue-wxss": optopns
  8.   }
  9. }

with options:

  1. const replaceTagSelectorMap = require('postcss-mpvue-wxss/lib/wxmlTagMap')
  3. const optopns = {
  4.   cleanSelector: ['*'],
  5.   remToRpx: 100,
  6.   replaceTagSelector: Object.assign(replaceTagSelectorMap, {
  7.     '*': 'view, text' // 将覆盖前面的 * 选择器被清理规则
  8.   })
  9. }

See PostCSS docs for examples for your environment.