什么是 PostCSS?
PostCSS 使我们能够 js 函数操作 CSS . 它做了下面三件事情:
1、PostCSS 将你的 CSS 文件转变成 JS 对象.
2、PostCSS 插件会遍历生成的js对象添加/删除/修改 选择器或属性.
3、PostCSS 将该对象转换成 CSS 文件.
写一个 PostCSS 插件
我们编写移动端h5页面的时候，如果需要用到overflow 属性，我们一般会加上-webkit-overflow-scrolling属性，使滚动更流畅，下面我们编写一个PostCSS插件来帮我们自动完成这个过程。
克隆 PostCSS Plugin Boilerplate 项目
$ git clone git@github.com:postcss/postcss-plugin-boilerplate.git
运行下面命令:
$ node ./postcss-plugin-boilerplate/start
该命令会问你几个问题. 他会从git 拉取你的 name 和 email, 然后问你 Github 用户名
接下来，起一个插件名。以 postcss- 开头. 描述你的插件是干啥用的.
完成上面设置后, 会生成一个样板模板目录，进入生成的目录：
$ cd postcss-test-plugin
你的逻辑需要放在 index.js 中:
看一下 index.js 中的代码:
var postcss = require('postcss');
module.exports = postcss.plugin('postcss-test-plugin', function (opts) {
opts = opts || {}; // 处理 options
return function (root, result) {
//遍历所有的选择器*
root.walkRules(function(rule) {
//遍历所有的属性
rule.walkDecls(function(decl) {
//dect 是一个包含属性-值对和一些操作方法的样式对象，最重要的两个属性是decl.prop 属性名和decl.value 属性值.
//过滤包含 overflow , overflow-x , overflow-y 的属性
rule.walkDecls(/^overflow-?/, function(decl) {
if (decl.value === 'scroll') {
//判断是否已经有-webkit-overflow-scrolling，防止重复添加
var hasTouch = rule.some(function(i) {
return i.prop === '-webkit-overflow-scrolling';
});
if (!hasTouch) {
rule.append({
prop: '-webkit-overflow-scrolling',
value: 'touch'
});
}
}
});
});
});
};
});
