Have ideas to improve npm?Join in the discussion! »

    postcss-mpvue-wxss

    1.0.2 • Public • Published

    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.

    Install

    npm i postcss-mpvue-wxss

    DownloadsWeekly Downloads

    309

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    9.11 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar