refactor(dry): duplicates, if one property for multiple selectors

[Kristinita]

1. Summary

If one property for multiple selectors in CSS:

    PostCSS Autoprefixer generate duplicates.

2. MCVE

• KiraAutoprefixer.css:

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

3. Behavior

3.1. Expected

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

3.2. Actual

.KiraFirst and .KiraSecond repeat.

.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
}

• Autoprefixer CSS online site:

4. Argumentation

• Don't Repeat Yourself

For example, Autoprefixer add to my real file ~60 selectors duplicates because of different ::placeholder prefixes:

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-input::-webkit-input-placeholder,div.wf.wf-theme-dark .wf-comment-body .wf-comment-footer a,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 .ivu-btn-text,div.wf.wf-theme-dark .ivu-btn-text:hover,div.wf.wf-theme-dark .wf-separator,div.wf.wf-theme-dark .wf-no-content-tip,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 .ivu-menu-submenu-title-icon,div.wf.wf-theme-dark .ivu-icon-at,div.wf.wf-theme-dark .ivu-menu-item-selected span,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{color:Kira-Wildfire-Foreground}
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-input:-ms-input-placeholder,div.wf.wf-theme-dark .wf-comment-body .wf-comment-footer a,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 .ivu-btn-text,div.wf.wf-theme-dark .ivu-btn-text:hover,div.wf.wf-theme-dark .wf-separator,div.wf.wf-theme-dark .wf-no-content-tip,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 .ivu-menu-submenu-title-icon,div.wf.wf-theme-dark .ivu-icon-at,div.wf.wf-theme-dark .ivu-menu-item-selected span,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{color:Kira-Wildfire-Foreground}
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-input::-ms-input-placeholder,div.wf.wf-theme-dark .wf-comment-body .wf-comment-footer a,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 .ivu-btn-text,div.wf.wf-theme-dark .ivu-btn-text:hover,div.wf.wf-theme-dark .wf-separator,div.wf.wf-theme-dark .wf-no-content-tip,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 .ivu-menu-submenu-title-icon,div.wf.wf-theme-dark .ivu-icon-at,div.wf.wf-theme-dark .ivu-menu-item-selected span,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{color:Kira-Wildfire-Foreground}
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-input::placeholder,div.wf.wf-theme-dark .wf-comment-body .wf-comment-footer a,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 .ivu-btn-text,div.wf.wf-theme-dark .ivu-btn-text:hover,div.wf.wf-theme-dark .wf-separator,div.wf.wf-theme-dark .wf-no-content-tip,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 .ivu-menu-submenu-title-icon,div.wf.wf-theme-dark .ivu-icon-at,div.wf.wf-theme-dark .ivu-menu-item-selected span,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{color:Kira-Wildfire-Foreground}

Thanks.

[ai]

Thanks, you fill the issue very good. It is good, that you found it :).

But this behavior was added with a purpose. We can’t generate ::-webkit-a, ::moz-a, because if Safari doesn’t know ::moz-a, it will ignore the whole rule. Browsers need to understand every component of the selector to apply the rule :(.

[Kristinita]

@ai , Status: 😿 Not fixed

1. Apologies

Sorry, this code from 3.1 item of my example will not work:

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

But Autoprefixer still create duplicates and it still possible to solve.

2. Expected behavior

No .KiraFirst, .KiraSecond for each block.

2.1. Sources

• Codepen live demo:

<textarea class="KiraThird" placeholder="Kira Goddess"></textarea>

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

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

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

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

2.2. Result

• Codepen:

Tested in Firefox and Edge, that required -ms- prefix.

3. Not helped

I can't find the tool, that automatically fix this problem. I try cssnano and css-purge.

Thanks.

[ai]

Good idea

[ai]

Do you want to add great open source contribution to your resume?

To add this feature you need to fix this file
https://github.com/postcss/autoprefixer/blob/master/lib/selector.js

[fanich37]

While working on this issue i found probably a bug.
Assume we have such input css code:

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

The output is probably not what we expect:

.KiraFirst, .KiraSecond, .KiraThird::placeholder, a::-moz-selection {
  color: yellow
}

.KiraFirst, .KiraSecond, .KiraThird::placeholder, a::-webkit-selection {
  color: yellow
}

undefined {
  color: yellow
}

.KiraFirst, .KiraSecond, .KiraThird::placeholder, a::-ms-selection {
  color: yellow
}

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

[ai]

Yeap seems like we have a bug here.

[Dan503]

I was about to say how splitting the rule into multiple copies is not a bug but then I saw the undefined.

Yep, that's a bug 😅

[fanich37]

I was about to say how splitting the rule into multiple copies is not a bug but then I saw the undefined.

Yep, that's a bug

It's not only about undefined. Autoprefixer completely ignores the .KiraThird::placeholder selector. As far as I get it Autoprefixer only considers the last one to be prefixed in such cases.

[ai]

Thanks for the report and review. The fix was released in 9.6.5.