perf(css): audit :has() selectors and add stylelint guard for Safari by hectahertz · Pull Request #7708 · primer/react

hectahertz · 2026-03-27T17:25:50Z

Closes https://github.com/github/github-ui/issues/17224

In Aug 2025, a :has() selector on a broadly-present component caused 10-20+ second freezes on Safari due to quadratic style invalidation in WebKit (398 reactions, 86 participants, 446 points on HN). This PR audits all :has() usage in @primer/react and adds guardrails to prevent a repeat.

Audit summary: 46 :has() occurrences across 12 CSS Module files. All are low-risk because CSS Modules generate unique hashed class names, limiting the invalidation blast radius to a small subtree. The one dangerous pattern (body:has(...) in Dialog) was already mitigated with a feature flag guard.

Changes:

Stylelint rule (selector-pseudo-class-disallowed-list: ['has']) blocks new :has() by default. Developers must add a stylelint-disable with justification.
File-level stylelint-disable comments on all 12 audited files, referencing the tracking issue.
Removed redundant :has() from @primer/styled-react BaseStyles. Same :has([data-color-mode]) pattern already removed from @primer/react in #7325. The global selectors already handle input color-scheme.
:has() guidance in CSS instructions (.github/instructions/css.instructions.md) covering safe vs dangerous patterns.

Full audit with per-selector risk assessment posted on the tracking issue.

Changelog

New

Stylelint rule blocking :has() pseudo-class by default with Safari perf warning

Changed

Added stylelint-disable audit comments to 12 existing CSS files with :has() usage
CSS coding instructions now include :has() guidance

Removed

Removed expensive :has([data-color-mode]) selectors from @primer/styled-react BaseStyles (redundant with existing global selectors)

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Verified stylelint catches new :has() usage with clear error message
Verified all existing files pass lint with stylelint-disable comments
Full npm run lint:css passes clean

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

cc @mattcosta7

changeset-bot · 2026-03-27T17:25:55Z

⚠️ No Changeset found

Latest commit: f454b9b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-03-27T17:26:23Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Copilot

Pull request overview

Audits and hardens :has() selector usage across the Primer React monorepo to prevent Safari/WebKit performance regressions, adding lint guardrails and documenting safe usage patterns.

Changes:

Add a Stylelint rule to disallow :has() by default with a Safari performance warning message.
Add stylelint-disable audit comments to existing CSS Module files that already rely on :has().
Remove redundant :has([data-color-mode]) selectors from @primer/styled-react BaseStyles and document :has() guidance for contributors.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
stylelint.config.mjs	Disallows `:has()` via Stylelint rule with error message guidance.
packages/styled-react/src/components/BaseStyles.tsx	Removes `:has([data-color-mode])` selectors from global BaseStyles styling.
packages/react/src/experimental/SelectPanel2/SelectPanel.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/TreeView/TreeView.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/Timeline/Timeline.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/SegmentedControl/SegmentedControl.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/PageHeader/PageHeader.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/Dialog/Dialog.module.css	Adds file-level Stylelint disable for audited `body:has(...)` legacy path.
packages/react/src/ButtonGroup/ButtonGroup.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/Button/ButtonBase.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/Breadcrumbs/Breadcrumbs.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/AvatarStack/AvatarStack.module.css	Extends existing disables to include the new `:has()` disallow rule.
packages/react/src/ActionList/Group.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/ActionList/ActionList.module.css	Extends existing disables to include the new `:has()` disallow rule.
.github/instructions/css.instructions.md	Documents `:has()` risks, safe patterns, and the required lint override approach.

stylelint.config.mjs

.github/instructions/css.instructions.md

mattcosta7 · 2026-03-27T20:47:14Z

packages/react/src/Dialog/Dialog.module.css

 */
-/* stylelint-disable-next-line selector-no-qualifying-type */
+/* stylelint-disable-next-line selector-no-qualifying-type, selector-pseudo-class-disallowed-list -- :has() on body guarded by feature flag negation, audited (github/github-ui#17224) */
 body:not([data-dialog-scroll-optimized]):has(.Dialog.DisableScroll) {


we can/should just ship the flag here that enables the optimization path soon!

I just keep missing the window's where it's unlocked to do that
#7633

I've added #7633 to my list of “PRs to merge in the next release.” I’ll keep an eye on it and merge it the next time main is unlocked.

perf(css): audit :has() selectors and add stylelint guard for Safari

e8fa7d0

hectahertz requested a review from a team as a code owner March 27, 2026 17:25

hectahertz requested review from Copilot and liuliu-dev March 27, 2026 17:25

Copilot started reviewing on behalf of hectahertz March 27, 2026 17:26 View session

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Mar 27, 2026

Copilot AI reviewed Mar 27, 2026

View reviewed changes

stylelint.config.mjs Outdated Show resolved Hide resolved

.github/instructions/css.instructions.md Outdated Show resolved Hide resolved

refactor(css): use scoped stylelint disables instead of file-level

f454b9b

hectahertz requested a review from jonrohan March 27, 2026 17:33

github-actions bot temporarily deployed to storybook-preview-7708 March 27, 2026 17:35 Inactive

hectahertz deployed to github-pages March 27, 2026 17:44 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7708 March 27, 2026 17:44 View deployment

mattcosta7 reviewed Mar 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf(css): audit :has() selectors and add stylelint guard for Safari#7708

perf(css): audit :has() selectors and add stylelint guard for Safari#7708
hectahertz wants to merge 2 commits intomainfrom
hectahertz/perf-css-has-safari-audit

hectahertz commented Mar 27, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

mattcosta7 Mar 27, 2026

Uh oh!

liuliu-dev Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

hectahertz commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Mar 27, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

mattcosta7 Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

liuliu-dev Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hectahertz commented Mar 27, 2026 •

edited

Loading

changeset-bot bot commented Mar 27, 2026 •

edited

Loading