feat: pseudo-selectors web implementation#9474
Open
wisniewskij wants to merge 30 commits into
Open
Conversation
wisniewskij
force-pushed
the
@wisniewskij/pseudo-selectors-ts-frontend
branch
from
04ed294 to
49bcf41
Compare
Base automatically changed from
@wisniewskij/pseudo-selectors-ts-frontend
to
main
May 28, 2026 17:28
wisniewskij
force-pushed
the
@wisniewskij/pseudo-selectors-web
branch
from
c4b65b0 to
31bb6c1
Compare
wisniewskij
changed the base branch from
main
to
@wisniewskij/pseudo-selectors-examples
wisniewskij
force-pushed
the
@wisniewskij/pseudo-selectors-web
branch
2 times, most recently
from
753d056 to
c4042ee
Compare
wisniewskij
force-pushed
the
@wisniewskij/pseudo-selectors-web
branch
2 times, most recently
from
00030a0 to
8d35f45
Compare
wisniewskij
changed the base branch from
@wisniewskij/pseudo-selectors-examples
to
main
wisniewskij
changed the base branch from
main
to
@wisniewskij/pseudo-selectors-examples
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This reverts commit 616525e.
## Example recordings | Before | After | |-|-| | <video src="https://github.com/user-attachments/assets/9c2f2c75-8ff9-43d9-882a-c5f3807e45e7" /> | <video src="https://github.com/user-attachments/assets/e62f73e8-7f98-4333-bae2-053448534e63" /> |
wisniewskij
force-pushed
the
@wisniewskij/pseudo-selectors-examples
branch
from
085d46d to
8138e7d
Compare
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
wisniewskij
force-pushed
the
@wisniewskij/pseudo-selectors-web
branch
from
8d35f45 to
87fa469
Compare
MatiPl01
requested changes
Jun 8, 2026
MatiPl01
left a comment
MatiPl01
left a comment
Member
There was a problem hiding this comment.
Left a few comments. Please also don't implement pseudo-selector-related methods between insertCSSAnimation and removeCSSAnimation, rather at them at the end of the file or somewhere else, so that the order of functions in domUtils makes more sense and is not random.
Contributor
There was a problem hiding this comment.
Pull request overview
Implements web support for CSS pseudo-selector styles in Reanimated by generating and managing per-view CSS rules in a shared stylesheet, aligning web behavior with existing pseudo-selector support in the broader CSS system.
Changes:
- Added
CSSPseudoSelectorsManager(web) that builds ordered pseudo-selector CSS rules (including:active-deepest) and injects/removes them viadomUtils. - Updated web
CSSManagerto create and update the pseudo-selector manager alongside animations and transitions. - Extended
domUtilswith a shared rule registry to support insertion/removal of both keyframes and pseudo-selector rules; added unit tests for the new manager and pseudo-selector guards; updated the common-app web example.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-native-reanimated/src/css/web/managers/CSSPseudoSelectorsManager.ts | New web manager that generates/injects pseudo-selector CSS rules per view. |
| packages/react-native-reanimated/src/css/web/managers/CSSManager.ts | Wires pseudo-selector manager into the web CSS pipeline. |
| packages/react-native-reanimated/src/css/web/managers/tests/CSSPseudoSelectorsManager.test.ts | Unit tests for selector rule generation and lifecycle behavior (mocking domUtils). |
| packages/react-native-reanimated/src/css/web/domUtils.ts | Generalized stylesheet rule insertion/removal and added pseudo-selector rule APIs. |
| packages/react-native-reanimated/src/css/utils/tests/guards.test.ts | Adds test coverage for pseudo-selector value guard logic. |
| apps/common-app/src/apps/css/examples/transitions/screens/pseudoSelectors/ArbitraryWebSelectors.tsx | Updates the web example to demonstrate :focus-visible with a pressable element. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
pull Bot
pushed a commit
to esinanturan/react-native-reanimated
that referenced
this pull request
Jun 11, 2026
## Summary I moved here an example from software-mansion#9474
MatiPl01
approved these changes
Jun 11, 2026
MatiPl01
left a comment
MatiPl01
left a comment
Member
There was a problem hiding this comment.
Left some minor comments. Overall, good job!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Web part of pseudoselectors.
Test plan
Run normal pseudoselectors tests and web specific tests and see if they pass.