feat(core): New parser for CSS selectors

[CatchABus]

PR Checklist

• The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/tools/notes/CONTRIBUTING.md#commit-messages.
• There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
• You have signed the CLA.
• All existing tests are passing: https://github.com/NativeScript/NativeScript/blob/master/tools/notes/DevelopmentWorkflow.md#running-unit-tests-application.
• Tests for the changes are included - https://github.com/NativeScript/NativeScript/blob/master/tools/notes/WritingUnitTests.md.

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

[farfromrefug]

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

[CatchABus]

@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]

@CatchABus OK makes sense! Good job

[rigor789]

@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

[CatchABus]

@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 😄