Broken syntax coloring for jsx tag with < on own line

[kubukoz]

• VSCode Version: 1.44.2
• OS Version: macOS 10.15.4 Catalina

Steps to Reproduce:

1. Create new JSX file and have React available
2. Input this text, for example:

import React from 'react'

const demo =
        <div>
            <
                div className="foo">
            </div>
        </div>;

Actual output:

I believe the empty line between the nested div's opening chevron and the element's name is to blame. Without the empty line:

This also occurs in .tsx files.

Does this issue occur when all extensions are disabled?: Yes

Edit: apparently, github's parser also doesn't handle this well, but it's correct JSX.

[IllusionMH]

Do you actually mean syntax highlight for tags?

Because it is parsed and compiled correctly by TS (which provides JS functionality)

[kubukoz]

Yeah, I meant the parser of the syntax highlighter :) sorry.

There's another case with < but this time when talking about generics in Typescript:

const [x, setX] = useState<
  number
>(0);

Removing whitespace here also changes colors of the highlight.

[kubukoz]

I added some screenshots to better describe the issue.

[IllusionMH]

Example with useState is duplicate of microsoft/vscode#72930 and if you follow chain comments you'll see #475 (comment)

I think same is applicable for strange JSX tag.

Needs microsoft/vscode#77140 with multiline support

/assign @mjbvz

[sheetalkamat]

This is limitation of textmate where it doesnt allow lookup beyond current line so we cant tell if < is start of the tag or just simple operator.