Package Exports

postcss-mpvue-wxss

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

Readme

PostCSS Wxss

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;
}

Usage

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.