共计 1793 个字符，预计需要花费 5 分钟才能阅读完成。
git 地址：开发一个 psotcss 插件
节点类型
postcss 会将我们的 css 生成 ast，然后会去遍历它，在遍历的过程中会传给我们一些不同类型的节点对象，我们主要需要了解的几个类型：
css ast 主要有 3 种父类型
AtRule: @xxx 的这种类型，如 @screen
Comment: 注释
Rule: 普通的 css 规则
还有几个个比较重要的子类型：
decl：指的是每条具体的 css 规则
rule：作用于某个选择器上的 css 规则集合
这是 test 的地方的，不熟悉 ast 的可以先了解一下:css ast 结构
postCss 操作方法
postCss 为我们提供了一些方便的操作方法遍历
walk: 遍历所有节点信息，无论是 atRule、rule、comment 的父类型，还是 rule、decl 的子类型
walkAtRules：遍历所有的 atRule
walkComments：遍历所有的注释节点
walkDecls：遍历所以的属性
walkRules：遍历所有的 css 代码块
root.walkDecls(decl => {
decl.prop = decl.prop.split(”).reverse().join(”);
});
postcss 在遍历的过程中，会将当前遍历的对象的 cell 传给回调函数，该参数是对应的 rule，decl 或者 comment 等 Constructor 等构造函数的实例，根据遍历的节点不同，该实例可能会有如下属性：
nodes: css 规则的节点信息集合
decl: 每条 css 规则的节点信息
prop: 样式名，如 width
value: 样式值，如 10px
type: 类型
source: 包括 start 和 end 的位置信息，start 和 end 里都有 line 和 * column 表示行和列
selector: type 为 rule 时的选择器
name: type 为 atRule 时 @紧接 rule 名，譬如 @import ‘xxx.css’ 中的 import
params: type 为 atRule 时 @紧接 rule 名后的值，譬如 @import ‘xxx.css’ 中的 xxx.css
text: type 为 comment 时的注释内容
同样还有继承的一些方法，给我操作 css 的，比如操作每条具体 css 属性的 declaration：
after
before
cleanRaws
clone
cloneAfter
cloneBefore
error
next
prev
raw
remove
replaceWith
root
toString
warn
postcss plugin
postcss 插件如同 babel 插件一样，有固定的格式
export default postcss.plugin(‘postcss-plugin-name’, function (opts) {
opts = opts || {};
return function (root, result) {
// 处理逻辑
};
});
注册个插件名，并获取插件配置参数 opts
返回值是个函数，这个函数主体是你的处理逻辑，有 2 个参数，一个是 root，css ast 的根节点。另一个是 result，返回结果对象，譬如 result.css，获得处理结果的 css 字符串，result.message 包含组件里创建的 warnings 和自定义信息，result.warn() 创造一个 warning 实例并将其加入到 result.message 中，result.warnings() 获得所有创建过的 warning。
注意组件的异常信息处理，不要直接 console，因为一些 postcss 处理器会过滤掉 console 的输出导致异常信息丢失，用 node.warn 或者 node.error 创造 CssSyntaxError 实例，会自动带上源码中的位置信息帮助 debug，加到异常信息队列里。
直接调用 postcss 下的方法
可以用 postcss.parse 来处理一段 css 文本，拿到 css ast，然后进行处理，再通过调用 toResult().css 拿到处理后的 css 输出，在一些简单的处理中可以用这种方法。
写在最后：
想写一下的可以按照这里的指引，很详细 https://github.com/postcss/postcss-plugin-boilerplate
这是我写的一个将 px 转为 vw 的插件 vw-by-px
参考：
http://api.postcss.org
postcss-pixel-to-viewport
