Как исправить дубликаты Autoprefixer? - PullRequest
Новая
       107

Как исправить дубликаты Autoprefixer?

0 голосов
/ 23 сентября 2019

1.Резюме

Я не мог найти, как я могу исправить дублированный CSS, сгенерированный Autoprefixer.

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.СУХОЙ

Не повторяйся .

Например, часть моего настоящего 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 (и рекомендуемая конфигурация ) для проверки 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 → Я не вижу реальных нарушений этого правила.

4.Не помогло

  1. Я отправил проблему в систему отслеживания проблем Autoprefixer в марте 2019 года → она все еще не исправлена.

  2. csscss : 

    csscss -v KiraAutoprefixer.css

  3. css-purge :

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

  4. cssnano CLI : 

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

    postcss KiraAutoprefixer.css > KiraCSSNano.css
...