From e03feb32c6006b8e2ef1e2ae0a29467b3fe1c308 Mon Sep 17 00:00:00 2001
From: Kunall Banerjee <hey@kimchiii.space>
Date: Fri, 13 Mar 2026 12:43:32 -0400
Subject: [PATCH] Update JSX component highlighting to use semantic tag scope
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes JSX component identifiers from generic `@type` to the more
specific `@tag.component` scope in both JavaScript and TypeScript
syntax highlighting. This allows themes to style React/JSX components
distinctly from regular types.

The only thing to be aware of is the **visual change for JSX/TSX
users**: components that were previously teal (via `@type`) will now
inherit whatever their theme's `tag` color is. For themes like Ayu,
Gruvbox, and One (perhaps other built-in themes too?) that define `tag`
with a color, components will pick that up. For themes that leave `tag`
unstyled (including the fallback theme), components will lose their teal
color. That’s a deliberate trade-off with these changes.
---
 crates/languages/src/javascript/highlights.scm | 18 +++++++++---------
 crates/languages/src/tsx/highlights.scm        | 18 +++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/crates/languages/src/javascript/highlights.scm b/crates/languages/src/javascript/highlights.scm
index 4824684177ae2fe8c5b2f1d582b4d443216b9519..98209960e897678899485bbebb979ef55767ae63 100644
--- a/crates/languages/src/javascript/highlights.scm
+++ b/crates/languages/src/javascript/highlights.scm
@@ -328,26 +328,26 @@
 ; JSX elements
 (jsx_opening_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_closing_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_self_closing_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_opening_element
diff --git a/crates/languages/src/tsx/highlights.scm b/crates/languages/src/tsx/highlights.scm
index 056956199ef26faea0c9fc09467f48c19a712b14..b6ba79c15f8ab443364387ef4e9001043dea71b3 100644
--- a/crates/languages/src/tsx/highlights.scm
+++ b/crates/languages/src/tsx/highlights.scm
@@ -389,26 +389,26 @@
 
 (jsx_opening_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_closing_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_self_closing_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_opening_element