rouge icon indicating copy to clipboard operation
rouge copied to clipboard

Adds support for nested CSS and color rebeccapurple

Open dylanbeattie opened this issue 4 months ago • 1 comments

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.

image

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 rackup visualiser.

I've also added rebeccapurple to the list of CSS colors (https://drafts.csswg.org/css-color/#valdef-color-rebeccapurple)

dylanbeattie avatar Aug 03 '25 09:08 dylanbeattie

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 li::marker or li:nth-child(2n)::marker as valid selectors.

ul {
  li::marker {
    color: royalblue;
  }
  li:nth-child(2n)::marker {
    color: crimson;
  }
}

dylanbeattie avatar Aug 09 '25 14:08 dylanbeattie