瞭解 PostCSS 原理

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

簡介

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

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

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

postcss plugin

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

2、註冊個插件名，並獲取插件配置參數 opts。

3、返回值是個函數，這個函數主體是你的處理邏輯，有 2 個參數，一個是 root，AST 的根節點。另一個是 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 輸出。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。