Uh oh!
There was an error while loading. Please reload this page.
perf(Button): Replace :has(.Visual) with data-no-visuals attribute - #7327
perf(Button): Replace :has(.Visual) with data-no-visuals attribute#7327mattcosta7 wants to merge 5 commits into
Conversation
Replace :has(.Visual) selectors with [data-no-visuals] attribute checks to avoid descendant DOM scans. Added documentation comments explaining acceptable :has() usage patterns. Part of #7312
🦋 Changeset detectedLatest commit: 2f3da89 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 |
👋 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 |
Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days. |
Summary
Performance optimizations for Button CSS selectors to improve INP.
Changes
:has(.Visual)selectors with[data-no-visuals]attribute checksExpected INP Impact
Why this matters
Button is one of the most frequently used components. Every hover, focus, and click triggers style recalculation. The
:has(.Visual)selector was forcing descendant scans on every single button interaction. Data attribute checks are O(1).Part of the INP performance optimization effort. See #7312 for full context.