Adds support for nested CSS and color rebeccapurple#2150
Draft
dylanbeattie wants to merge 7 commits intorouge-ruby:masterfrom
Draft
Adds support for nested CSS and color rebeccapurple#2150dylanbeattie wants to merge 7 commits intorouge-ruby:masterfrom
dylanbeattie wants to merge 7 commits intorouge-ruby:masterfrom
Conversation
Improves CSS lexer to correctly highlight nested CSS rules, including those using parent selector references (&), pseudo-classes, and within media queries. This enhancement provides more accurate syntax highlighting for modern CSS practices, specifically addressing nested structures.
Consolidates CSS lexer specs, improving organization and readability. Removes redundant test files and cleans up visual samples.
Refactors the CSS nesting example for better readability and conciseness by removing unnecessary styles.
Updates the lexer's list of recognized CSS color keywords to include "rebeccapurple".
Author
|
Found a bunch of edge cases this doesn't support yet... I've marked the PR as draft until I've figured out how to add support for those. The current version of the lexer doesn't recognise ul {
li::marker {
color: royalblue;
}
li:nth-child(2n)::marker {
color: crimson;
}
} |
jneen
reviewed
Feb 13, 2026
| rule %r/}/, Punctuation, :pop! | ||
|
|
||
| # Handle nested rules by checking for selectors followed by opening brace | ||
| rule %r/(&?(?:[.#:]?#{identifier}|[*&]|:[:]?#{identifier}|\[[^\]]*\]|::?#{identifier})[^{:;]*){/m do |m| |
Member
There was a problem hiding this comment.
Would it be simpler to mixin :root here? Or factor out part of :root to mix in?
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
2 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 PR adds support for CSS nesting, which has had baseline support across all major browsers since 2023 (https://caniuse.com/css-nesting) but doesn't seem to be supported in rouge yet.
The first pass at this was written using Copilot with Claude Sonnet 4, which got the selector syntax and the actual lexer rule pretty much spot-on; I've moved a few things around, cleaned up a bunch of extraneous test code, fixed up the quote style and indentation and verified it using the
rackupvisualiser.I've also added
rebeccapurpleto the list of CSS colors (https://drafts.csswg.org/css-color/#valdef-color-rebeccapurple)