fix(css): make the highlights more sensible

queries/css/highlights.scm

@@ -5,19 +5,32 @@
   "@supports"
   "@keyframes"
   (at_keyword)
+] @keyword.directive
+
+"@import" @keyword.import
+
+[
   (to)
   (from)
 ] @keyword
 
-"@import" @keyword.import
-
 (comment) @comment @spell
 
+(tag_name) @tag
+
+(class_name) @type
+
+(id_name) @constant
+
+[
+  (property_name)
+  (feature_name)
+] @property
+
 [
-  (tag_name)
   (nesting_selector)
   (universal_selector)
-] @type
+] @character.special
 
 (function_name) @function
 
@@ -50,26 +63,20 @@
 
 (pseudo_element_selector
   "::"
-  (tag_name) @property)
+  (tag_name) @attribute)
 
 (pseudo_class_selector
-  (class_name) @property)
+  (class_name) @attribute)
 
-[
-  (class_name)
-  (id_name)
-  (property_name)
-  (feature_name)
-  (attribute_name)
-] @property
+(attribute_name) @tag.attribute
 
 (namespace_name) @module
 
-((property_name) @type.definition
-  (#lua-match? @type.definition "^[-][-]"))
+((property_name) @variable
+  (#lua-match? @variable "^[-][-]"))
 
-((plain_value) @type
-  (#lua-match? @type "^[-][-]"))
+((plain_value) @variable
+  (#lua-match? @variable "^[-][-]"))
 
 [
   (string_value)
@@ -77,10 +84,9 @@
   (unit)
 ] @string
 
-[
-  (integer_value)
-  (float_value)
-] @number
+(integer_value) @number
+
+(float_value) @number.float
 
 [
   "#"