perf(css): remove universal * subjects and expand merged :is() selector lists

.changeset/fast-pumas-juggle.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Improve CSS style-recalc performance by removing selectors with universal subjects and expanding merged `:is()` selector lists so the browser can fast-reject them. Affects `autocomplete-item`, `Popover-message--*`, `breadcrumb-item`, and `FormControl-checkbox-wrap`/`FormControl-radio-wrap` styles.

app/components/primer/alpha/auto_complete.pcss

@@ -92,15 +92,13 @@
   background-color: var(--overlay-bgColor);
   border: 0;
 
+  /* `color` is inherited, so setting it on the item recolors descendants
+  ** without a universal `… *` descendant rule (which forces a slow
+  ** style-recalc match attempt against every element on the page). */
   &:hover {
     color: var(--fgColor-onEmphasis);
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-
-    /* Inherit color on all child elements to ensure enough contrast */
-    & * {
-      color: inherit !important;
-    }
   }
 
   &.selected,
@@ -109,10 +107,5 @@
     color: var(--fgColor-onEmphasis);
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-
-    /* Inherit color on all child elements to ensure enough contrast */
-    & * {
-      color: inherit !important;
-    }
   }
 }

app/components/primer/alpha/text_field.pcss

@@ -74,6 +74,7 @@
 }
 
 /* shared among all form control components (input, select, textarea, checkbox, radio) */
+/* stylelint-disable nesting-selector-no-missing-scoping-root */
 @define-mixin Field {
   color: var(--fgColor-default);
   background-color: var(--bgColor-default);
@@ -114,6 +115,7 @@
     @mixin focusBoxShadowInset;
   }
 }
+/* stylelint-enable nesting-selector-no-missing-scoping-root */
 
 /* TextInput structure
 ** ===================
@@ -634,18 +636,21 @@
   grid-template-columns: min-content auto;
   gap: var(--base-size-8);
 
-  & .FormControl-checkbox-labelWrap,
-  & .FormControl-radio-labelWrap {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base-size-4);
-  }
-
   & .FormControl-label {
     cursor: pointer;
   }
 }
 
+/* Expanded per-class so the subject buckets by a single class during style
+** recalc, instead of compiling to a merged `:is(...)` subject that Blink
+** cannot fast-reject. */
+.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,
+.FormControl-radio-wrap .FormControl-radio-labelWrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+}
+
 .FormControl-radio-group-wrap {
   & fieldset {
     padding: 0;

app/components/primer/beta/breadcrumbs.pcss

@@ -15,11 +15,12 @@
   }
 }
 
-.breadcrumb-item-selected,
-.breadcrumb-item[aria-current]:not([aria-current='false']) {
-  &::after {
-    content: none;
-  }
+/* Expanded per-class so each selector buckets by its own class during style
+** recalc, instead of compiling to a merged `:is(...)` that Blink cannot
+** fast-reject. */
+.breadcrumb-item-selected::after,
+.breadcrumb-item[aria-current]:not([aria-current='false'])::after {
+  content: none;
 }
 
 /* stylelint-disable-next-line selector-max-type */

app/components/primer/beta/popover.pcss

@@ -17,6 +17,7 @@
   border-radius: var(--borderRadius-medium);
 
   /* adding !important to override utility classes used in dotcom */
+  /* stylelint-disable-next-line primer/box-shadow */
   box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
 
   /* Carets */
@@ -54,150 +55,180 @@
   }
 }
 
+/* The caret variants below are authored as expanded per-class selectors
+** (rather than nesting `&::before`/`&::after` under a selector list) so each
+** rule's subject buckets by its own class during style recalc. The merged
+** `:is(.Popover-message--…, …)::before` form cannot be fast-rejected by Blink
+** and shows up as pure slow-path selector matching. */
+
 /* Bottom-oriented carets */
