Add CSS :where() selector support to jsar-runtime #99
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 PR implements full support for the CSS
:where()
pseudo-class selector in jsar-runtime's CSS parsing engine.What's Changed
The
:where()
pseudo-class is a functional CSS selector that takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list. The key characteristic of:where()
is that it has zero specificity, making it useful for default styles that can be easily overridden.Implementation Details
Where
pseudo-class type to the FFI enum inPseudoClassType
Component
struct with aselector_list
field to handle functional pseudo-classesComponentImpl::Where
variants from Servo/Styloget_component_selector_list()
to access inner selector lists:is()
support as it uses the same infrastructureExamples of supported syntax:
Test Coverage
Added comprehensive test suite covering:
:where()
selector parsing:where()
selectorsAll existing tests continue to pass, ensuring no breaking changes.
Technical Notes
The implementation leverages Servo/Stylo's existing
ComponentImpl::Where
support, which was already parsing:where()
correctly but wasn't exposed through jsar-runtime's FFI layer. This change makes the functionality available to the JavaScript/TypeScript layer while maintaining the correct CSS specificity semantics.Fixes #78.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.