Fix intermittent focus ring compilation issue in docs #6279
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes an intermittent issue where focus rings appeared on mouse interaction. This seemed to appear on some PR builds and not others, and resulted in
:focus-visible
and:hover
pseudo classes not being compiled to the.focus-ring
and.is-hovered
classes that we apply. The native:focus-visible
pseudo class also applies on programmatic focus, which is why we see the issue.The problem was caused by a patch we had applied to skip this compilation on the React Aria tailwind-based homepage. Since all files load this config from the same package.json file, mutating it caused unintentional changes when compiling files other than the one we were looking for. It appeared intermittent because files are compiled in a different order on each build. The fix is to clone the config and modify that instead.