一场由postcss-bem引起的血案

缘起

楼主最近搭建了一套先后端开发环境用于开发本身的网站并尝试一些有趣的前端技术，在整个环境运行正常以后，楼主某天心血来潮想将以前的less文件用pcss代替，使用bem的方式去编写css,而后用postcss-bem插件去处理样式规则的转换。在一切配置准备就绪后，正当我兴致勃勃的运行webpack编译打包时，使人惊奇的事情发生了
源代码:

postcss处理后结果：

很明显的是在component声明中的样式规则能够正常输出，可是在子声明中的规则就被干掉了，尽管class能够正常解析。

这强烈的刺激到了楼主的好奇之心，因而我便开始扒这个插件的源码，终于发现了问题所在

postcss-bem插件在处理modifier和descendent类型声明的过程当中将当前规则的子节点移植到newRule时用的是moveTo方法，因为我以前升级了webpack4,并为了适配webpack4将其余的loader等也升级到了最新版，而在最新版的postcss中，由css源字符串解析成的抽象语法树已经废弃了该方法，致使当前规则的子节点不能移植到新建的规则newRule中，从而使子声明中的样式规则丢失。

明白了这一点以后我准备给该项目的开发者提issue，却发现npm网站中该项目连接到的Github地址404了，对，你没看错，就是404了

此刻的心里：开发者你出来，我保证不打死你

拓展

基于上述缘由，我决定本身开发一个postcss-bem插件，能够帮助到那些和我遇到相同问题的开发者，顺便也帮助你们了解怎样去开发一个postcss插件。

@mozheng-neal/postcss-bem

由于旧项目的代码无人维护并且有可能会有其余坑，因此我选择了从新造轮子，这就是@mozheng-neal/postcss-bem，与此同时经过缓存父级元素选择器的方式，它在元素选择器的生成上拥有更快的速度。你们能够在github上看到该项目的源代码和使用方式(您的star是对我最大的鼓励)。

接下来我会用一个简单的示例向你们介绍如何写一个postcss插件，以便你们之后在开发过程当中能够利用本身的奇思妙想创造更多有趣的东西。

如何写一个postcss插件

假设咱们要实现这样一个功能：在css的每一个样式声明中添加一个color属性，值为#666，若是当前声明中已经存在color属性但值不为#666，那么就将其设置为#666。
首先咱们来看下一个postcss插件的基本结构

const postcss = require('postcss')
postcss.plugin(pluginName, function (opts) {
  return function (root, result) {
    // root is the root node object
    // this is where your plugin process logic should be placed
  }  
})
复制代码

postcss会将获取到的css源码字符串转换为js表示的抽象语法树，上述的root就表示该语法树的根节点。要实现咱们以前想要的功能，在插件逻辑中咱们须要借助一些postcss为节点对象提供的API。

return function (root, result) {
  root.walkRules(function (rule) {
    // rule为样式文件中的声明块
    let hasColorProp = false
    rule.walkDecls(function (decl) {
      /* * decl表示声明块中的每条css属性节点 * 好比color:#fff会被解析成decl.prop === color,decl.value === #fff */
      if (decl.prop === 'color') {
        hasColorProp = true
        if (decl.value !== '#666') {
          decl.value = '#666'
        }
      }
    })
    if (!hasColorProp) {
      rule.append({prop: 'color', value: '#666'})
    }
  })
}
复制代码

经过如此简单的一个插件就能完成以往咱们须要付出不少手力劳动才能作到的事是否是开心到爆炸

在这个过程当中咱们改动的只是抽象语法树结构，在插件处理完成后postcss会利用转换后的抽象语法树生成新的css源码字符串。而这还只是咱们对于postcssAPI的简单应用，postcss为节点对象提供了更加丰富的能力，若是想了解更多，你能够参考 postcssAPI详情

结语

postcss是一个很是便利的css开发工具，使用得当也能够极大提高你的开发效率，并且postcss插件的编写也并不复杂，它绝对是你在前端开发的学习过程当中值得去掌握的一个技能。最后再啰嗦一句，欢迎你们使用个人postcss-bem插件，有任何问题欢迎提issue, 我会一直维护这个项目的。

插播一条广告

蘑菇街前端开发团队持续招聘高级/资深前端开发工程师，欢迎各位大佬砸简历给我哦，邮箱m13710224694@163.com