首先，需要了解什么是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插件(暂时不透露名字) 代码解析出一篇文章。
