怎样使用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 */
}
复制代码

失效缘由没有查找出来，欢迎补充。