首先，需要了解什么是postcss囚玫。
postcss
postcss是類似Babel的css編譯器坑雅，可以利用parser將css代碼解析成AST，再通過插件（例如比較熟悉的autoprefixer）改寫AST，最終輸出改寫后的css按声。
與less膳犹、sass等css預(yù)處理器不同，postcss的輸入和返回都是css签则。
怎么查看css轉(zhuǎn)化后的AST
借助astexplorer须床，可以方便查看css代碼生成的AST。
先選擇css
接著選擇postcss
然后渐裂，我們就可以在左邊的編輯區(qū)域?qū)慶ss豺旬，右邊會生成對應(yīng)的AST，例如：
一個(gè)css文件解析成AST之后會生成一個(gè)對象（如上圖）柒凉，nodes屬性包括文件內(nèi)所有聲明（包括注釋）族阅。
注釋
注釋在AST中被轉(zhuǎn)化成如下結(jié)構(gòu)，包括在文件中的位置(source)膝捞，類型(comment) 以及 注釋內(nèi)容(text)：
css選擇器和語句
css代碼被轉(zhuǎn)化成如下結(jié)構(gòu)坦刀，包括類型(decl)，位置蔬咬，屬性名(prop)鲤遥，屬性值(value)還有選擇器(selector)：
媒體查詢
一段簡單的媒體查詢代碼：
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
生成AST之后如下：
可以看到，媒體查詢的類型是 atrule 林艘，媒體查詢名稱name渴频，name之后的參數(shù) params，媒體查詢的子元素則是跟上面的css選擇器和語句完全一樣北启。
如何寫一個(gè)插件
有一個(gè)明確的想法
首先卜朗，要明確你需要用這個(gè)插件對css做什么，目前有許多現(xiàn)成的postcss插件可供選擇咕村，例如autoprefixer场钉、pxtorem等。
插件格式
可以閱讀這篇文章https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md懈涛。
大多數(shù)插件都這樣寫：
可能包括以下幾個(gè)內(nèi)容：
-
Root: 樹頂部的節(jié)點(diǎn)逛万，代表CSS文件； -
AtRule: 語句以@開頭批钠，例如@charset“ UTF-8”或@media（屏幕）{}宇植； -
Rule: 聲明內(nèi)部的選擇器； -
Declaration: 鍵值對如color: black -
Comment: 注釋埋心。
你可以在PostCSS API文檔里面找到很多有用的函數(shù)和鉤子指郁。
后續(xù)作者會對某個(gè)postcss插件(暫時(shí)不透露名字) 代碼解析出一篇文章。
