ffdc2f1793
It looks likea24fb17b2a(and855e438f55) broke the typescript highlights because typescript ; inherits: javascript but it doesn't have those named nodes in its grammar. So instead we can separate out JSX into its own language and copy over everything from javascript and supplement it with the new JSX highlights. Luckily there isn't too much duplication, just the language configuration parts - we can re-use the parser with the languages.toml `grammar` key and most of the queries with `inherits`.
27 lines
989 B
Scheme
27 lines
989 B
Scheme
; inherits: javascript
|
|
|
|
; Highlight component names differently
|
|
(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_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_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)))
|
|
|
|
; TODO: also tag @punctuation.delimiter?
|
|
|
|
(jsx_opening_element (identifier) @tag)
|
|
(jsx_closing_element (identifier) @tag)
|
|
(jsx_self_closing_element (identifier) @tag)
|
|
(jsx_attribute (property_identifier) @variable.other.member)
|