postcss-weex

postcss-weex主要解决三个问题:

1. 解决weex样式不支持简写;
2. 解决weex样式与H5样式不一致;
3. 解决不能使用绝对尺寸;

安装

$ npm install postcss
$ npm install postcss-weex

使用

只需要在webpack的配置文件中增加相关配置即可。

对于web

// for webpack2

var prefixer = require('autoprefixer');
var weexCSS = require('postcss-weex');

{
    test: /\.vue(\?[^?]+)?$/,
    loader: `vue-loader`,
    options: {
        /**
         * important! should use postTransformNode to add $processStyle for
         * inline style normalization.
         */
        compilerModules: [
            {
                postTransformNode: el => {
                    el.staticStyle = `$processStyle(${el.staticStyle})`;
                    el.styleBinding = `$processStyle(${el.styleBinding})`;
                }
            }
        ],
        postcss: [
            weexCSS({env: 'web'}),
            prefixer({ browsers: ['last 20 versions'] })
        ]
    }
}

对于weex

// for webpack2

var weexCSS = require('postcss-weex');

{
    test: /\.vue(\?[^?]+)?$/,
    loader: `weex-loader`,
    options: {
        postcss: [
            weexCSS({env: 'weex'})
        ]
    }
}

选项

支持以下选项：

• env: 编译环境，weex或者vue，默认为weex；
• relLenUnit: 相对长度单位，默认为px；
• absLenUnit: 绝对长度单位，默认为pt；
• baseDpr: 使用绝对长度单位时的换算基数，默认为2，即设计稿宽度为750时，1pt最终为1px；
• remUnit: 使用相对长度单位时的换算基数，默认为75，即设计稿宽度为750时，1px最终为(1 * 2 / 75)rem；
• remPrecision: 转rem时保留的小数位数。

功效

样式简写

只针对weex不支持的写法，并不能解决weex不支持的样式属性问题。

• padding简写
• margin简写
• border简写
• background简写
• border-radius简写

样式不一致

在weex中，所有尺寸都会根据实际屏幕宽度基于750px进行缩放，但是对于H5页面却并非如此。postcss-weex插件可以在进行H5页面打包时，将所有px单位转换为rem单位来达到同样的效果。

为了生成正确的meta，你需要在HTML模板中手动引入flexible。

绝对单位

在weex中，有一个文档并未提及的单位wx，当使用这个单位时，尺寸不会进行缩放。postcss-weex支持使用pt单位(可使用options.absLenUnit来设置，默认使用pt而非wx主要是为了在ide中不会有错误提示)，在weex中会自动转为wx，在H5中自动转为px。

important

在weex中，设置!important会使样式失效，但是因为weex-vue-render样式优先级的问题，有些情况下必需使用!important才能解决问题(如设置文本margin)，因此会对!important作特殊处理，在weex中删除掉!important。