[Enhancement]: Exempt HTML tags from highlighting in JSX/TSX

[nanyaDev]

I would like to recreate the behaviour of VSCode's bracket pair colorization for jsx/tsx files, where the HTML tags are exempt from highlighting, as you can see below:

Is there any way to achieve this using a custom strategy or query?

[nanyaDev]

Update: I was able to achieve this using a custom nvim-treesitter query (taken from here):

; ~/.config/nvim/after/queries/tsx/highlights.scm

;; extends

[
 (jsx_element
   open_tag: (jsx_opening_element
               name: (identifier) @tag.component.jsx
               (#lua-match? @tag.component.jsx "^[A-Z]")
               (#set! "priority" 999)))
 (jsx_element
   close_tag: (jsx_closing_element
               name: (identifier) @tag.component.jsx
               (#lua-match? @tag.component.jsx "^[A-Z]")
               (#set! "priority" 999)))
 (jsx_self_closing_element
   name: (identifier) @tag.component.jsx
   (#lua-match? @tag.component.jsx "^[A-Z]")
   (#set! "priority" 999))
]

[HiPhish]

You can now set rainbow-parens as the query for Javascript (and JSX) and TSX in your settings.

let g:rainbow_delimiters = {
    \ 'query': {
        \ 'javascript': 'rainbow-parens',
        \ 'tsx': 'rainbow-parens',
    \}
\}

vim.g.rainbow_delimiters = {
    query = {
        javascript = 'rainbow-parens',
        tsx = 'rainbow-parens',
    }
}