TypeScript Lexer: JSX Node properties with dashes flagged as syntax errors

[jaller94]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Custom JSX Node properties, like data-test-id are causing an error.

The lexer doesn't like the dashes.

import React from 'react';

export function Outro(): React.JSX.Element {
    return (
        <p
            data-test-id="outro"
        >Thanks for reading!</p>
    );
}

To Reproduce

https://swapoff.org/chroma/playground/#eyJsYW5ndWFnZSI6IlR5cGVTY3JpcHQiLCJzdHlsZSI6Im1vbm9rYWlsaWdodCIsInRleHQiOiJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gT3V0cm8oKTogUmVhY3QuSlNYLkVsZW1lbnQge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxwXG4gICAgICAgICAgICBkYXRhLXRlc3QtaWQ9XCJvdXRyb1wiXG4gICAgICAgID5UaGFua3MgZm9yIHJlYWRpbmchPC9wPlxuICAgICk7XG59IiwiY2xhc3NlcyI6ZmFsc2V9

[jaller94]

Most likely rules to be changed:

• chroma/lexers/embedded/typescript.xml

  Lines 57 to 64 in 6dd9f26

  	<rule pattern="([\w]+\s*)(=)(\s*)">
  	<bygroups>
  	<token type="NameAttribute"/>
  	<token type="Operator"/>
  	<token type="Text"/>
  	</bygroups>
  	<push state="attr"/>
  	</rule>

• chroma/lexers/embedded/typescript.xml

  Lines 68 to 70 in 6dd9f26

  	<rule pattern="[\w\.]+">
  	<token type="NameAttribute"/>
  	</rule>