了解PostCSS原理

前端工程化日益成熟今天，我們對于工具越來越深的封裝。不管是從vue-cli的3.0版本起，還是umi、bigfish 等前端腳手架，對于webpack都封裝在內，對于工程化無疑是高效的，但也在一定程度上讓新手們失去了從零配置一個項目的機會，所以很多時候還是希望能透過大神們的框架，研究一下底層結構。

簡介

PostCSS是一個通過JS插件轉換樣式表的工具，它本身并不是一門新的CSS語言，而是一個平臺，提供插件擴展服務即JS API，開發(fā)者可以根據這些接口，定制開發(fā)插件，目前比較流行的插件工具如：Autoprefixer 、Stylelint 、CSSnano。

類似于babel/core提供核心API讓babel-plugin-進行代碼轉換。

postCss 給出了很多操作 css 規(guī)則的方法。處理 css 的方式其實有2種：編寫 postcss plugin，如果你的操作非常簡單也可以直接利用 postcss.parse 方法拿到 css ast 后分析處理。

postcss plugin

1、postcss 插件如同 babel 插件一樣，有固定的格式。

2、注冊個插件名，并獲取插件配置參數(shù) opts。

3、返回值是個函數(shù)，這個函數(shù)主體是你的處理邏輯，有2個參數(shù)，一個是 root，AST的根節(jié)點。另一個是 result，返回結果對象，譬如 result.css，獲得處理結果的 css 字符串。

export default postcss.plugin('postcss-plugin-name', function (opts) {  opts = opts || {};  return function (root, result) {    // 處理邏輯  };});

可以用 postcss.parse 來處理一段 css 文本，拿到 css ast，然后進行處理，再通過調用 toResult().css 拿到處理后的 css 輸出。