[wp-trac] [WordPress Trac] #53605: Twenty Twenty-One: Investigate duplicate rules in `ie-editor.css`

[WordPress Trac]

#53605: Twenty Twenty-One: Investigate duplicate rules in `ie-editor.css`
------------------------------------------+-----------------------------
 Reporter:  SergeyBiryukov                |       Owner:  (none)
     Type:  defect (bug)                  |      Status:  new
 Priority:  normal                        |   Milestone:  Future Release
Component:  Bundled Theme                 |     Version:
 Severity:  normal                        |  Resolution:
 Keywords:  needs-testing good-first-bug  |     Focuses:
------------------------------------------+-----------------------------

Comment (by ryelle):

 The `postcss-discard-duplicates` plugin gets rid of duplicate rules, it
 wouldn't combine different selectors like that.

 It looks like it's probably the `postcss-css-variables` plugin, which is
 used to support IE11 and below. In fact, there's an issue for
 [https://github.com/MadLittleMods/postcss-css-variables/issues/58
 unnecessarily splitting up comma-separated rules], which seems to be
 what's happening here. The CSS in `style-editor.css`

 {{{
 .has-background .has-link-color a,
 .has-background.has-link-color a {
         color: var(--wp--style--color--link, var(--global--color-
 primary));
 }
 }}}

 is transformed to this in `ie-editor.css`

 {{{
 .has-background .has-link-color a {
         color: #28303d;
 }

 .has-background.has-link-color a {
         color: #28303d;
 }
 }}}

 They suggest using a minification plugin or
 [https://github.com/cssnano/cssnano/tree/master/packages/postcss-merge-
 rules#by-declarations postcss-merge-rules] to merge these back together. …
 Since I'm here, I gave the merge-rules plugin a try and it works
 surprisingly well. I don't have my IE machine up at the moment, so I can't
 test the output, but it looks correct.

 Just noting, this isn't the first issue we've had with `postcss-css-
 variables` - see #52158 where the `postcss-discard-duplicates` plugin was
 added to clean up another bug.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/53605#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform