Improve CSS syntax highlighting

crates/languages/src/css/highlights.scm

@@ -11,6 +11,7 @@
   ">"
   "+"
   "-"
+  "|"
   "*"
   "/"
   "="
@@ -19,35 +20,48 @@
   "~="
   "$="
   "*="
+] @operator
+
+[
   "and"
   "or"
   "not"
   "only"
-] @operator
+] @keyword.operator
 
 (attribute_selector (plain_value) @string)
 
+[
+  (id_name)
+  (class_name)
+] @selector
+
+(namespace_name) @namespace
+(namespace_selector (tag_name) @namespace "|")
+
 (attribute_name) @attribute
-(pseudo_element_selector (tag_name) @attribute)
-(pseudo_class_selector (class_name) @attribute)
+(pseudo_element_selector "::" (tag_name) @attribute)
+(pseudo_class_selector ":" (class_name) @attribute)
 
 [
-  (class_name)
-  (id_name)
-  (namespace_name)
   (feature_name)
+  (property_name)
 ] @property
 
-(property_name) @constant
-
 (function_name) @function
 
+[
+  (plain_value)
+  (keyframes_name)
+  (keyword_query)
+] @constant
+
 (
   [
     (property_name)
     (plain_value)
-  ] @variable.special
-  (#match? @variable.special "^--")
+  ] @variable
+  (#match? @variable "^--")
 )
 
 [
@@ -61,7 +75,7 @@
   (to)
   (from)
   (important)
-]  @keyword
+] @keyword
 
 (string_value) @string
 (color_value) @string.special
@@ -71,15 +85,15 @@
   (float_value)
 ] @number
 
-(unit) @type
+(unit) @constant.unit
 
 [
   ","
   ":"
   "."
   "::"
   ";"
-  "#"
+  (id_selector "#")
 ] @punctuation.delimiter
 
 [