syntax highlighting breaks in jsx with template literal containing dash and .svg

[martypenner]

Issue Type: Bug

1. Create a very basic file with JSX and a template literal within the JSX that contains a dash (-) and ends in .svg, e.g.:

import React from 'react';

const cdnUrl = 'https://cdn.somewhere.com';

export default function Test() {
  return <img src={`${cdnUrl}/photo/cocker-spaniel-960_720.svg`} alt="" />;
}

2. Enable lit-html
3. Notice the syntax highlighting changes after the last dash (-) in the template literal

Extension version: 1.11.1
VS Code version: Code 1.58.2 (Universal) (c3f126316369cd610563c75b1b1725e0679adfb3, 2021-07-14T22:09:06.581Z)
OS version: Darwin x64 20.6.0
Restricted Mode: No

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz (8 x 2300)
GPU Status	2d_canvas: enabled gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: enabled opengl: enabled_on rasterization: enabled skia_renderer: disabled_off_ok video_decode: enabled webgl: enabled webgl2: enabled
Load (avg)	65, 46, 31
Memory (System)	16.00GB (2.04GB free)
Process Argv	--crash-reporter-id ab049fd2-bee3-44eb-a2ec-f0bcf4641e72
Screen Reader	no
VM	0%