Curly brace imbalance on interpolation containing inline JS object

[Sorixelle]

Hey! I'm currently working on using this grammar to build an Astro major mode for Emacs. Been working a charm so far, but I've recently spotted what looks to be a bug in the grammar. I'll try my best to explain:

Take the following line as an example:

<div style={{ fontSize: '16px' }}>

In this case, style is being assigned to a JS object. However, it looks like the parser is getting confused as to which curly braces match up with which. Here's the sexp the parser generates for this:

(start_tag < (tag_name)
 (attribute (attribute_name) =
  (interpolation { (raw_text) }))
 (attribute (attribute_name))
 >)

Note the extraneous attribute - this seems to be matching the last curly brace that should be closing the whole interpolation. To make the effect a little clearer, here's the line with syntax highlighting applied, where attribute_names are orange, and the braces inside an interpolation are dark grey:

I'm not super familiar with tree-sitter grammars, so I haven't been able to debug this super in depth. Although, I did notice that adding a space between the two closing curly braces seems to parse correctly:

<div style={{ fontSize: '16px' } }>

(start_tag < (tag_name)
 (attribute (attribute_name) =
  (interpolation { (raw_text) }))
 >)

Apologies if any of this is unclear - it's a bit of a tricky one to explain over text :sweat_smile: If you need any clarification, let me know and I'll try to explain further.

[virchau13]

Okay so I fixed it, but I have no clue why this solution worked at all. I think tree-sitter doesn't eat the remaining curly brace, and then somehow the HTML parser picks it up as an attribute name - not sure how?

Anyway, thank you for the issue!

[Sorixelle]

Fix tested and looks good! Thanks heaps! :pray: