JavaScript React Syntax - Template literal inside component props breaks highlighting

[Vivalldi]

Issue Type: Bug

Inside a .jsx file (JavaScript React Syntax) call a component in render and pass a prop with template literals.
Example:

...
return () {
    <div>
      <SomeComponent key={`some-${someVariable}`} />
      <AnotherComponent />
    </div>
}

In the above example syntax highlighting will work as expected until just after the second backtick in the SomeComponent. Everything thereafter is then highlighted to be the same color.

VS Code version: Code 1.23.1 (d0182c3, 2018-05-10T16:03:31.083Z)
OS version: Darwin x64 17.5.0

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz (4 x 2700)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: enabled rasterization: enabled video_decode: enabled video_encode: enabled vpx_decode: enabled webgl: enabled webgl2: enabled
Load (avg)	3, 4, 5
Memory (System)	8.00GB (0.03GB free)
Process Argv	/Applications/Visual Studio Code.app/Contents/MacOS/Electron .
Screen Reader	no
VM	0%

Extensions (17)

Extension	Author (truncated)	Version
gc-excelviewer	Gra	2.0.21
vscode-docker	Pet	0.0.27
city-lights-icon-vsc	Yum	1.0.1
npm-intellisense	chr	1.3.0
path-intellisense	chr	1.4.2
vscode-eslint	dba	1.4.12
vscode-new-file	dku	4.0.2
vscode-npm-script	eg2	0.3.4
vscode-great-icons	emm	2.1.33
enki-vscode-theme	enk	0.3.1
atom-keybindings	ms-	3.0.4
vsliveshare	ms-	0.3.262
debugger-for-chrome	msj	4.5.0
polacode	pnp	0.2.2
postcss	ric	2.0.0
gitblame	wad	2.4.2
vscode-todo-highlight	way	0.5.12

(3 theme extensions excluded)

[mjbvz]

I can't repo in vscode insiders:

Please test in insiders with all extensions disabled

[Vivalldi]

Ahh so turns out this get's a little bit more interesting. The actual case is as follows,

class Foo {
    render(){
        const barList = bars.map(bar => (
            [
                <Baz key={`bar-${bar.id}`} />,
                <Qux />
            ]
        ));
    }
}

The important bit being the "dropped" square bracket.

Where as the following works perfectly alright

class Foo {
    render(){
        const barList = bars.map(bar => ([
            <Baz key={`bar-${bar.id}`} />,
            <Qux />
        ]));
    }
}

I'll just avoid dropping the bracket but it is a bit odd.

[mjbvz]

Thanks. Opened microsoft/TypeScript-TmLanguage#624 to track this upstream