postcss 插件 開發

PostCSS 是一個使用JavaScript轉換CSS的工具

總之來說是一個非常不錯的工具 ，弊端的話暫時沒有發現 。總的來說他可以極大的提高我們的開發效率 ，加入用過他的話 你可能對以下這些插件比較熟悉

• rucksack-css
• postcss-import
• cssnano
• atcss
• postcss-url
• precss
  …等等
  但插件究竟幹了啥，值得我們研究以下，其實感覺和babel 的插件機制類似但又不一樣，寫起來相對更加簡單
  以rucksack-css這個插件爲例 ，他有一個功能就是讓你定義一些自己的屬性別名

@alias{
    bd: border;
    bg: background;
    bg-i: background-image;
    bg-c: background-color;
    bg-p: background-position;
    bg-s: background-size;
    bg-o: background-origin;
    l-h: line-height;
    t-a: text-align;
}

類似這樣 讓你寫更少的代碼他去幫你編譯 ，那它是如何實現這中黑魔法的，我們來一探究竟
我們把ta:center轉換成 text-aligin:center

const postcss = require('postcss');
const less = require("less");

// 要轉換的語法
const parseProps = {
    ta:'text-align'
}

// 策略模式轉換語法
const parseRules = (rule,props)=> {
    if(parseProps[props]){
        rule['nodes'][0]['prop'] = parseProps[props];
    }
}

//定義插件
const postcssPlugin = postcss.plugin("postcssPlugin", (opts) => {
    // 在這裏配置你的選項
    opts = opts || {};
    return root => {
        // root.walkRules 遍歷容器的後代節點，爲每個規則節點調用回調，如果傳遞過濾器，迭代將僅發生在具有匹配選擇器的規則上。
        root.walkRules((rule)=>{
            parseRules(rule,rule['nodes'][0]['prop'])
        }); 
    };
});

postcss([postcssPlugin])
.process(`a{
    ta : center;
    }`, {
    parser: less.parser,
    from: './style.less',
}).then((css)=>{
    // 轉換後的內容
    console.log(css);
})

整個代碼就這些 當然你的插件也可以依賴別人的插件
參考文獻