Multiline data URIs break CSS highlighting pretty badly

[LeaVerou]

Steps to Reproduce:

1. Open a new tab and set language to CSS
2. Paste the code below:

select {
	padding-right: 1.5rem;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50">\
	<path d="m 20 10 L 50 40 L 80 10" fill="none" stroke="black" stroke-opacity=".4" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /></svg>');
	background-position: calc(100% + 1rem) 55%;
	background-size: auto .4rem;
	background-repeat: no-repeat;
	background-origin: content-box;
}

Result in VS Code:

Everything after the data URI is highlighted incorrectly, even subsequent rules.

Oddly enough, if I use the SCSS language definition for the same code, it works fine:

Result in Atom:

[alexr00]

Upstream issue: atom/language-css#181

[LeaVerou]

Thanks for triaging! I don't understand how it can be a problem with Atom given that multiline strings work (on my end at least!) in Atom?

[alexr00]

My understanding is that Atom doesn't use textmate grammars anymore, so even though that's an atom repo they are not using the same syntax highlighting mechanism.