关于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做一些转换，就能够完美解决问题二、三、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。