feat: add highlight test

queries/highlights.scm

@@ -23,24 +23,24 @@
 "only" @operator
 
 (attribute_selector (plain_value) @string)
-(pseudo_element_selector (tag_name) @attribute)
-(pseudo_class_selector (class_name) @attribute)
+
+((property_name) @variable
+ (#match? @variable "^--"))
+((plain_value) @variable
+ (#match? @variable "^--"))
 
 (class_name) @property
 (id_name) @property
 (namespace_name) @property
 (property_name) @property
 (feature_name) @property
 
+(pseudo_element_selector (tag_name) @attribute)
+(pseudo_class_selector (class_name) @attribute)
 (attribute_name) @attribute
 
 (function_name) @function
 
-((property_name) @variable
- (#match? @variable "^--"))
-((plain_value) @variable
- (#match? @variable "^--"))
-
 "@media" @keyword
 "@import" @keyword
 "@charset" @keyword
@@ -59,6 +59,18 @@
 (float_value) @number
 (unit) @type
 
-"#" @punctuation.delimiter
-"," @punctuation.delimiter
-":" @punctuation.delimiter
+[
+  "#"
+  ","
+  "."
+  ":"
+  "::"
+  ";"
+] @punctuation.delimiter
+
+[
+  "{"
+  ")"
+  "("
+  "}"
+] @punctuation.bracket

test/highlight/test_css.css

@@ -0,0 +1,70 @@
+:root {
+ /* <- attribute */
+/* <- punctuation.delimiter */
+  --color1: #000;
+  /* <- property */
+          /* ^ string.special */
+         /* ^ punctuation.delimiter */
+  --color2: rgba(255, 255, 255, 1);
+            /* ^ function */
+                 /* ^ punctuation.delimiter */
+
+  --font-family: 'Times New Roman', sans-serif;
+  --spacing: .3em;
+
+  --gap: 8px;
+}
+
+body {
+/* <- tag */
+  font-family: var(--font-family);
+            /* ^ function */
+               /* ^ punctuation.bracket */
+                /* ^ variable */
+}
+
+a {
+  color: blue;
+}
+
+a:href {
+  color: green;
+}
+
+#logo {
+/* <- punctuation.delimiter */
+/* ^ property */
+   /* ^ punctuation.bracket */
+  font-family: sans-serif;
+  /* <- property */
+          /* ^ punctuation.delimiter */
+                      /* ^ punctuation.delimiter */
+  font: normal bold 1rem / 1.4 'Times New Roman', sans-serif;
+   /* ^ punctuation.delimiter */
+                      /* ^ operator */
+                         /* ^ number */
+                                             /* ^ punctuation.delimiter */
+                              /* ^ string */
+                 /* ^ number */
+                  /* ^ type */
+  padding: 0px 0px;
+      /* ^ punctuation.delimiter */
+        /* ^ number */
+         /* ^ type */
+  /* <- property */
+}
+/* <- punctuation.bracket */
+
+@media (max-width: 1024px) {
+                 /* ^ number */
+                    /* ^ type */
+        /* ^ property */
+/* <- keyword */
+    /* ^ punctuation.bracket */
+                      /* ^ punctuation.bracket */
+  .container {
+   /* <- property */
+  /* <- punctuation.delimiter */
+    display: flex;
+  }
+}