Update CSS syntax highlighting (#4882)

2 files changed, 69 insertions, 48 deletions

diff --git a/languages.toml b/languages.toml
index d616ce9e..756315cd 100644
--- a/languages.toml
+++ b/languages.toml
@@ -426,7 +426,7 @@ indent = { tab-width = 2, unit = "  " }
 
 [[grammar]]
 name = "css"
-source = { git = "https://github.com/tree-sitter/tree-sitter-css", rev = "94e10230939e702b4fa3fa2cb5c3bc7173b95d07" }
+source = { git = "https://github.com/tree-sitter/tree-sitter-css", rev = "769203d0f9abe1a9a691ac2b9fe4bb4397a73c51" }
 
 [[language]]
 name = "scss"
diff --git a/runtime/queries/css/highlights.scm b/runtime/queries/css/highlights.scm
index 4dfc0c66..b5262e8f 100644
--- a/runtime/queries/css/highlights.scm
+++ b/runtime/queries/css/highlights.scm
@@ -1,64 +1,85 @@
 (comment) @comment
 
-(tag_name) @tag
-(nesting_selector) @tag
-(universal_selector) @tag
+[
+ (tag_name)
+ (nesting_selector)
+ (universal_selector)
+] @tag
 
-"~" @operator
-">" @operator
-"+" @operator
-"-" @operator
-"*" @operator
-"/" @operator
-"=" @operator
-"^=" @operator
-"|=" @operator
-"~=" @operator
-"$=" @operator
-"*=" @operator
+[
+ "~"
+ ">"
+ "+"
+ "-"
+ "*"
+ "/"
+ "="
+ "^="
+ "|="
+ "~="
+ "$="
+ "*="
+] @operator
 
-"and" @operator
-"or" @operator
-"not" @operator
-"only" @operator
-
-(attribute_selector (plain_value) @string)
-(pseudo_element_selector (tag_name) @attribute)
-(pseudo_class_selector (class_name) @attribute)
-
-(class_name) @variable.other.member
-(id_name) @variable.other.member
-(namespace_name) @variable.other.member
-(property_name) @variable.other.member
-(feature_name) @variable.other.member
-
-(attribute_name) @attribute
-
-(function_name) @function
+[
+ "and"
+ "not"
+ "only"
+ "or"
+] @keyword.operator
 
 ((property_name) @variable
  (#match? @variable "^--"))
 ((plain_value) @variable
  (#match? @variable "^--"))
 
-"@media" @keyword
-"@import" @keyword
-"@charset" @keyword
-"@namespace" @keyword
-"@supports" @keyword
-"@keyframes" @keyword
-(at_keyword) @keyword
-(to) @keyword
-(from) @keyword
-(important) @keyword
+(attribute_name) @attribute
+(class_name) @label
+(feature_name) @variable.other.member
+(function_name) @function
+(id_name) @label
+(namespace_name) @namespace
+(property_name) @variable.other.member
+
+[
+ "@charset"
+ "@import"
+ "@keyframes"
+ "@media"
+ "@namespace"
+ "@supports"
+ (at_keyword)
+ (from)
+ (important)
+ (to)
+] @keyword
+
+[
+ "#"
+ "."
+] @punctuation
 
 (string_value) @string
+((color_value) "#") @string.special
 (color_value) @string.special
 
 (integer_value) @constant.numeric.integer
 (float_value) @constant.numeric.float
-(unit) @type
 
-"#" @punctuation.delimiter
-"," @punctuation.delimiter
-":" @punctuation.delimiter
+[
+ ")"
+ "("
+ "["
+ "]"
+ "{"
+ "}"
+] @punctuation.bracket
+
+[
+ ","
+ ";"
+ ":"
+ "::"
+] @punctuation.delimiter
+
+(plain_value) @constant