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);
})

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章