怎樣使用autoprefixer時保留-webkit-box-orient等樣式規則

問題

在一個vue-cli2的項目中，使用Less寫了一個文字2行溢出後顯示「...」的樣式，本地完美。使用 autoprefixer^9.5.1 打包後，-webkit-box-orient: vertical;被刪除了。

開發代碼(less)

.doc-name {
    ...
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
複製代碼

package.json文件中browserslist

{
    ...
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ] 
}
複製代碼

輸出結果

.doc-name {
    ...
    display: -webkit-box;
    -webkit-line-clamp: 2;
}
複製代碼

最後定位到，是autoprefixer把這個樣式規則刪除了。

解決方案：

1. （不推薦）給package.json中browserslist屬性增長'Safari >= 6'，改變目標適配瀏覽器，天然會保留這些過期樣式規則
2. （不推薦）在./build/utils.js文件cssLoaders方法中,給 postcssLoader 變量的options屬性增長autoprefixer: {remove: false}
3. （有效）使用官網Control Comments(控制註釋)（塊級）

   /*! autoprefixer: off */
       ...
       /*! autoprefixer: on */
   複製代碼

4. （無效）使用官網Control Comments(控制註釋)（單行）

   /*! autoprefixer: ignore next */
       ...
   複製代碼

我不喜歡方案1，方案2。

• 方案1，會增長一些我不想去適配的瀏覽器的代碼。
• 方案2，沒有幫我刪除多餘的一些過期代碼。
• 方案3， 方案4，爲何用/*!...\*/這種方式書寫，和autoprefixer的github上的readme中demo不一致，多了'!'。緣由：在postcss-loader在處理css時會把非'!'開頭的comment(註釋)刪除掉了。

postcss-discard-comments源代碼：
postcss-discard-comments\dist\lib\commentRemover.js

CommentRemover.prototype.canRemove = function (comment) {
    var remove = this.options.remove;
    if (remove) {
        return remove(comment);
    } else {
        // 以!開頭的註釋是重要的，不刪除
        var isImportant = comment.indexOf('!') === 0;
        if (!isImportant) {
            return true;
        } else if (isImportant) {
            if (this.options.removeAll || this._hasFirst) {
                return true;
            } else if (this.options.removeAllButFirst && !this._hasFirst) {
                this._hasFirst = true;
                return false;
            }
        }
    }
};
複製代碼

查看autoprefixer源代碼：
node_modules\autoprefixer\lib\processor.js

// ！無關緊要
var IGNORE_NEXT = /(!\s*)?autoprefixer:\s*ignore\s+next/i;
...
_proto.disabled = function disabled(node, result) {
    ...
    if (p && p.type === 'comment' && IGNORE_NEXT.test(p.text)) {
        node._autoprefixerDisabled = true;
        node._autoprefixerSelfDisabled = true;
        return true;
    }
    ...
    // ！無關緊要
    if (/(!\s*)?autoprefixer:\s*(off|on)/i.test(i.text)) {
      if (typeof status !== 'undefined') {
        result.warn('Second Autoprefixer control comment ' + 'was ignored. Autoprefixer applies control ' + 'comment to whole block, not to next rules.', {
          node: i
        });
      } else {
        status = /on/i.test(i.text);
      }
    }
}
複製代碼

能夠看到這兩個Control Comment能夠用/*! ... */這種方式書寫。

方案測試結果：

方案3，有效

/*! autoprefixer: off */ ... /*! autoprefixer: on */

開發代碼(less)

.doc-name {
    ...
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /*! autoprefixer: on */
}
複製代碼

輸出結果

.doc-name {
    ...
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical
    /*! autoprefixer: on */
}
複製代碼

方案4，無效

/*! autoprefixer: ignore next */

輸出結果(less)

.doc-name {
    ...
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
}
複製代碼

output

.doc-name[data-v-2da4f5e4] {
    ...
    display: -webkit-box;
    -webkit-line-clamp: 2
    /*! autoprefixer: ignore next */
}
複製代碼

失效緣由沒有查找出來，歡迎補充。