Modernize the CSS lexer

lib/rouge/lexers/css.rb

@@ -13,7 +13,19 @@ class CSS < RegexLexer
 
       # Documentation: https://www.w3.org/TR/CSS21/syndata.html#characters
 
-      identifier = /[\p{L}_-][\p{Word}\p{Cf}-]*/
+      # [jneen] workaround for:
+      # https://bugs.ruby-lang.org/issues/21870#change-116371
+      #
+      # As of ruby 4+, \p{Word} matches ZWJ and ZWNJ, so the additional
+      # \p{Cf} is not needed.
+      #
+      # That being said... this still warns, but at least it's only once?
+      identifier = if RUBY_VERSION < '4'
+        /[\p{L}_-][\p{Word}\p{Cf}-]*/
+      else
+        /[\p{L}_-][\p{Word}-]*/
+      end
+
       number = /-?(?:[0-9]+(\.[0-9]+)?|\.[0-9]+)/
 
       def self.properties
@@ -192,6 +204,7 @@ def self.colors
           seagreen seashell sienna silver skyblue slateblue slategray snow
           springgreen steelblue tan teal thistle tomato
           turquoise violet wheat white whitesmoke yellow yellowgreen
+          rebeccapurple
         )
       end
 
@@ -245,6 +258,10 @@ def self.vendor_prefixes
         rule %r/(true|false)/i, Name::Constant
         rule %r/\-\-#{identifier}/, Literal
         rule %r([*+/-]), Operator
+        rule %r/(url(?:-prefix)?)([(])(.*?)([)])/ do
+          groups Name::Function, Punctuation, Str::Other, Punctuation
+        end
+
         rule(identifier) do |m|
           if self.class.colors.include? m[0].downcase
             token Name::Other
@@ -304,6 +321,8 @@ def self.vendor_prefixes
 
           push :stanza_value
         end
+
+        mixin :root
       end
 
       state :stanza_value do

spec/visual/samples/css

@@ -77,3 +77,61 @@ a[target="_blank"] {
 œuvre 书名[语言="français"] {
   color: blue;
 }
+
+/* CSS Nesting examples */
+.container {
+  padding: 20px;
+
+  .header {
+    color: blue;
+
+    .title {
+      font-weight: bold;
+    }
+  }
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  &.active {
+    border: 2px solid red;
+
+    .content {
+      display: block;
+    }
+  }
+
+  .sidebar {
+    width: 200px;
+
+    ul {
+      li {
+        a {
+          &:hover {
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Nested CSS with media queries */
+@media (max-width: 768px) {
+  .container {
+    padding: 10px;
+
+    .header {
+      font-size: 1.5em;
+    }
+  }
+}
+
+.container {
+  padding: 10px;
+
+  @media (width > 768px) {
+    padding: 20px;
+  }
+}