Using a < or > within CSS inside an HTML template string breaks highlighting.

[alanwj]

Example strings:

const s1 = html`<style>p:before { content: "<"; }</style>`;
const s2 = html`<style>p:after { content: ">"; }</style>`;

In the first string, the < appears to be interpreted as the beginning on an html tag, which breaks the highlighting in the remainder of the string.

In the second string, the > is highlighted as a syntax error.

A workaround is to use unicode codepoints instead. E.g.

const s1 = html`<style>p:before { content: "\\3c"; }</style>`;
const s2 = html`<style>p:after { content: "\\3e"; }</style>`;

[jonsmithers]

Oh dang.

I can reproduce this. The real issue is that it's not parsing for css inside of the style tag, so it recognizes < as the beginning of an html tag.