首先，需要了解什么是postcss。

postcss

postcss是類似Babel的css編譯器，可以利用parser將css代碼解析成AST，再通過插件（例如比較熟悉的autoprefixer）改寫AST，最終輸出改寫后的css。

與less、sass等css預處理器不同，postcss的輸入和返回都是css。

怎么查看css轉化后的AST

借助astexplorer，可以方便查看css代碼生成的AST。

先選擇css

image.png

接著選擇postcss

image.png

然后，我們就可以在左邊的編輯區域寫css，右邊會生成對應的AST，例如：

image.png

一個css文件解析成AST之后會生成一個對象（如上圖），nodes屬性包括文件內所有聲明（包括注釋）。

注釋

注釋在AST中被轉化成如下結構，包括在文件中的位置(source)，類型(comment) 以及 注釋內容(text)：

image.png

css選擇器和語句

css代碼被轉化成如下結構，包括類型(decl)，位置，屬性名(prop)，屬性值(value)還有選擇器(selector)：

image.png

媒體查詢

一段簡單的媒體查詢代碼：

@media screen and (max-width: 300px) {  
    body { 
        background-color:lightblue; 
    } 
}

生成AST之后如下：

image.png

可以看到，媒體查詢的類型是 atrule ，媒體查詢名稱name，name之后的參數 params，媒體查詢的子元素則是跟上面的css選擇器和語句完全一樣。

如何寫一個插件

有一個明確的想法

首先，要明確你需要用這個插件對css做什么，目前有許多現成的postcss插件可供選擇，例如autoprefixer、pxtorem等。

插件格式

可以閱讀這篇文章https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md。

大多數插件都這樣寫：

image.png

可能包括以下幾個內容：

• Root: 樹頂部的節點，代表CSS文件；
• AtRule: 語句以@開頭，例如@charset“ UTF-8”或@media（屏幕）{}；
• Rule: 聲明內部的選擇器；
• Declaration: 鍵值對如color: black
• Comment: 注釋。

你可以在PostCSS API文檔里面找到很多有用的函數和鉤子。

后續作者會對某個postcss插件(暫時不透露名字) 代碼解析出一篇文章。