# Highlight nested JSX member expression tags \(\#53750\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/9a1b538fa01f9c43274d2cfb9ad5ea7d8074ecc9)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 9a1b538fa01f9c43274d2cfb9ad5ea7d8074ecc9

Requested commit: 9a1b538fa01f9c43274d2cfb9ad5ea7d8074ecc9

Commit: 9a1b538fa01f9c43274d2cfb9ad5ea7d8074ecc9

Tree: 7fae1ebba0b2ef1b5fe91a4ddbf669167799ddca

Author: Saketh

Committer: GitHub

## Message

```
Highlight nested JSX member expression tags (#53750)

The highlight queries only matched JSX member-expression tags when the
object was a plain identifier (`<A.B>`), so tags with more than one dot
like `<A.B.C>` lost their component-tag highlighting.

The fix explicitly captures every leaf `identifier` and
`property_identifier` at each nesting depth (up to 3 levels) in the
JavaScript and TSX highlight queries so each token gets its own
`@tag.component.jsx` capture that beats the generic `@property` rule.

A more concise approach, capturing the whole nested
`(member_expression)` node as a single `@tag.component.jsx` blob, does
not work because the generic `(property_identifier) @property` rule
targets a smaller, more specific node inside the blob, winning the
resolution for inner segments like `B` in `<A.B.C>`. 

Closes #53305 

Release Notes:

- Fixed highlighting for nested JSX member expression tags in JavaScript
and TSX files.

---------

Co-authored-by: dino <dinojoaocosta@gmail.com>
```

## Parents

- [67e41996be88ecba7931a2f6546d5fa5a2b8902c](https://git.cafe/gitcafe/zed/commit/67e41996be88ecba7931a2f6546d5fa5a2b8902c?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/9a1b538fa01f9c43274d2cfb9ad5ea7d8074ecc9?format=markdown)