-.Popover-message--bottom,
-.Popover-message--bottom-right,
-.Popover-message--bottom-left {
-  &::before,
-  &::after {
-    top: auto;
-    border-bottom-color: transparent;
-  }
+.Popover-message--bottom::before,
+.Popover-message--bottom::after,
+.Popover-message--bottom-right::before,
+.Popover-message--bottom-right::after,
+.Popover-message--bottom-left::before,
+.Popover-message--bottom-left::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
 
-  &::before {
-    bottom: -16px;
-    border-top-color: var(--borderColor-default);
-  }
+.Popover-message--bottom::before,
+.Popover-message--bottom-right::before,
+.Popover-message--bottom-left::before {
+  bottom: -16px;
+  border-top-color: var(--borderColor-default);
+}
 
-  &::after {
-    bottom: -14px;
-    /* stylelint-disable-next-line primer/colors */
-    border-top-color: var(--overlay-bgColor);
-  }
+.Popover-message--bottom::after,
+.Popover-message--bottom-right::after,
+.Popover-message--bottom-left::after {
+  bottom: -14px;
+  /* stylelint-disable-next-line primer/colors */
+  border-top-color: var(--overlay-bgColor);
 }
 
 /* Top and Bottom: Right-oriented carets */
 .Popover-message--top-right,
 .Popover-message--bottom-right {
   right: -9px;
   margin-right: 0;
+}
 
-  &::before,
-  &::after {
-    left: auto;
-    margin-left: 0;
-  }
+.Popover-message--top-right::before,
+.Popover-message--top-right::after,
+.Popover-message--bottom-right::before,
+.Popover-message--bottom-right::after {
+  left: auto;
+  margin-left: 0;
+}
 
-  &::before {
-    right: var(--base-size-20);
-  }
+.Popover-message--top-right::before,
+.Popover-message--bottom-right::before {
+  right: var(--base-size-20);
+}
 
-  &::after {
-    right: var(--base-size-20);
-    margin-right: 1px;
-  }
+.Popover-message--top-right::after,
+.Popover-message--bottom-right::after {
+  right: var(--base-size-20);
+  margin-right: 1px;
 }
 
 /* Top and Bottom: Left-oriented carets */
 .Popover-message--top-left,
 .Popover-message--bottom-left {
   left: -9px;
   margin-left: 0;
+}
 
-  &::before,
-  &::after {
-    left: var(--base-size-24);
-    margin-left: 0;
-  }
+.Popover-message--top-left::before,
+.Popover-message--top-left::after,
+.Popover-message--bottom-left::before,
+.Popover-message--bottom-left::after {
+  left: var(--base-size-24);
+  margin-left: 0;
+}
 
-  &::after {
-    left: var(--base-size-24);
-    margin-left: 1px;
-  }
+.Popover-message--top-left::after,
+.Popover-message--bottom-left::after {
+  left: var(--base-size-24);
+  margin-left: 1px;
 }
 
 /* Right- and Left-oriented carets */
-.Popover-message--right,
-.Popover-message--right-top,
-.Popover-message--right-bottom,
-.Popover-message--left,
-.Popover-message--left-top,
-.Popover-message--left-bottom {
-  &::before,
-  &::after {
-    top: 50%;
-    left: auto;
-    margin-left: 0;
-    border-bottom-color: transparent;
-  }
+.Popover-message--right::before,
+.Popover-message--right::after,
+.Popover-message--right-top::before,
+.Popover-message--right-top::after,
+.Popover-message--right-bottom::before,
+.Popover-message--right-bottom::after,
+.Popover-message--left::before,
+.Popover-message--left::after,
+.Popover-message--left-top::before,
+.Popover-message--left-top::after,
+.Popover-message--left-bottom::before,
+.Popover-message--left-bottom::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
 
-  &::before {
-    margin-top: -9px;
-  }
+.Popover-message--right::before,
+.Popover-message--right-top::before,
+.Popover-message--right-bottom::before,
+.Popover-message--left::before,
+.Popover-message--left-top::before,
+.Popover-message--left-bottom::before {
+  margin-top: -9px;
+}
 
-  &::after {
-    margin-top: -8px;
-  }
+.Popover-message--right::after,
+.Popover-message--right-top::after,
+.Popover-message--right-bottom::after,
+.Popover-message--left::after,
+.Popover-message--left-top::after,
+.Popover-message--left-bottom::after {
+  margin-top: -8px;
 }
 
 /* Right-oriented carets */
-.Popover-message--right,
-.Popover-message--right-top,
-.Popover-message--right-bottom {
-  &::before {
-    right: -16px;
-    border-left-color: var(--borderColor-default);
-  }
+.Popover-message--right::before,
+.Popover-message--right-top::before,
+.Popover-message--right-bottom::before {
+  right: -16px;
+  border-left-color: var(--borderColor-default);
+}
 
-  &::after {
-    right: -14px;
-    /* stylelint-disable-next-line primer/colors */
-    border-left-color: var(--overlay-bgColor);
-  }
+.Popover-message--right::after,
+.Popover-message--right-top::after,
+.Popover-message--right-bottom::after {
+  right: -14px;
+  /* stylelint-disable-next-line primer/colors */
+  border-left-color: var(--overlay-bgColor);
 }
 
 /* Left-oriented carets */
-.Popover-message--left,
-.Popover-message--left-top,
-.Popover-message--left-bottom {
-  &::before {
-    left: -16px;
-    border-right-color: var(--borderColor-default);
-  }
+.Popover-message--left::before,
+.Popover-message--left-top::before,
+.Popover-message--left-bottom::before {
+  left: -16px;
+  border-right-color: var(--borderColor-default);
+}
 
-  &::after {
-    left: -14px;
-    margin-bottom: 1px;
-    /* stylelint-disable-next-line primer/colors */
-    border-right-color: var(--overlay-bgColor);
-  }
+.Popover-message--left::after,
+.Popover-message--left-top::after,
+.Popover-message--left-bottom::after {
+  left: -14px;
+  margin-bottom: 1px;
+  /* stylelint-disable-next-line primer/colors */
+  border-right-color: var(--overlay-bgColor);
 }
 
 /* Right and Left: Top-oriented carets */
-.Popover-message--right-top,
-.Popover-message--left-top {
-  &::before,
-  &::after {
-    top: var(--base-size-24);
-  }
+.Popover-message--right-top::before,
+.Popover-message--right-top::after,
+.Popover-message--left-top::before,
+.Popover-message--left-top::after {
+  top: var(--base-size-24);
 }
 
 /* Right and Left: Bottom-oriented carets */
-.Popover-message--right-bottom,
-.Popover-message--left-bottom {
-  &::before,
-  &::after {
-    top: auto;
-  }
+.Popover-message--right-bottom::before,
+.Popover-message--right-bottom::after,
+.Popover-message--left-bottom::before,
+.Popover-message--left-bottom::after {
+  top: auto;
+}
 
-  &::before {
-    bottom: var(--base-size-16);
-  }
+.Popover-message--right-bottom::before,
+.Popover-message--left-bottom::before {
+  bottom: var(--base-size-16);
+}
 
-  &::after {
-    bottom: var(--base-size-16);
-    margin-bottom: 1px;
-  }
+.Popover-message--right-bottom::after,
+.Popover-message--left-bottom::after {
+  bottom: var(--base-size-16);
+  margin-bottom: 1px;
 }
 
 @media (min-width: 544px) {