🐛 BUG: Syntax highlighting breaks with lowercase component names

[opswiz]

Describe the Bug

Syntax Highlighting in .astro files breaks when a component name starts with lower case.

Example.

Mostly I don't use this syntax, but sometimes with pandacss, we can used styled components as described here https://panda-css.com/docs/concepts/style-props#jsx-element

import { styled } from 'styled-system/jsx';
---
<styled.button>Click Me</styled.button>

Where as this works

import { styled as Styled } from 'styled-system/jsx';
---
<Styled.button>Click Me</Styled.button>

Steps to Reproduce

1. npm create astro@latest
2. Open any .astro file
3. add <styled.button>Click Me</styled.button> anywhere in html block, syntax highlighting after this will break
4. Expected the syntax highlighting to work

[Princesseuh]

Hmm, I think using a lowercase name for a component will in general cause issues at the moment, a lot of our detection depends on the uppercase name

[opswiz]

Yes It appears so.

[opswiz]

Since this is a valid use case, can we expect a fix? or there are any other recommendations?

[Princesseuh]

It's a bit low priority since there's a very easy workaround, but I'll look into it eventually. I would also accept a PR for sure.

[opswiz]

Can you point me where, so I can try to raise a PR if possible.

[Princesseuh]

If just talking about the syntax highlighting, it would be here:

https://github.com/withastro/language-tools/blob/main/packages/vscode/syntaxes/astro.tmLanguage.src.yaml#L375

I'd check how TSX reacts, with semantic highlighting disabled, when doing this and emulate the behaviour