perf: faster css selectors for style calculation (@W-11847644) (#5152)

Author: nolanlawson

ui/components/combobox/base/_index.scss

@@ -297,11 +297,14 @@ input[readonly][role="combobox"] {
  * @selector .slds-combobox__input-value
  * @restrict .slds-combobox__input
  */
-[class*="slds-input-has-icon_left"] .slds-combobox__input[value],
-[class*="slds-input-has-icon--left"] .slds-combobox__input[value],
-[class*="slds-input-has-icon_left"] .slds-combobox__input.slds-combobox__input-value,
-[class*="slds-input-has-icon--left"] .slds-combobox__input.slds-combobox__input-value {
-  padding-left: ($square-icon-small-boundary + $spacing-small);
+.slds-input-has-icon_left,
+.slds-input-has-icon_left-right,
+.slds-input-has-icon--left,
+.slds-input-has-icon--left-right {
+  & .slds-combobox__input[value],
+  & .slds-combobox__input.slds-combobox__input-value {
+    padding-left: ($square-icon-small-boundary + $spacing-small);
+  }
 }
 
 .slds-input_faux:not(.slds-combobox__input-value) {

ui/components/dynamic-icons/score/_index.scss

@@ -19,7 +19,7 @@
 
 // We are variying opacity (instead of stroke & fill)
 // because it is a more performant way of achieving this effect
-[class*="slds-icon-score__"] {
+.slds-icon-score__positive, .slds-icon-score__negative {
   position: absolute;
   opacity: 0;
   transition: opacity 0.4s ease-in-out;

ui/components/dynamic-icons/waffle/_index.scss

@@ -3,6 +3,17 @@
 
 // I need to associate slds-icon-animated with something since there isn't a base variant
 
+// All SLDS size classes like `slds-r1` and `slds-r9` in one string.
+// This is faster for style calculation than `[class*="slds-r"]`.
+/// @private
+@function all-slds-r () {
+  $result: '';
+  @for $i from 1 through 9 {
+    $result: "#{$result}, .slds-r#{$i}";
+  }
+
+  @return str-slice($result, 3); // Remove initial ", "
+}
 
 /**
  * @summary Containing actionable element that holds the waffle icon
@@ -20,7 +31,7 @@
   &:hover,
   &:focus {
 
-    [class*="slds-r"] {
+    #{all-slds-r()} {
       animation: slds-icon-waffle-throb 2 200ms alternate;
     }
 
@@ -80,7 +91,7 @@
   display: block;
   cursor: pointer;
 
-  [class*="slds-r"] {
+  #{all-slds-r()} {
     @include square(rem(5px));
     background-color: var(--slds-g-color-neutral-base-50, #{$color-background-icon-waffle});
     display: inline-block;

ui/components/icons/base/_index.scss

@@ -45,7 +45,17 @@
   }
 }
 
-[class*='slds-icon-action-'] {
+// All action icon classes in one string. This is faster for style calculation than `[class*='slds-icon-action-']`.
+/// @private
+@function action-icons() {
+  $result: '';
+  @each $name in map-keys($bg-actions-map) {
+    $result: "#{$result}, .slds-icon-#{$name}";
+  }
+  @return str-slice($result, 3); // Remove initial ", "
+}
+
+#{action-icons()} {
   padding: $spacing-x-small;
   border-radius: $border-radius-circle;
 }

ui/utilities/grid/_index.scss

@@ -481,15 +481,31 @@
   margin-left: ($spacing-xx-large * -1);
 }
 
+// All slds-col_padded classes in one string. This is faster for style calculation than `[class*='slds-icon-action-']`.
+/// @private
+@function col-padded() {
+  $prefixes: 'slds-col_padded', 'slds-col--padded';
+  $types: '-around', '';
+  $sizes: '-medium', '-large', '';
+
+  $result: '';
+  @each $size in $sizes {
+    @each $type in $types {
+      @each $prefix in $prefixes {
+        $result: "#{$result}, .#{$prefix}#{$type}#{$size}";
+      }
+    }
+  }
+  @return str-slice($result, 3); // Remove initial ", "
+}
+
 /**
  * @summary Initializes a grid column
  *
  * @selector .slds-col
  * @modifier
  */
-.slds-col,
-[class*="slds-col_padded"],
-[class*="slds-col--padded"] {
+.slds-col, #{col-padded()} {
   flex: 1 1 auto;
 }
 
@@ -636,9 +652,7 @@
 .slds-grid--align-center {
   justify-content: center;
 
-  .slds-col,
-  [class*="slds-col_padded"],
-  [class*="slds-col--padded"] {
+  .slds-col, #{col-padded()} {
     flex-grow: 0;
   }
 }
@@ -653,9 +667,7 @@
 .slds-grid--align-space {
   justify-content: space-around;
 
-  .slds-col,
-  [class*="slds-col_padded"],
-  [class*="slds-col--padded"] {
+  .slds-col, #{col-padded()} {
     flex-grow: 0;
   }
 }
@@ -671,9 +683,7 @@
 .slds-grid--align-spread {
   justify-content: space-between;
 
-  .slds-col,
-  [class*="slds-col_padded"],
-  [class*="slds-col--padded"] {
+  .slds-col, #{col-padded()} {
     flex-grow: 0;
   }
 }
@@ -688,9 +698,7 @@
 .slds-grid--align-end {
   justify-content: flex-end;
 
-  .slds-col,
-  [class*="slds-col_padded"],
-  [class*="slds-col--padded"] {
+  .slds-col, #{col-padded()} {
     flex-grow: 0;
   }
 }

ui/utilities/sizing/_index.scss

@@ -15,6 +15,44 @@ $_sizes: (
   'xx-large': $size-xx-large
 );
 
+// All SLDS size classes like `slds-size--medium` and `slds-size--medium-1-of-12` in one string.
+// This is faster for style calculation than `[class*="slds-size_"]`.
+/// @private
+@function all-sizes () {
+  $prefixes: 'slds-size_', 'slds-size--';
+  $columnSizes: 2, 3, 4, 5, 6, 7, 8, 12;
+
+  $result: '';
+  @each $prefix in $prefixes {
+    @each $size in map-keys($_sizes) {
+      $result: "#{$result}, .#{$prefix}#{$size}";
+    }
+    @each $columnSize in $columnSizes {
+      @for $i from 1 through $columnSize {
+        $result: "#{$result}, .#{$prefix}#{$i}-of-#{$columnSize}";
+      }
+    }
+  }
+
+  @return str-slice($result, 3); // Remove initial ", "
+}
+
+// All SLDS classes like `slds-small-size_medium` in one string.
+// Note that the first size is only a breakpoint size, and the second is all possible sizes.
+// This is faster for style calculation than `[class*="slds-#{$breakpointSize}-size_"]`
+/// @private
+@function all-responsive-sizes ($breakpointSize, $prefix) {
+  $infixes: '-size_', '-size--';
+
+  $result: '';
+  @each $infix in $infixes {
+    @each $size in map-keys($_sizes) {
+      $result: "#{$result}, .#{$prefix}#{$breakpointSize}#{$infix}#{$size}";
+    }
+  }
+  @return str-slice($result, 3); // Remove initial ", "
+}
+
 /**
  * @selector .slds-size_small
  * @modifier
@@ -63,8 +101,7 @@ $_sizes: (
   @media (min-width: #{pem($breakpoint)}) {
 
     // Fixes issue when sizing is used with slds-col
-    [class*="slds-#{$size}-size_"],
-    [class*="slds-#{$size}-size--"] {
+    #{all-responsive-sizes($size, 'slds-')} {
       flex: none;
     }
 
@@ -96,8 +133,7 @@ $_sizes: (
   @media (max-width: #{pem($breakpoint)}) {
 
     // Fixes issue when sizing is used with slds-col
-    [class*="slds-max-#{$size}-size_"],
-    [class*="slds-max-#{$size}-size--"] {
+    #{all-responsive-sizes($size, 'slds-max-')} {
       flex: none;
     }
 
@@ -128,7 +164,6 @@ $_sizes: (
 }
 
 // Fixes issue when sizing is used with slds-col
-[class*="slds-size_"],
-[class*="slds-size--"] {
+#{all-sizes()} {
   flex: none;
 }