postcss 插件

什么是 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 [email protected]:postcss/postcss-plugin-boilerplate.git

运行下面命令:

$ node ./postcss-plugin-boilerplate/start

该命令会问你几个问题. 他会从git 拉取你的 name 和 email, 然后问你 Github 用户名

接下来,起一个插件名。以 postcss- 开头. 描述你的插件是干啥用的.

image

完成上面设置后, 会生成一个样板模板目录,进入生成的目录:

$ 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'

});

}

}

});

});

});

};

});

你可能感兴趣的:(postcss 插件)