[wp-trac] [WordPress Trac] #53560: Twenty Twenty-One: Dropdown arrow missing in the widget editor

[WordPress Trac]

#53560: Twenty Twenty-One: Dropdown arrow missing in the widget editor
-------------------------------------------------+-------------------------
 Reporter:  zieladam                             |       Owner:  desrosj
     Type:  defect (bug)                         |      Status:  reopened
 Priority:  normal                               |   Milestone:  5.8
Component:  Bundled Theme                        |     Version:  trunk
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch commit fixed-major dev-    |     Focuses:
  reviewed                                       |
-------------------------------------------------+-------------------------

Comment (by SergeyBiryukov):

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

 This should probably be investigated in a new ticket though, and should
 not be a blocker for backporting [51296].

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