[JavaScript] Template string inside tag function breaks syntax highlighting

[predragnikolic]

What happened?

Template string inside tag function:

let x = html`<div>
  ${`<p>World</p> `}
  </div>
  <p>This</p>
`;

or tag function inside tag function

let x = html`<div>
  ${html`<p>World</p> `}
  </div>
  <p>This</p>
`;

breaks syntax highlighting and I see this:

[deathaxe]

That's a known limitation as current implementation of tagged template tags embeds HTML syntax into JavaScript, which is terminated as soon as ` is consumed.

As HTML also embeds JavaScript in various ways and is itself base of various template languages, which extend on it, there's no sane way to handle this with acceptable complexity and without risk to hit 25000k context sanity limits.

That's technically the same as #3812.

Hence don't expect any solution (anytime soon), especially as any other strategy would affect all supported languages like CSS,HTML,JS,JSON,SQL. Using push to add syntax highlighting would likely blow up JavaScript or one of the templating languages extending it.

[Alexey-T]

which is terminated as soon as ` is consumed.

Why not to consume tick-char with negative assertion

(?<![\{])`

for the 2nd case of example, [\{] set can be extended.

[deathaxe]

Why not to consume tick-char with negative assertion

It would catch some special cases only.

It wouldn't already catch nested html` nor would it catch nested expressions in which backtick can denote opening string at any position.