Skip to content

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

@jaller94

Description

@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>
    );
}

Screenshot 2024-02-27 at 21-03-53 JSX in TypeScript

To Reproduce

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions