关于postcss-weex插件, 让weex开发更爽一点

背景

众所周知，在weex开发中，CSS的书写一直是一个痛点。主要表现如下：

1. 支持的CSS属性有限；

2. 不支持简写，例如不支持margin: 10px 0，必需要分开写上下左右四个方向的margin；

3. 在weex中尺寸会根据实际屏幕尺寸基于750px自动缩放，而web页面不会，造成视觉效果不一致；

4. 有一些尺寸(如字体，边框)不需要自动缩放。

解决思路

对于问题1，受限于weex底层的实现，目前并没有办法能够解决。

对于问题2，只需要分开写即可，但是分开写多多少少会有些不便，同时因为前端开发人员通常都已经习惯了简写的方式，很容易忘记分开写。如果有一个工具能够对写好的CSS做自动转换，那么问题就解决了。

对于问题3，可以联想到weex中的布局方案其实与手淘的flexible布局方案如出一辙，因此只需要一个工具实现同等转换，将CSS中的px转成rem即可。

对于问题4，weex支持一个未在文档中提及的单位wx，使用wx单位的尺寸不会进行缩放，但是需要一个工具对web页面进行等同处理，否则还是无法达到一致。

解决方案

由上可知，其实只需要对CSS作一些转换，就可以完美解决问题2、3、4。而最简单地实现方式，就是基于postcss去制作插件。因为postcss除了将CSS文件抽象成AST，还提供了对AST的遍历，我们只需要传入一个回调函数来对接收的内容作简单的处理即可。同时postcss还提供了一些实用的API来操作AST，于是基于postcss的插件postcss-weex便应运而生了。

因此，你只需要在你的webpack配置文件中添加postcss-weex的相关配置即可。

对于web

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

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

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

最后，为了正确生成meta，你还需要在html模板中引入flexible。