on master help sign in
jsx: Add special highlighting to component names
855e438Blaž Hrastnik
runtime/queries/javascript/highlights.scm+22
@@ -1,6 +1,28 @@
1; JSX
1; JSX
2;----
2;----
3
3
4+; Highlight component names differently
5+
6+(jsx_opening_element ((identifier) @constructor
7+ (#match? @constructor "^[A-Z]")))
8+
9+; Handle the dot operator effectively - <My.Component>
10+(jsx_opening_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
11+
12+(jsx_closing_element ((identifier) @constructor
13+ (#match? @constructor "^[A-Z]")))
14+
15+; Handle the dot operator effectively - </My.Component>
16+(jsx_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
17+
18+(jsx_self_closing_element ((identifier) @constructor
19+ (#match? @constructor "^[A-Z]")))
20+
21+; Handle the dot operator effectively - <My.Component />
22+(jsx_self_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
23+
24+; TODO: also tag @punctuation.delimiter?
25+
4(jsx_opening_element (identifier) @tag)
26(jsx_opening_element (identifier) @tag)
5(jsx_closing_element (identifier) @tag)
27(jsx_closing_element (identifier) @tag)
6(jsx_self_closing_element (identifier) @tag)
28(jsx_self_closing_element (identifier) @tag)