Octal literals and escape sequences are not allowed in template strings (only in development)

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

Not sure if a Greenwood issue per se (that we can fix / handle), but could be a common issue for users, so thought it was worth tracking and to see if anyone has thoughts / contributions towards solving.

So in trying to migrate my studio website from Angular + Bootstrap v4 => Lit + Bootstrap v4, ran into this issue regarding the source code of bootstrap and font-awesome.

Basically they each have code like this

.fa-arrow-left:before {
  content: "\f060";
}

.blockquote-footer::before {
  content: "\2014\00A0";
}

These are octal expressions / literals, and are deprecated and are not allowed in ES6+ / ESM (strict mode), which means when using ESM to import CSS (like with plugin-import-css, the browser throws an exception and stops rendering everything.

Details

Curiously, this does not seem to happen when running a production build, and I was able to get everything to style correctly?

So based on the error which implies es-module-shims is throwing the exception, maybe this is something that can be circumvented? I tried just using the escaping suggestions from the MDN docs in our plugin and that made the error go away BUT then the icons didn't show correctly.

I also tried not using template literals to wrap the converted CSS but that still left the browser saying this cant be used in strict mode. 🤷‍♂️ 😑

Additional references / resources

• https://riptutorial.com/javascript/example/19374/escape-sequence-types
• https://mathiasbynens.be/notes/css-escapes
• https://mathiasbynens.be/notes/javascript-escapes
• https://stackoverflow.com/questions/8004765/css-9-in-width-property

[thescientist13]

Maybe I'm just doing something wrong, because this PR in the Lit docs seems to indicate the method of escaping I was trying should be supported
https://github.com/lit/lit.dev/pull/535/files/bbd9028f39e9602be9d2e01254eb8d14e4fcde7a#diff-a6f64d15022e28ccf904878c816db1f1188236f72c6ffa607ea858689f4ba7ffR115

Maybe it was something else then that was causing the browser to display the escaped HTML instead of the icon? Maybe I needed to use unsafeHTML?

Also, interesting that this only happens during development? Aren't there still template strings in the production build? 🤔 🤔 🤔

[thescientist13]

Ah, so it turned out that the escaping I was doing was indeed correct, but the reason the styles were broken, specifically the font awesome / bootstrap styles was unrelated to this particular issue. Phew.

So it seems the main takeaway here is we just need to properly escape \ and test for it using these new real world scenarios in the test.