fix: improve nested CSS rule handling and add related tests#1775
Merged
Juice10 merged 7 commits intorrweb-io:masterfrom Feb 6, 2026
Merged
fix: improve nested CSS rule handling and add related tests#1775Juice10 merged 7 commits intorrweb-io:masterfrom
Juice10 merged 7 commits intorrweb-io:masterfrom
Conversation
🦋 Changeset detectedLatest commit: d8b10d4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 19 packages
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 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes critical bugs in nested CSS rule handling within rrweb's recording and replay functionality. The changes ensure that style modifications on rules nested inside CSS at-rules (like @media and @supports) are correctly captured during recording and accurately replayed.
Changes:
- Fixed recursive traversal bug in
getNestedCSSRulePositionsthat caused incorrect position tracking for nested CSS rules - Corrected indexing logic in
getNestedRulethat was skipping nesting levels when retrieving deeply nested rules - Added comprehensive unit and integration tests to verify nested CSS rule manipulation at various depths
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/rrweb/src/record/observer.ts | Adds missing return statement in recursive call to fix position tracking for nested CSS rules |
| packages/rrweb/src/utils.ts | Fixes incorrect array slicing that caused getNestedRule to skip nesting levels |
| packages/rrweb/test/events/nested-style-declaration.ts | Adds comprehensive test event data covering setProperty/removeProperty on nested rules at multiple depths |
| packages/rrweb/test/replayer.test.ts | Adds integration test verifying correct replay of style changes on nested CSS rules |
| packages/rrweb/test/util.test.ts | Adds unit tests for getNestedRule and getPositionsAndIndex utility functions |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Juice10
previously approved these changes
Feb 6, 2026
Updated the fix message to include replayer handling of missing rules.
Juice10
approved these changes
Feb 6, 2026
This was referenced Feb 6, 2026
This was referenced Mar 20, 2026
This was referenced Mar 23, 2026
pauldambra
added a commit
to PostHog/posthog-rrweb
that referenced
this pull request
Mar 24, 2026
## Changes Adopts upstream rrweb [PR #1775](rrweb-io/rrweb#1775). Fixes bugs in how rrweb handles CSS rules nested within at-rules (`@media`, `@supports`): - **`getNestedRule` (utils.ts)**: Fixed recursive logic that was skipping nesting levels (`slice(2)` → `slice(1)`). Added null safety so missing rules return `null` instead of throwing. - **`getNestedCSSRulePositions` (observer.ts)**: Added missing recursive call so deeply nested rules get correct position arrays. - **`applyStyleSheetRule` (replay/index.ts)**: Added optional chaining for `nestedRule?.insertRule()` and `nestedRule?.deleteRule()` since `getNestedRule` can now return `null`. Part of #147.
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.
This pull request improves the handling and testing of nested CSS rule manipulations in rrweb. It fixes the traversal logic for nested CSS rules, enhances the utility function for retrieving nested rules, and adds comprehensive tests to ensure correctness when dealing with complex CSS structures (such as rules inside
@mediaand@supportsblocks). Additionally, new test events and integration tests are introduced to verify that style changes on nested rules are correctly replayed.Bug fixes and core logic improvements:
getNestedCSSRulePositionsto ensure correct recursive parent rule lookup for nested CSS rules.getNestedRuleto properly handle position arrays when accessing nested rules, ensuring accurate retrieval for any nesting depth.Testing enhancements:
nested-style-declaration.ts) that simulates style property changes (set/remove) on nested CSS rules, including deep nesting scenarios.getNestedRuleandgetPositionsAndIndexutility functions to cover a wide range of nesting and edge cases, ensuring robustness of these utilities. [1] [2]