源码学习-postcss-pxtransform

这是一个postcss 插件，主要功能是根据不同平台，将css 中的px 单位，转化为rem 或者 rpx;

postcss 的主要原理是将css 转换成ast , 然后通过操作ast 的节点，最后将修改后的ast 转换为css . 在原理实现上跟babel 是一样的。

既然是修改节点，当然要知道节点的类型有哪些了？

h1 {
font-family: “Open Sans”, fontstack(“Arial”);
}

rule: 一个css 规则，包括一个选择器，以及用大括号包含的属性值。如上的一段就是一条规则
decl(declaration): rule 里面的一条样式。由prop 和 value 组成。如： font-family: “xxxxx” 就是一个decl. 其中prop 是 font-family; value 是 xxxxx;
comment: 一条注释。比如： // postcss-pxtransform rn eject enable
AtRules: 以@开头的规则。比如@imort “xxx.css”; @media screen and (max-width: 300px) {}

核心流程：
1 通过walkDecls 遍历所有的decl .
2 通过正则替换，将px 转换成rem 或者 rpx

考虑到插件的灵活性，增加了不转换的规则
主要通过方式
1 在css 文件头，通过注释： postcss-pxtransform disable
2 在配置信息中，增加包含和非包含的正则匹配，将一些规则排除在外，不参与转换
这里的正则形如： ['position, !background-position], 意思是所有包含posiition 的，但是却不包含background-position 的delc 。

这里有一个疑问： 为什么不通过黑名单的形式，来排除掉不参与转换的呢？而是通过包含和非包含两重关系来判断呢？
答： 目前想到的答案是：这种方案可能更灵活。如果只有黑名单，可能黑名单太多，导致不好配置。