fix: restore missing @tag highlights for JSX/TSX/HTML (#254)

- Add @tag, @tag.builtin, @tag.attribute, @tag.delimiter highlights
- Fixes broken syntax highlighting in JSX, TSX, HTML, and XML files
- Tags display in purple, attributes in yellow
- Add test files for TSX, TypeScript, and YAML
- Add automated test for @tag highlights

Author: Navarasu

CHANGELOG.md

@@ -10,6 +10,19 @@ Nothing yet!
 
 ---
 
+## [v1.0.3] - 2025-11-24
+
+### 🐛 Fixed
+
+- **JSX/TSX/HTML highlighting broken** (#254)
+  - Restored missing `@tag` highlight groups that were accidentally removed in v1.0.0
+  - Fixed broken syntax highlighting in JSX, TSX, HTML, and XML files
+  - Added `@tag`, `@tag.builtin`, `@tag.attribute`, and `@tag.delimiter` highlights
+  - Tags now properly display in purple, attributes in yellow
+  - Affected users were seeing degraded readability in React/TypeScript components
+
+---
+
 ## [v1.0.2] - 2025-11-24
 
 ### 🐛 Fixed

lua/onedark/highlights.lua

@@ -263,6 +263,12 @@ if vim.api.nvim_call_function("has", { "nvim-0.8" }) == 1 then
         ["@string.special.symbol"] = colors.Cyan,
         ["@string.special.url"] = {fg = c.cyan, fmt = 'underline'},
 
+        -- Tags (HTML, JSX, TSX, XML)
+        ["@tag"] = colors.Purple,
+        ["@tag.builtin"] = colors.Purple,
+        ["@tag.attribute"] = colors.Yellow,
+        ["@tag.delimiter"] = colors.Purple,
+
         -- Types
         ["@type"] = colors.Yellow,
         ["@type.builtin"] = colors.Orange,

test.rb

@@ -0,0 +1,9 @@
+  Test file:
+  # Comment above class
+  class Foo
+    # Comment above method
+    def bar
+      # Comment inside method <-- THIS ONE
+      x = 1
+    end
+  end

tests/automated/test_highlights.lua

@@ -179,6 +179,18 @@ else
   tests_failed = tests_failed + 1
 end
 
+-- Test 11: Fix #254 - Tag highlights for JSX/TSX/HTML
+if test("Tag highlights exist (fix #254)", function()
+  assert_highlight_exists("@tag")
+  assert_highlight_exists("@tag.builtin")
+  assert_highlight_exists("@tag.attribute")
+  assert_highlight_exists("@tag.delimiter")
+end) then
+  tests_passed = tests_passed + 1
+else
+  tests_failed = tests_failed + 1
+end
+
 -- Summary
 print("\n" .. string.rep("=", 60))
 print(string.format("Test Results: %d passed, %d failed", tests_passed, tests_failed))

tests/manual/test.ts

@@ -0,0 +1,51 @@
+// TypeScript test file
+// Comment at the top
+
+/**
+ * Documentation comment for a function
+ * @param name - The name parameter
+ * @returns A greeting string
+ */
+function greet(name: string): string {
+  // Comment inside function
+  const greeting = `Hello, ${name}!`;
+  return greeting;
+}
+
+// Interface definition
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+// Class with comments
+class UserManager {
+  private users: User[] = [];
+
+  /**
+   * Add a user to the list
+   */
+  addUser(user: User): void {
+    // Comment before operation
+    this.users.push(user);
+  }
+
+  // Get all users
+  getUsers(): User[] {
+    return this.users;
+  }
+}
+
+// Type alias
+type ID = string | number;
+
+// Enum
+enum Status {
+  Active,
+  Inactive,
+  Pending
+}
+
+// Export statement
+export { greet, User, UserManager };

tests/manual/test.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+
+// This is a comment in TypeScript
+interface Props {
+  name: string;
+  count: number;
+}
+
+/**
+ * Documentation comment for component
+ */
+function MyComponent({ name, count }: Props) {
+  const [value, setValue] = useState(0);
+
+  // Comment inside function
+  const handleClick = () => {
+    setValue(value + 1);
+  };
+
+  return (
+    <div className="container">
+      <h1>Hello {name}</h1>
+      <p>Count: {count}</p>
+      <button onClick={handleClick}>
+        Click me: {value}
+      </button>
+      <CustomComponent prop="value" />
+    </div>
+  );
+}
+
+// More comments
+const CustomComponent = ({ prop }: { prop: string }) => {
+  return <span>{prop}</span>;
+};
+
+export default MyComponent;

tests/manual/test.yaml

@@ -0,0 +1,39 @@
+# YAML configuration file
+# Comment at the top
+
+name: My Application
+version: 1.0.0
+
+# Server configuration
+server:
+  host: localhost
+  port: 8080
+  # Nested comment
+  ssl:
+    enabled: true
+    certificate: /path/to/cert.pem
+
+# Database settings
+database:
+  host: db.example.com
+  port: 5432
+  # Connection pool settings
+  pool:
+    min: 5
+    max: 20
+
+# Array of items
+features:
+  - authentication
+  - authorization
+  - logging
+  # - disabled-feature
+
+# Multi-line string
+description: |
+  This is a multi-line description
+  that spans several lines
+  and includes various details.
+
+# Inline mapping
+metadata: { author: "John Doe", date: "2024-01-01" }