最近很火的tailwindcss有乙個功能：
可以將專案未使用的css選擇器從編譯後css檔案中移除。
purgecss實現的。
鏈結tailwindcss與purgecss的，則是乙個postcss外掛程式@fullhuman/postcss-purgecss。
不僅tailwindcss，還有很多知名專案中使用了postcss外掛程式。比如：
很多人在專案中使用autoprefixer外掛程式，為css選擇器增加不同的「瀏覽器字首」。
在其內部會根據browserslist[1]指定瀏覽器版本。
再去caniuse[2]查詢該瀏覽器版本相容性支援情況。
最後通過postcss的能力改寫不支援的css屬性。
可以看到，postcss正越來越成為前端專案必不可少的依賴。
同時也有很多關於postcss的誤區，比如認為他是和less、sass一樣的「css預處理器」。
本文會自底向上介紹postcss，希望通過此文讓你對這款大殺器有更深的認識。
postcss是一款css編譯器。
模擬babel家族的@babel/parser可以將js**解析為ast（抽象語法樹），再利用眾多外掛程式（@babel/plugin-xx）的能力改寫ast，最終輸出改寫後的js**。
postcss利用自身的parser可以將css**解析為ast，再利用眾多外掛程式（上文介紹的autoprefixer就是一種）改寫ast，最終輸出改寫後的css**。
less這樣的「css預處理器」的不同 ——postcss的輸入與輸出產物都是css檔案。
因此，postcss也被成為「後處理器」，因為其通常在css處理鏈條的最後端。
來了解postcss如何解析css。
比如，對於如下css**：
/**
* i am kasong
*/@media screen and (min-width: 900px)
}ul
ul li
postcss解析為如下樹結構的ast：
接下來我們從乙個外掛程式的實現來了解開發者如何介入postcss編譯流程。
postcss-focus[4]會為所有:hover選擇器增加:focus以提高鍵盤操作的可用性。
對於如下**：
.a:hover, .b:hover, .c:hover.a:hover, .b:hover, .c:hover, .a:focus, .b:focus, .c:focuspostcss、postcss-focus後通過如下demo在控制台看到結果：
const postcssfocus = require('postcss-focus');
const postcss = require('postcss');
const fs = require('fs');
// 輸入的css檔案位址
const from = 'src/a.css';
const to = 'output/a.css';
fs.readfile(from, (err, css) => ).then(result => )
})
postcss將輸入的css解析為ast
遍歷ast中所有rule型別節點
維護乙個陣列，遍歷這個節點的所有selector，每遍歷到乙個包含:hover的selector就往陣列中push乙個:focus的selector
將2中得到的陣列concat到該節點已有的selectors後
根據改變後的ast輸出新的css
核心原始碼如下：
}
}// 步驟3
if (focuses.length) }}}
postcss提供了詳細的外掛程式建立文件[6]。甚至提供了create-postcss-plugin[7]用來建立外掛程式的模版**。
由於提供了表達、改寫css ast的能力，postcss的外掛程式可以實現非常多功能。比如：
上文介紹了declaration節點表達「css屬性」的鍵值對，其中值為「字串」型別。
那麼完全可以自定義值的解析規則。
bodygetcolor函式，並在ast中將其解析為函式執行，就能在css檔案中用js寫邏輯**。
這就是postcss-functions[8]
配置不同的lint規則，實現css的靜態語法檢測。這就是stylelint[9]
當前postcss外掛程式按功能劃分大體有如下幾類：
讀到這裡，相信你會同意：相比less、sass，postcss才是css處理領域的大殺器。
[1]browserslist:
[2]caniuse:
[3]astexplorer:
[4]postcss-focus:
[5]postcss-focus原始碼:
[6]外掛程式建立文件:
[7]create-postcss-plugin:
[8]postcss-functions:
[9]stylelint:
[10]css module:
[11]autoprefixer:
[12]postcss-html:
1.看到這裡了就點個在看支援下吧，你的在看是我創作的動力。
3.如果你覺得本文的內容對你有幫助，就幫我**一下吧。
前端架構師
專案架構 1.封裝專案的基礎庫 優秀的基礎庫可以保證專案的最低質量下限和更好的可擴充套件性。通常我們說的基礎庫包括 元件庫 基礎 css 庫 基礎工具庫。2.層級管理 管理你的請求，建議把你專案的 api 層獨立出來為乙個層級管理，這樣有利於在複雜介面下，更好的管理，降低複雜度。效能優化 1.快取 ...
前端架構師的思考
還記得2006年的時候 garrett dimon 寫了一篇關於前端架構師的文章 標題是the time is now for front end architects 到了前端架構師出手的時候了 他在這篇文章中有了對前端架構師能力的範圍的乙個list概括 作為乙個前端架構師，必須擁有這些領域的絕對...
前端架構師的思考
還記得2006年的時候 garrett dimon 寫了一篇關於前端架構師的文章 標題是the time is now for front end architects 到了前端架構師出手的時候了 他在這篇文章中有了對前端架構師能力的範圍的乙個list概括 作為乙個前端架構師，必須擁有這些領域的絕對...