diff --git a/.changeset/perf-basestyles-has-selector.md b/.changeset/perf-basestyles-has-selector.md new file mode 100644 index 00000000000..f16c623c300 --- /dev/null +++ b/.changeset/perf-basestyles-has-selector.md @@ -0,0 +1,8 @@ +--- +'@primer/react': patch +--- + +perf(BaseStyles): Remove expensive :has([data-color-mode]) selectors + +Remove `:has([data-color-mode])` selectors that scanned the entire DOM on every style recalculation. +Input color-scheme is already handled by global selectors in the codebase. diff --git a/packages/react/src/BaseStyles.module.css b/packages/react/src/BaseStyles.module.css index 76259ac05dd..3e6352c92e6 100644 --- a/packages/react/src/BaseStyles.module.css +++ b/packages/react/src/BaseStyles.module.css @@ -60,19 +60,12 @@ details-dialog:focus:not(:focus-visible):not(:global(.focus-visible)) { /* stylelint-disable-next-line primer/colors */ color: var(--BaseStyles-fgColor, var(--fgColor-default)); - /* Global styles for light mode */ - &:has([data-color-mode='light']) { - input & { - color-scheme: light; - } - } - - /* Global styles for dark mode */ - &:has([data-color-mode='dark']) { - input & { - color-scheme: dark; - } - } + /* + * PERFORMANCE: Removed :has([data-color-mode]) selectors that scanned entire DOM. + * Input color-scheme is already handled by global selectors above: + * [data-color-mode='light'] input { color-scheme: light; } + * [data-color-mode='dark'] input { color-scheme: dark; } + */ /* Low-specificity default link styling */ :where(a:not([class*='prc-']):not([class*='PRC-']):not([class*='Primer_Brand__'])) {