fix: Incorrect parsing of functional pseudo class css selector#169
Merged
fix: Incorrect parsing of functional pseudo class css selector#169
Conversation
This fixes a parsing issue of CSS selectors that use a functional pseudo class with multiple arguments. See the test cases
billyvg
commented
Mar 22, 2024
| let j = 0; | ||
| const len = splitSelectors.length; | ||
| const finalSelectors = []; | ||
| while (i < len) { |
Member
Author
There was a problem hiding this comment.
The logic is as follows:
- Iterate through the split selectors and look for the first selector with an opening parenthesis
- If opening paren is found, look through the rest of the selectors to look for a matching number of closing parentheses
- If closing paren is found, merge together all selectors between the opening and closing
- Move iterator index to the next selector and continue
- If no closing paren is found, assume that selectors were correctly split
- If closing paren is found, merge together all selectors between the opening and closing
c298lee
approved these changes
Mar 22, 2024
c298lee
left a comment
There was a problem hiding this comment.
Tests are passing and comment on logic of the code makes sense
ryan953
reviewed
Mar 22, 2024
Member
There was a problem hiding this comment.
I'm trying to break it 🗡️
edit: i will check it out, and run these test suggestions to see what happens. Maybe think of more tests
edit2: huzzah! 2/3 of my suggestions break it. The first and the last .bar:has(div, input:is(:disabled), button) {} and .bar:has(input:is(:disabled),.foo,button:is(:disabled)), .foo:has(input, button), .baz, {}
Co-authored-by: Ryan Albrecht <ryan@ryanalbrecht.ca>
Member
Author
|
@ryan953 good test cases! I've updated to track the net unbalanced across each selector - however this does add another regex |
ryan953
reviewed
Mar 22, 2024
Co-authored-by: Ryan Albrecht <ryan@ryanalbrecht.ca>
ryan953
reviewed
Mar 22, 2024
Co-authored-by: Ryan Albrecht <ryan@ryanalbrecht.ca>
ryan953
approved these changes
Mar 22, 2024
billyvg
added a commit
that referenced
this pull request
Apr 19, 2024
#169)" (#182) This reverts commit 810b39f. Reverting this in favor of rrweb-io#1401 and rrweb-io#1440 which is better than whatever it is I wrote. I kept our tests just to ensure the fix is compatible with our previous patch.
billyvg
added a commit
that referenced
this pull request
Apr 26, 2024
This fixes a parsing issue of CSS selectors that use a functional pseudo
class with multiple arguments.
For example,
```
.foo:has(button,div) {}
```
Would get parsed as 2 selectors: `.foo:has(button` and `div)` - this
results in an invalid stylesheet and looks like the replay is broken.
---------
Co-authored-by: Ryan Albrecht <ryan@ryanalbrecht.ca>
billyvg
added a commit
that referenced
this pull request
Jun 5, 2024
billyvg
added a commit
that referenced
this pull request
Jun 7, 2024
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
3 participants
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 fixes a parsing issue of CSS selectors that use a functional pseudo class with multiple arguments.
For example,
Would get parsed as 2 selectors:
.foo:has(buttonanddiv)- this results in an invalid stylesheet and looks like the replay is broken.