[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:  desrosj        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Future Release
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:  needs-testing good-first-bug
  Focuses:                 |
---------------------------+------------------------------------------
 Spun off from ticket:53560#comment:19:

 It seems weird that these rules are fully duplicated in the `assets/css
 /ie-editor.css` file:
 {{{
 select {
         border: 3px solid #39414d;
         border-radius: 0;
         color: #28303d;
         font-size: 1.125rem;
         -moz-appearance: none;
         -webkit-appearance: none;
         appearance: none;
         padding: 10px 30px 10px 10px;
         background: #fff url("data:image/svg+xml;utf8,<svg
 xmlns='http://www.w3.org/2000/svg' width='10' height='10'
 fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
         background-position: right 10px top 60%;
 }

 select:focus {
         border: 3px solid #39414d;
         border-radius: 0;
         color: #28303d;
         font-size: 1.125rem;
         -moz-appearance: none;
         -webkit-appearance: none;
         appearance: none;
         padding: 10px 30px 10px 10px;
         background: #fff url("data:image/svg+xml;utf8,<svg
 xmlns='http://www.w3.org/2000/svg' width='10' height='10'
 fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
         background-position: right 10px top 60%;
 }
 }}}
 while they are properly combined in `assets/css/style-editor.css`:
 {{{
 select,
 select:focus {
         border: var(--form--border-width) solid var(--form--border-color);
         border-radius: var(--form--border-radius);
         color: var(--form--color-text);
         font-size: var(--form--font-size);
         -moz-appearance: none;
         -webkit-appearance: none;
         appearance: none;
         padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-
 unit)) var(--form--spacing-unit) var(--form--spacing-unit);
         background: var(--global--color-white)
 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
 width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0
 5,5'/></svg>") no-repeat;
         background-position: right var(--form--spacing-unit) top 60%;
 }
 }}}

 Looking closer, `ie-editor.css` has a lot more unnecessarily duplicated
 rules, for example:
 {{{
 .has-background .has-link-color a {
         color: #28303d;
 }

 .has-background.has-link-color a {
         color: #28303d;
 }
 }}}
 I would expect to see this instead:
 {{{
 .has-background .has-link-color a,
 .has-background.has-link-color a {
         color: #28303d;
 }
 }}}

 Could it be an issue with PostCSS configuration? I've noticed that
 `postcss.config.js` for the theme requires the `postcss-discard-
 duplicates` module, but it seems like it's not being used, or I'm
 misunderstanding how it works.

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