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。
歡迎你們交流使用。