關於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。