怎样使用autoprefixer时保留-webkit-box-orient等样式规则

4,220 阅读2分钟

问题

在一个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 */
}

失效原因没有查找出来,欢迎补充。