如何理解postCSS

本篇內容主要講解“如何理解postCSS”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何理解postCSS”吧!

最近很火的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

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的AST

你可以在astexplorer[3]中選擇：

• 語言：css

• parser：postCSS

來了解postCSS如何解析css。

比如，對于如下css代碼：

/**  * I am KaSong  */  @media screen and (min-width: 900px) {   article {     padding: 1rem 3rem;   } }   ul {  margin: 3rem; }  ul li {  padding: 5px; }

會被postCSS解析為如下樹結構的AST：

節點有如下幾種類型：

• Root：根節點，代表一個css文件

• AtRule：以@開頭的申明，比如@charset "UTF-8"或@media (screen) {}

• Rule：內部包含定義的選擇器，比如input, button {}

• Declaration：key-value鍵值對，比如color: black;

• Comment：單獨的注釋。selectors、at-rule的參數以及value的注釋在節點的node屬性內

實現一個簡單的插件

接下來我們從一個插件的實現來了解開發者如何介入postCSS編譯流程。

postcss-focus[4]會為所有:hover選擇器增加:focus以提高鍵盤操作的可用性。

對于如下代碼：

.a:hover, .b:hover, .c:hover {   opacity: .5; }

經過該插件處理后會輸出：

.a:hover, .b:hover, .c:hover, .a:focus, .b:focus, .c:focus {   opacity: .5; }

你可以安裝postcss、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) => {   postcss(postcssFocus).process(css, { from, to }).then(result => {     console.log(result.css)   })    })

接下來我們分析postcss-focus源碼[5]的實現邏輯：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. postCSS將輸入的css解析為AST

3. 遍歷AST中所有Rule類型節點

4. 維護一個數組，遍歷這個節點的所有selector，每遍歷到一個包含:hover的selector就往數組中push一個:focus的selector

5. 將2中得到的數組concat到該節點已有的selectors后

6. 根據改變后的AST輸出新的css

核心源碼如下：

{   postcssPlugin: 'postcss-focus',   // 步驟1   Rule: rule => {     // 步驟2     if (rule.selector.includes(':hover')) {       let focuses = []       for (let selector of rule.selectors) {         if (selector.includes(':hover')) {           let replaced = selector.replace(/:hover/g, ':focus')           if (!hasAlready(rule.parent, replaced)) {             focuses.push(replaced)           }         }       }       // 步驟3       if (focuses.length) {         rule.selectors = rule.selectors.concat(focuses)       }     }   } }

這個插件只是為了演示插件的基本工作方法，實際上該插件實現的比較粗糙。

postCSS提供了詳細的插件創建文檔[6]。甚至提供了create-postcss-plugin[7]用來創建插件的模版代碼。

更多可能性

由于提供了表達、改寫css AST的能力，postCSS的插件可以實現非常多功能。比如：

postcss-functions

上文介紹了Declaration節點表達「css屬性」的鍵值對，其中值為「字符串」類型。

那么完全可以自定義值的解析規則。

body {   color: getColor(); }

通過定義getColor函數，并在AST中將其解析為函數執行，就能在css文件中用js寫邏輯代碼。

這就是postcss-functions[8]

stylelint

配置不同的lint規則，實現css的靜態語法檢測。這就是stylelint[9]

總結

當前postCSS插件按功能劃分大體有如下幾類：

• 解決全局css問題，比如提供css module[10]支持

• 使用未全面兼容的css特性，比如autoprefixer[11]

• 格式化，提高css可讀性

• 圖片和文字處理

• linters，比如stylelint

• 不同語法的css支持，比如postcss-html[12]可以解析類html文件中 

讀到這里，相信你會同意：相比Less、Sass，postCSS才是css處理領域的大殺器。

到此，相信大家對“如何理解postCSS”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！