本篇內(nèi)容主要講解“如何理解postCSS”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“如何理解postCSS”吧!
目前成都創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站運營、企業(yè)網(wǎng)站設(shè)計、江漢網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
最近很火的TailwindCSS有一個功能：
可以將項目未使用的css選擇器從編譯后css文件中移除。
這個功能是PurgeCSS實現(xiàn)的。
鏈接TailwindCSS與PurgeCSS的，則是一個postCSS插件@fullhuman/postcss-purgecss。
不僅TailwindCSS，還有很多知名項目中使用了postCSS插件。比如：
很多人在項目中使用autoprefixer插件，為css選擇器增加不同的「瀏覽器前綴」。
在其內(nèi)部會根據(jù)browserslist[1]指定瀏覽器版本。
再去caniuse[2]查找該瀏覽器版本兼容性支持情況。
最后通過postCSS的能力改寫不支持的css屬性。
可以看到，postCSS正越來越成為前端項目必不可少的依賴。
同時也有很多關(guān)于postCSS的誤區(qū)，比如認(rèn)為他是和Less、Sass一樣的「css預(yù)處理器」。
本文會自底向上介紹postCSS，希望通過此文讓你對這款大殺器有更深的認(rèn)識。
postCSS是一款css編譯器。
類比Babel家族的@babel/parser可以將js代碼解析為AST(抽象語法樹)，再利用眾多插件(@babel/plugin-xx)的能力改寫AST，最終輸出改寫后的js代碼。
postCSS利用自身的parser可以將css代碼解析為AST，再利用眾多插件(上文介紹的autoprefixer就是一種)改寫AST，最終輸出改寫后的css代碼。
從這點就能看出其與Less這樣的「css預(yù)處理器」的不同 —— postCSS的輸入與輸出產(chǎn)物都是css文件。
因此，postCSS也被成為「后處理器」，因為其通常在css處理鏈條的最后端。
你可以在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解析為如下樹結(jié)構(gòu)的AST：
節(jié)點有如下幾種類型：
Root：根節(jié)點，代表一個css文件
AtRule：以@開頭的申明，比如@charset "UTF-8"或@media (screen) {}
Rule：內(nèi)部包含定義的選擇器，比如input, button {}
Declaration：key-value鍵值對，比如color: black;
Comment：單獨的注釋。selectors、at-rule的參數(shù)以及value的注釋在節(jié)點的node屬性內(nèi)
接下來我們從一個插件的實現(xiàn)來了解開發(fā)者如何介入postCSS編譯流程。
postcss-focus[4]會為所有:hover選擇器增加:focus以提高鍵盤操作的可用性。
對于如下代碼：
.a:hover, .b:hover, .c:hover { opacity: .5; }經(jīng)過該插件處理后會輸出：
.a:hover, .b:hover, .c:hover, .a:focus, .b:focus, .c:focus { opacity: .5; }你可以安裝postcss、postcss-focus后通過如下demo在控制臺看到結(jié)果：
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]的實現(xiàn)邏輯：
鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)
postCSS將輸入的css解析為AST
遍歷AST中所有Rule類型節(jié)點
維護一個數(shù)組，遍歷這個節(jié)點的所有selector，每遍歷到一個包含:hover的selector就往數(shù)組中push一個:focus的selector
將2中得到的數(shù)組concat到該節(jié)點已有的selectors后
根據(jù)改變后的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) } } } }這個插件只是為了演示插件的基本工作方法，實際上該插件實現(xiàn)的比較粗糙。
postCSS提供了詳細(xì)的插件創(chuàng)建文檔[6]。甚至提供了create-postcss-plugin[7]用來創(chuàng)建插件的模版代碼。
由于提供了表達、改寫css AST的能力，postCSS的插件可以實現(xiàn)非常多功能。比如：
上文介紹了Declaration節(jié)點表達「css屬性」的鍵值對，其中值為「字符串」類型。
那么完全可以自定義值的解析規(guī)則。
body { color: getColor(); }通過定義getColor函數(shù)，并在AST中將其解析為函數(shù)執(zhí)行，就能在css文件中用js寫邏輯代碼。
這就是postcss-functions[8]
配置不同的lint規(guī)則，實現(xiàn)css的靜態(tài)語法檢測。這就是stylelint[9]
當(dāng)前postCSS插件按功能劃分大體有如下幾類：
解決全局css問題，比如提供css module[10]支持
使用未全面兼容的css特性，比如autoprefixer[11]
格式化，提高css可讀性
圖片和文字處理
linters，比如stylelint
不同語法的css支持，比如postcss-html[12]可以解析類html文件中
讀到這里，相信你會同意：相比Less、Sass，postCSS才是css處理領(lǐng)域的大殺器。
到此，相信大家對“如何理解postCSS”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
