perf(BaseStyles): Remove expensive :has([data-color-mode]) selectors #7325
Conversation
Remove :has([data-color-mode]) selectors that scanned the entire DOM on every style recalculation. Input color-scheme is already handled by global selectors. Part of #7312
🦋 Changeset detectedLatest commit: 7f0a23b The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
the
integration-tests: recommended
|
👋 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. Or, apply the |
There was a problem hiding this comment.
Pull request overview
This PR removes performance-impacting CSS selectors from BaseStyles that were causing expensive DOM traversals during style recalculation. The removed :has([data-color-mode]) selectors scanned the entire DOM tree unnecessarily, as the input color-scheme functionality is already handled by existing global selectors elsewhere in the codebase.
Key Changes:
- Removed redundant
:has([data-color-mode='light'])and:has([data-color-mode='dark'])selectors - Added explanatory comment documenting why the selectors were removed and where the functionality is handled
- Added changeset documenting the performance improvement
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/react/src/BaseStyles.module.css | Removed expensive :has() selectors and replaced with explanatory comment |
| .changeset/perf-basestyles-has-selector.md | Added changeset documenting the performance optimization |
Summary
Remove expensive
:has([data-color-mode])selectors that scanned the entire DOM on every style recalculation.Changes
Removed redundant CSS rules that used
:has([data-color-mode='light'])and:has([data-color-mode='dark'])selectors. Input color-scheme is already handled by global selectors in the codebase.Expected INP Impact
Why this matters
These were the most expensive selectors in the entire codebase:
:has([data-color-mode])on the root element forces a full DOM traversalThis single change likely has the highest INP impact of all the optimizations.
Part of the INP performance optimization effort. See #7312 for full context.