如何写一个postcss插件

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