编写自己的第一个postcss插件

本文是官方文档的翻译，原文见：

https://dockyard.com/blog/2018/02/01/writing-your-first-postcss-plugin

 

本文删除了大部分原文不是太有用的相关介绍，只保留原文编写插件部分，并将原本分步讲解的代码合在一起，写上对应注释。

 

什么是 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'
});
}
}
});

});
});
};
});