Skip to content

feat(core): New parser for CSS selectors #10514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 33 commits into from
Jun 28, 2024
Merged

feat(core): New parser for CSS selectors #10514

merged 33 commits into from
Jun 28, 2024

Conversation

CatchABus
Copy link
Contributor

@CatchABus CatchABus commented Apr 13, 2024 •
edited
Loading

PR Checklist

What is the current behavior?

Right now, core css parser does not analyze CSS selectors like functional pseudo-classes.
This is one of the reasons the implementation of certain CSS features is a bit hard.

What is the new behavior?

Core will make use of css-what parser for selectors. This is a modern parser that returns a result with important details for CSS selectors. Apart from its popularity, size was also a factor for this choice.

Additions

  • Attribute selectors case insensitivity (see https://www.w3.org/TR/selectors-4/#attribute-case)
  • Proper implementation of :is() pseudo-class
  • Proper implementation of :where() pseudo-class
  • Proper implementation of :not() pseudo-class
  • Functional seudo-classes specificity is applied based on MDN docs
  • Added support for pseudo-class selector list types (Regular, Fogiving, Relative)
  • A functional pseudo-class can become dynamic provided that its selector list contains a dynamic selector
  • Fix for a small bug related to attribute selectors without value
  • Added support for combinators in functional pseudo-class selector list
  • Added support for ~ combinator
  • Added app UI sample for general sibling combinator
  • Added unit tests for functional pseudo-classes

The following css module functions are no longer used:

  • parseSelector
  • parseSimpleSelectorSequence
  • parseSimpleSelector
  • parseUniversalSelector
  • parseSimpleIdentifierSelector
  • parseAttributeSelector
  • parseCombinator

@cla-bot cla-bot bot added the cla: yes label Apr 13, 2024
@CatchABus CatchABus changed the title Css selector parser rework feat(core): New parser for CSS selectors Apr 13, 2024
@farfromrefug
Copy link
Collaborator

@CatchABus is CSS what supposed to work alongside rework or is it suppose to replace it ?

@CatchABus
Copy link
Contributor Author

CatchABus commented Apr 14, 2024 •
edited
Loading

@CatchABus is CSS what supposed to work alongside rework or is it suppose to replace it ?

It's actually a replacement for all selector-related functions in this module: https://github.com/NativeScript/NativeScript/blob/main/packages/core/css/parser.ts

The functions I mentioned above are part of that module (though I've not removed them yet):

  • parseSelector
  • parseSimpleSelectorSequence
  • parseSimpleSelector
  • parseUniversalSelector
  • parseSimpleIdentifierSelector
  • parseAttributeSelector
  • parseCombinator

I made sure to adapt it to core without breaking existing functionality. New pseudo-classes are still missing 1 or 2 advanced features so I'm still working on them.

@farfromrefug
Copy link
Collaborator

@CatchABus OK makes sense! Good job

@rigor789
Copy link
Member

@CatchABus some selectors to consider for testing:

image

Note, right now we convert these to supported (albeit not exact) selectors in the @nativescript/tailwind plugin itself, but if we could support them oob that would simplify things...

Specifically, the :not() and :is() selectors we don't support, and I believe we also don't support the ~ combinators. https://github.com/NativeScript/tailwind/blob/fae88eece49ee5f6df4cf0de1a715768a4dd765c/src/removeUnsupported.js#L86-L90

@CatchABus
Copy link
Contributor Author

CatchABus commented Apr 15, 2024 •
edited
Loading

@CatchABus some selectors to consider for testing:

Note, right now we convert these to supported (albeit not exact) selectors in the @nativescript/tailwind plugin itself, but if we could support them oob that would simplify things...

Specifically, the :not() and :is() selectors we don't support, and I believe we also don't support the ~ combinators. https://github.com/NativeScript/tailwind/blob/fae88eece49ee5f6df4cf0de1a715768a4dd765c/src/removeUnsupported.js#L86-L90

This PR contains support for :not(), :is(), and :where() Level 4.
I'll add ~ as TODO at first post 😄

CatchABus added 23 commits April 20, 2024 16:21
@CatchABus
feat(core): New parser for CSS selectors
5552d65
@CatchABus
fix: Invalid :not() nested selector parsing
0f90fb9
@CatchABus
chore: Removed unneeded nullish coalescing operator
ef4a144
@CatchABus
fix: Pseudo-class :not() is not dynamic
2210ae6
@CatchABus
feat: Added case-insensitivity support for attribute selectors
ed28c8e
@CatchABus
fix: Added missing :not() selector change tracking and corrected dyna…
2a9487e 
…mic state
@CatchABus
feat: Added support for ':is()' pseudo-class
d54e174
@CatchABus
chore: Minor trace improvement
fdbad98
@CatchABus
feat: Added support for pseudo-class selector list types
2fca2f6
@CatchABus
feat: Proper functional pseudo-class specificity
0748746
@CatchABus
fix: Added null-check for pseudo-class lookupSort calls
39e72da
@CatchABus
fix: Removed pseudo-class lookupSort override as it caused problems
12103ce
@CatchABus
feat: Proper dynamic state for functional pseudo-classes
39acfca
@CatchABus
chore: Removed old css selector parser unused code
158751c
@CatchABus
chore: Base functional pseudo-class should be abstract
3ba567c
@CatchABus
chore: Removed unused method
a34b7de
@CatchABus
chore: Re-added the previously removed method
35b72cb
@CatchABus
perf: Do not generate selector sequences for a single selectors
55d2815
@CatchABus
feat: Added combinator support for pseudo-class selector list
aeb4fd3
@CatchABus
feat: Added support for CSS general sibling combination (~)
e36ce66
@CatchABus
chore: Better CSS selector combinator readability
4a7aa62
@CatchABus
chore: Renaming selector arrays
dce0159
@CatchABus
perf: Reduce the number of instances and arrays for complex selectors
59b4c97
@CatchABus CatchABus force-pushed the css-selector-parser-rework branch from 0c4c505 to 15f4df6 Compare April 20, 2024 13:21
@CatchABus CatchABus marked this pull request as ready for review April 20, 2024 13:22
@NathanWalker NathanWalker added this to the 8.8 milestone Jun 28, 2024
@NathanWalker NathanWalker merged commit 2fb4f23 into NativeScript:main Jun 28, 2024
1 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rigor789 rigor789 rigor789 left review comments

@NathanWalker NathanWalker NathanWalker approved these changes

Assignees
No one assigned
Labels
cla: yes
Projects
None yet
Milestone
8.8
Development

Successfully merging this pull request may close these issues.
4 participants
@CatchABus @farfromrefug @rigor789 @NathanWalker