postcss-bem插件在webpack4以上版本报错处理 .moveTo is not a function

postcss强大的插件让咱们在编写css的过程当中得到了极大的便利，好比，咱们能够方便的使用BEM语法来命名咱们的组件。

<div class="CompName">
    <h3 class="CompName-contain is-active">我是Title</h3>
    <div class="CompName-contain">我是内容</div>
</div>

@component CompName {
    height: 200px;
    width: 200px;
    margin: auto;

    @descendent contain {
        font-size: 16px;
        font-weight: normal;
        color: #333;

        @when active {
            color: #ff5d23;
        }
    }
}

/* 编译后 */
.CompName {
    height: 200px;
    width: 200px;
    margin: auto;
}

.CompName-contain {
    font-size: 16px;
    font-weight: normal;
    color: #333;
}

.CompName-contain.is-active {
    color: #ff5d23;
}

这种语法的使用只需咱们引入postcss-bem这个插件就能够的。可是在webpack4以上的版本中，却会致使编译报错：rule.moveTo is not a function

xx .moveTo is not a function

这是因为css源字符串解析成的抽象语法树已经废弃了该方法（参考一场由postcss-bem引起的血案）。因此再也不可以使用moveto去操做抽象树中的节点。因此使用append方法来代替便可解决该问题。

newComponent.append(rule);
// rule.moveTo(newComponent);

为此，撸了一个npm包，可供后续开发人员调用。包地址：wlq-postcss-bem
因为第一次发布npm包，没有经验，很不规范，欢迎你们指正。github地址：wlq-postcss-bem。
欢迎你们交流使用。