Question

1。摘要

我找不到如何解决由Autoprefixer生成的重复CSS的问题。

2。 MCVE

2.1。原始文件

KiraAutoprefixer.css：

.KiraFirst, .KiraSecond, .KiraThird::placeholder {
    color: yellow
}

2.2。实际行为

如果是CSS中多个选择器的一个属性：

PostCSS Autoprefixer生成重复项。

在这种情况下，重复— .KiraFirst和.KiraSecond。

.KiraFirst, .KiraSecond, .KiraThird::-webkit-input-placeholder {
    color: yellow
}
.KiraFirst, .KiraSecond, .KiraThird:-ms-input-placeholder {
    color: yellow
}
.KiraFirst, .KiraSecond, .KiraThird::-ms-input-placeholder {
    color: yellow
}
.KiraFirst, .KiraSecond, .KiraThird::placeholder {
    color: yellow
}

2.3。预期的行为

没有.KiraFirst和.KiraSecond重复。

.KiraFirst, .KiraSecond {
    color: yellow
}

.KiraThird::placeholder {
    color: yellow
}

.KiraThird::-webkit-input-placeholder {
    color: yellow
}

.KiraThird:-ms-input-placeholder {
    color: yellow
}

.KiraThird::-ms-input-placeholder {
    color: yellow
}

3。争论

3.1。干

Don't Repeat Yourself。

例如，这是我真正的CSS的一部分：

div.wf.wf-theme-dark :not(.v-transfer-dom) a,
div.wf.wf-theme-dark :not(.v-transfer-dom) a:hover,
div.wf.wf-theme-dark .wf-comment-header .wf-content .wf-meta,
div.wf.wf-theme-dark .wf-comment-item .wf-comment-header,
div.wf.wf-theme-dark .ivu-btn-primary[disabled],
div.wf.wf-theme-dark .ivu-btn-text[disabled],
div.wf.wf-theme-dark .ivu-btn-text[disabled]:hover,
div.wf.wf-theme-dark .ivu-btn-text,
div.wf.wf-theme-dark .ivu-btn-text:hover,
div.wf.wf-theme-dark .ivu-input::-ms-input-placeholder,
div.wf.wf-theme-dark .wf-comment-body .wf-comment-footer a,
div.wf.wf-theme-dark .ivu-menu-item-selected span,
div.wf.wf-theme-dark a.wf-use-wildfire span,
div.wf.wf-theme-dark a.wf-use-wildfire:hover span,
div.wf.wf-theme-dark .wf-separator,
div.wf.wf-theme-dark .wf-no-content-tip,
div.wf.wf-theme-dark .ivu-menu-submenu-title-icon,
div.wf.wf-theme-dark .ivu-icon.ivu-icon-at,
div.wf.wf-theme-dark .ivu-icon.ivu-icon-at.wf-inactive,
div.wf.wf-theme-dark .ivu-input-wrapper textarea.ivu-input,
div.wf.wf-theme-dark .wf-comment-content,
div.wf.wf-theme-dark .wf-post-btn[disabled]:hover,
div.wf.wf-theme-dark .wf-delete-btn.ivu-btn.ivu-btn-text,
div.wf.wf-theme-dark .ivu-menu {
  color: #d2691e;
}

div.wf.wf-theme-dark :not(.v-transfer-dom) a,
div.wf.wf-theme-dark :not(.v-transfer-dom) a:hover,
div.wf.wf-theme-dark .wf-comment-header .wf-content .wf-meta,
div.wf.wf-theme-dark .wf-comment-item .wf-comment-header,
div.wf.wf-theme-dark .ivu-btn-primary[disabled],
div.wf.wf-theme-dark .ivu-btn-text[disabled],
div.wf.wf-theme-dark .ivu-btn-text[disabled]:hover,
div.wf.wf-theme-dark .ivu-btn-text,
div.wf.wf-theme-dark .ivu-btn-text:hover,
div.wf.wf-theme-dark .ivu-input::placeholder,
div.wf.wf-theme-dark .wf-comment-body .wf-comment-footer a,
div.wf.wf-theme-dark .ivu-menu-item-selected span,
div.wf.wf-theme-dark a.wf-use-wildfire span,
div.wf.wf-theme-dark a.wf-use-wildfire:hover span,
div.wf.wf-theme-dark .wf-separator,
div.wf.wf-theme-dark .wf-no-content-tip,
div.wf.wf-theme-dark .ivu-menu-submenu-title-icon,
div.wf.wf-theme-dark .ivu-icon.ivu-icon-at,
div.wf.wf-theme-dark .ivu-icon.ivu-icon-at.wf-inactive,
div.wf.wf-theme-dark .ivu-input-wrapper textarea.ivu-input,
div.wf.wf-theme-dark .wf-comment-content,
div.wf.wf-theme-dark .wf-post-btn[disabled]:hover,
div.wf.wf-theme-dark .wf-delete-btn.ivu-btn.ivu-btn-text,
div.wf.wf-theme-dark .ivu-menu {
  color: #d2691e;
}

两个CSS块之间的唯一区别：placeholder与-ms-input-placeholder。其他所有内容-重复项。

3.2。 Stylelint

我使用Stylelint（和recommended config）检查CSS。 Stylelint在上面的实际示例中显示了错误。

KiraAutoprefixer.css
 28:1  ×  Expected selector "div.wf.wf-theme-dark :not(.v-transfer-dom) a" to come before selector                      no-descending-specificity
          "div.wf.wf-theme-dark :not(.v-transfer-dom) a:hover"
 28:1  ×  Expected selector "div.wf.wf-theme-dark :not(.v-transfer-dom) a" to come before selector                      no-descending-specificity
          "div.wf.wf-theme-dark .wf-comment-body .wf-comment-footer a"
 33:1  ×  Expected selector "div.wf.wf-theme-dark .ivu-btn-text[disabled]" to come before selector                      no-descending-specificity
          "div.wf.wf-theme-dark .ivu-btn-text[disabled]:hover"
 33:1  ×  Expected selector "div.wf.wf-theme-dark .ivu-btn-text" to come before selector "div.wf.wf-theme-dark          no-descending-specificity
          .ivu-btn-text:hover"
 39:1  ×  Expected selector "div.wf.wf-theme-dark .ivu-menu-item-selected span" to come before selector                 no-descending-specificity
          "div.wf.wf-theme-dark a.wf-use-wildfire span"
 39:1  ×  Expected selector "div.wf.wf-theme-dark .ivu-menu-item-selected span" to come before selector                 no-descending-specificity
          "div.wf.wf-theme-dark a.wf-use-wildfire:hover span"
 40:1  ×  Expected selector "div.wf.wf-theme-dark a.wf-use-wildfire span" to come before selector                       no-descending-specificity
          "div.wf.wf-theme-dark a.wf-use-wildfire:hover span"

对于没有重复的CSS，我没有得到这些错误。

我需要禁用no-descending-specificity Stylelint rule→我看不到真正违反此规则的情况。

4。没有帮助

我在2019年3月向自动前缀发布问题跟踪器发布了issue，但仍未修复。
csscss：
```
csscss -v KiraAutoprefixer.css
```

css-purge：

css-purge -i KiraAutoprefixer.css -o KiraCSSPurge.css

cssnano CLI：

module.exports = {
        plugins: [
                require('cssnano')({
                        preset: 'default',
                }),
        ],
};

postcss KiraAutoprefixer.css > KiraCSSNano.css

如何修复Autoprefixer重复项？