Improve CSS syntax highlighting (#25326)

Release Notes:

  - Improved CSS syntax highlighting

| Zed 0.174.6 | With this PR |
| --- | --- |
| ![css_0 174
6](https://github.com/user-attachments/assets/d069f20e-5f1f-4d03-a010-81ba4b61b3a0)
|
![css_pr](https://github.com/user-attachments/assets/36463ef1-2ead-421d-9825-bd359e7677ab)
|

- `|`: `operator`
- `and`, `or`, `not`, `only`: `operator` -> `keyword.operator`, as
defined in other languages
- `id_name`, `class_name`: `property`/`attribute` -> `selector`, not a
property name. [CSS
reference](https://www.w3.org/TR/selectors-3/#class-html)
- `namespace_name`: `property` -> `namespace`, not a property name
- `property_name`: `constant` -> `property`, like `feature_name` already
defined
- `(keyword_query)`: `property`, similar to `feature_name`. [CSS
reference](https://www.w3.org/TR/mediaqueries-3/#media1)
- `keyword_query`: `constant.builtin`, [CSS
reference](https://www.w3.org/TR/mediaqueries-3/#media0)
- `plain_value`, `keyframes_name`: `constant.builtin`, [CSS
reference](https://www.w3.org/TR/css-values-3/#value-defs)
- `unit`: `type` -> `type.unit`,
[Atom](9e4afce058/grammars/tree-sitter-css.cson (L73))
and [VS
Code](336801752d/extensions/css/syntaxes/css.tmLanguage.json (L1393))
also have a `unit` scope for this. [CSS
reference](https://www.w3.org/TR/css3-values/#dimensions)


```css
@media (keyword_query) and keyword_query {}
@supports (feature_name: plain_value) {}
@namespace namespace_name url("string");
namespace_name|tag_name {}
@keyframes keyframes_name {
  to {
    top: 200unit;
    color: #c01045;
  }
}
tag_name::before,
#id_name:nth-child(even),
.class_name[attribute_name=plain_value] {
  property_name: 2em 1.2em;
  --variable: rgb(250, 0, 0);
  color: var(--variable);
  animation: keyframes_name 5s plain_value;
}
```

crates/languages/src/css/highlights.scm

@@ -11,6 +11,7 @@
   ">"
   "+"
   "-"
+  "|"
   "*"
   "/"
   "="
@@ -19,35 +20,50 @@
   "~="
   "$="
   "*="
+] @operator
+
+[
   "and"
   "or"
   "not"
   "only"
-] @operator
+] @keyword.operator
 
-(attribute_selector (plain_value) @string)
+(id_name) @selector.id
+(class_name) @selector.class
+
+(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) @selector.pseudo)
+(pseudo_class_selector ":" (class_name) @selector.pseudo)
 
 [
-  (class_name)
-  (id_name)
-  (namespace_name)
   (feature_name)
+  (property_name)
 ] @property
 
-(property_name) @constant
-
 (function_name) @function
 
+[
+  (plain_value)
+  (keyframes_name)
+  (keyword_query)
+] @constant.builtin
+
+(attribute_selector
+  (plain_value) @string)
+
+(parenthesized_query
+  (keyword_query) @property)
+
 (
   [
     (property_name)
     (plain_value)
-  ] @variable.special
-  (#match? @variable.special "^--")
+  ] @variable
+  (#match? @variable "^--")
 )
 
 [
@@ -61,7 +77,7 @@
   (to)
   (from)
   (important)
-]  @keyword
+] @keyword
 
 (string_value) @string
 (color_value) @string.special
@@ -71,7 +87,7 @@
   (float_value)
 ] @number
 
-(unit) @type
+(unit) @type.unit
 
 [
   ","
@@ -79,9 +95,10 @@
   "."
   "::"
   ";"
-  "#"
 ] @punctuation.delimiter
 
+(id_selector "#" @punctuation.delimiter)
+
 [
   "{"
   ")"