Broken highlighting when using bare `&` in JSX attribute

[rschristian]

Likely related: https://github.com/tree-sitter/tree-sitter-javascript/commit/b16c69a70be907609950606e44ae266818ed8636

The following piece of code is valid but it is parsed incorrectly:

const ex = () => <div class="flex(& col)" />;

Here's a link to the TypeScript Playground showing that the snippet above is valid JavaScript or TypeScript:

https://www.typescriptlang.org/play?#code/MYewdgzgLgBApgDxgXhgCgJQoHwwDwAmAlgG4zAA2AhhBMgEQBmFiaAZDIyCBvTAPTYA3EA

The output of tree-sitter parse is the following:

(program [0, 0] - [1, 0]
  (lexical_declaration [0, 0] - [0, 45]
    (variable_declarator [0, 6] - [0, 44]
      name: (identifier [0, 6] - [0, 8])
      value: (arrow_function [0, 11] - [0, 44]
        parameters: (formal_parameters [0, 11] - [0, 13])
        body: (jsx_self_closing_element [0, 17] - [0, 44]
          name: (identifier [0, 18] - [0, 21])
          attribute: (jsx_attribute [0, 22] - [0, 41]
            (property_identifier [0, 22] - [0, 27])
            (string [0, 28] - [0, 41]
              (string_fragment [0, 29] - [0, 34])
              (ERROR [0, 34] - [0, 40]
                (identifier [0, 36] - [0, 39])))))))))

Sorry, I wasn't able to figure out what's all necessary to run tree-sitter parse locally, so I retrieved this from the playground instead and did my best to clean it up.

---

This should be treated as a normal string. I think this is simply due to an incorrect assumption that & will always lead to an HTML entity, which is not the case.

If there's a question of "why would you write this?", this comes from a dialect of TailwindCSS called Twind. Essentially this is a shorthand for utility classes that share the same base token (text(lg blue)) where the & is a self reference so that it's transformed into flex flex-col. I get that this particular use case is niche, but using an & in an attribute shouldn't be too out of the ordinary.

[serranomorante]

Should be fixed with: https://github.com/tree-sitter/tree-sitter-javascript/pull/305

[rschristian]

Cheers, thank you!