languages: Apply JSX fixes to JavaScript highlights (#47130) (cherry-pick to preview) (#47131)

zed-zippy[bot] and Finn Evers created 3 days ago

Cherry-pick of #47130 to preview

----
Closes #46701

This ports the fixes from #46442 over to the JavaScript highlights,
which we forgot to do in that PR since the highlights are not shareable
and the fix was only applied to TSX... Hence, porting the fixes here
manually to solve the issue for good.

Release Notes:

- Fixed an issue where JSX components were highlighted too broadly,
causing normal HTML tags to be highlighted as such

Co-authored-by: Finn Evers <finn@zed.dev>

Change summary

crates/languages/src/javascript/highlights.scm | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)

Detailed changes

crates/languages/src/javascript/highlights.scm 🔗

@@ -322,10 +322,6 @@
 ] @keyword
 
 ; JSX elements
-(jsx_opening_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
-(jsx_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
-(jsx_self_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
-
 (jsx_opening_element
   [
     (identifier) @type
@@ -354,6 +350,9 @@
   ]
 )
 
+(jsx_opening_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
+(jsx_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
+(jsx_self_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
 (jsx_attribute (property_identifier) @attribute.jsx)
 (jsx_opening_element (["<" ">"]) @punctuation.bracket.jsx)
 (jsx_closing_element (["</" ">"]) @punctuation.bracket.jsx)