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);
})
整個代碼就這些 當然你的插件也可以依賴別人的插件
參考文獻