PERF: eliminate some slow CSS selectors (#25392)

app/assets/javascripts/admin/addon/templates/users-list-show.hbs

@@ -240,11 +240,16 @@
             {{/if}}
 
             <div
-              class="directory-table__cell user-role{{if
+              class={{concat-class
-                  (or user.admin user.moderator user.second_factor_enabled)
+                "directory-table__cell"
-                  ''
+                "user-role"
-                  '--empty'
+                (if
-                }}"
+                  (not
+                    (or user.admin user.moderator user.second_factor_enabled)
+                  )
+                  "--empty"
+                )
+              }}
             >
               <span class="directory-table__label">
                 <span>{{i18n "admin.users.status"}}</span>

app/assets/stylesheets/common/base/_topic-list.scss

@@ -224,7 +224,7 @@
   .main-link {
     @extend .topic-list-main-link;
 
-    .raw-topic-link > * {
+    .raw-topic-link a {
       pointer-events: none;
     }
 

app/assets/stylesheets/common/base/crawler_layout.scss

@@ -80,9 +80,6 @@ body > noscript {
     table-layout: fixed;
     overflow: hidden;
     margin: 2em 0;
-    .posters > a {
-      float: none;
-    }
 
     thead {
       border-bottom: 1px solid #ddd;

app/assets/stylesheets/common/base/directory.scss

@@ -314,7 +314,7 @@
       }
     }
 
-    [class*="--empty"] {
+    .--empty {
       display: none;
     }
   }

app/assets/stylesheets/common/base/discourse.scss

@@ -281,11 +281,6 @@ textarea {
   color: var(--d-input-text-color);
   caret-color: currentColor;
 
-  &[class*="span"] {
-    float: none;
-    margin-left: 0;
-  }
-
   &[disabled],
   &[readonly] {
     cursor: not-allowed;

app/assets/stylesheets/common/base/topic.scss

@@ -18,7 +18,7 @@ $topic-progress-height: 42px;
   }
 }
 
-[class*="archetype-"] {
+#main-outlet {
   --below-topic-margin: 0.75em;
 }
 

app/assets/stylesheets/common/components/color-input.scss

@@ -1,8 +1,7 @@
 .color-picker {
   display: flex;
-  * {
+  align-items: stretch;
-    height: 35px;
+
-  }
   .add-on {
     @include form-item-sizing;
     background-color: var(--primary-low);
@@ -12,13 +11,14 @@
     padding-right: 0.5em;
   }
   .hex-input {
-    margin-right: 0;
+    margin: 0;
   }
   .picker {
     padding: 0;
     border-left: none;
     cursor: pointer;
     margin-bottom: 0;
+    height: unset;
   }
   // Reset webkit/blink default style
   input[type="color"]::-webkit-color-swatch-wrapper {

plugins/chat/assets/stylesheets/common/base-common.scss

@@ -172,13 +172,6 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
   }
 }
 
-.topic-title-chat-icon {
-  display: inline-block;
-  * {
-    display: inline-block;
-  }
-}
-
 body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
   gap: 0;
 }

plugins/chat/assets/stylesheets/common/chat-drawer.scss

@@ -46,13 +46,10 @@ html.rtl {
     left: var(--composer-right, 20px);
     right: 0;
   }
-
-  > * {
-    pointer-events: auto;
-  }
 }
 
 .chat-drawer {
+  pointer-events: auto;
   align-self: flex-end;
   width: 400px;
   min-width: 250px !important; // important to override inline styles

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -1,5 +1,6 @@
 .discourse-local-date {
-  > * {
+  svg,
+  span {
     pointer-events: none;
   }
 

plugins/poll/assets/stylesheets/common/poll.scss

@@ -1,7 +1,4 @@
 div.poll {
-  > * {
-    box-sizing: border-box;
-  }
   margin: 1em 0;
   border: 1px solid var(--primary-low);
   display: grid;
@@ -38,6 +35,7 @@ div.poll {
   }
 
   .poll-info {
+    box-sizing: border-box;
     grid-area: info;
     display: flex;
     line-height: var(--line-height-medium);
@@ -207,6 +205,7 @@ div.poll {
   }
 
   .poll-container {
+    box-sizing: border-box;
     grid-area: poll;
     padding: 1em;
     width: 100%;
@@ -230,6 +229,7 @@ div.poll {
   }
 
   .poll-buttons {
+    box-sizing: border-box;
     grid-area: buttons;
     display: flex;
     flex-wrap: wrap;