1 files changed, 55 insertions, 0 deletions
diff --git a/runtime/queries/_jsx/highlights.scm b/runtime/queries/_jsx/highlights.scm
new file mode 100644
index 00000000..00641cde
--- /dev/null
+++ b/runtime/queries/_jsx/highlights.scm
@@ -0,0 +1,55 @@
+; Opening elements
+; ----------------
+
+(jsx_opening_element ((identifier) @constructor
+ (#match? @constructor "^[A-Z]")))
+
+; Handle the dot operator effectively - <My.Component>
+(jsx_opening_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
+
+(jsx_opening_element (identifier) @tag)
+
+; Closing elements
+; ----------------
+
+(jsx_closing_element ((identifier) @constructor
+ (#match? @constructor "^[A-Z]")))
+
+; Handle the dot operator effectively - </My.Component>
+(jsx_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
+
+(jsx_closing_element (identifier) @tag)
+
+; Self-closing elements
+; ---------------------
+
+(jsx_self_closing_element ((identifier) @constructor
+ (#match? @constructor "^[A-Z]")))
+
+; Handle the dot operator effectively - <My.Component />
+(jsx_self_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
+
+(jsx_self_closing_element (identifier) @tag)
+
+; Attributes
+; ----------
+
+(jsx_attribute (property_identifier) @variable.other.member)
+
+; Punctuation
+; -----------
+
+; Handle attribute delimiter
+(jsx_attribute "=" @punctuation.delimiter)
+
+; <Component>
+(jsx_opening_element ["<" ">"] @punctuation.bracket)
+
+; </Component>
+(jsx_closing_element ["<" "/" ">"] @punctuation.bracket)
+
+; <Component />
+(jsx_self_closing_element ["<" "/" ">"] @punctuation.bracket)
+
+; <> ... </>
+(jsx_fragment ["<" "/" ">"] @punctuation.bracket)