Repository: ProjectEvergreen/greenwood (js)

Issue:
Octal literals and escape sequences are not allowed in template strings (only in development)
## Type of Change
- [ ] New Feature Request
- [ ] Documentation / Website
- [ ] Improvement / Suggestion
- [x] 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**](https://unpkg.com/browse/bootstrap@4.6.0/dist/css/bootstrap.css) and [**font-awesome**](https://unpkg.com/browse/font-awesome@4.7.0/css/font-awesome.css).

Basically they each have code like this
```css
.fa-arrow-left:before {
  content: "\f060";
}

.blockquote-footer::before {
  content: "\2014\00A0";
}
```

These are [octal expressions / literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal), 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**](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-import-css), the browser throws an exception and stops rendering everything.
![Screen Shot 2021-10-11 at 5 45 54 PM](https://user-images.githubusercontent.com/895923/136994074-7b538b2f-1523-450e-83bf-3199a07e0ebf.png)
![Screen Shot 2021-10-11 at 1 25 00 PM](https://user-images.githubusercontent.com/895923/136994490-d420e76f-f52f-4e3d-bc5a-eaa7e90a6393.png)

## Details
Curiously, this does not seem to happen when running a production build, and I was able to get everything to style correctly?
![Screen Shot 2021-10-12 at 11 36 04 AM](https://user-images.githubusercontent.com/895923/136994723-8aaf4905-e8d3-4611-81a1-8c11b4507c9e.png)

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](https://github.com/ProjectEvergreen/greenwood/blob/v0.17.0-alpha.0/packages/plugin-import-css/src/index.js#L33) and that made the error go away BUT then the icons didn't show correctly.
![Screen Shot 2021-10-11 at 1 27 35 PM](https://user-images.githubusercontent.com/895923/136994418-6407bfe4-e274-4e62-9025-8ecc0d71c4ba.png)

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. 🤷‍♂️  😑 
![Screen Shot 2021-10-11 at 5 45 54 PM](https://user-images.githubusercontent.com/895923/136995401-bb3363d0-6cc7-41b5-a64b-9d49ba570893.png)

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

Pull request:
handle escape sequences in imported css and update specs
<!--
## Submitting a Pull Request
We love contributions and appreciate any help you can offer!
-->

## Related Issue
resolves #766 

## Summary of Changes
1. Fixing import related issues with CSS libraries using escape sequences in their CSS
1. Updated specs to match real world cases from [Bootstrap and Font Awesome](https://github.com/AnalogStudiosRI/www.analogstudios.net/pull/17)

Patch:
diff --git a/packages/plugin-import-css/src/index.js b/packages/plugin-import-css/src/index.js
index d240533c..ad283e6f 100644
--- a/packages/plugin-import-css/src/index.js
+++ b/packages/plugin-import-css/src/index.js
@@ -42,7 +42,7 @@ class ImportCssResource extends ResourceInterface {
   async intercept(url, body) {
     return new Promise(async (resolve, reject) => {
       try {
-        const cssInJsBody = `const css = \`${body.replace(/\r?\n|\r/g, ' ')}\`;\nexport default css;`;
+        const cssInJsBody = `const css = \`${body.replace(/\r?\n|\r/g, ' ').replace(/\\/g, '\\\\')}\`;\nexport default css;`;
         
         resolve({
           body: cssInJsBody,


Test patch:
diff --git a/packages/plugin-import-css/test/cases/develop.default/develop.default.spec.js b/packages/plugin-import-css/test/cases/develop.default/develop.default.spec.js
index 2996e606..b4934caa 100644
--- a/packages/plugin-import-css/test/cases/develop.default/develop.default.spec.js
+++ b/packages/plugin-import-css/test/cases/develop.default/develop.default.spec.js
@@ -84,9 +84,12 @@ describe('Develop Greenwood With: ', function() {
         done();
       });
 
+      // https://github.com/ProjectEvergreen/greenwood/issues/766
+      // https://unpkg.com/browse/bootstrap@4.6.1/dist/css/bootstrap.css
+      // https://unpkg.com/browse/font-awesome@4.7.0/css/font-awesome.css
       it('should return an ECMASCript module', function(done) {
-        expect(response.body.replace('\n', ''))
-          .to.equal('const css = `* {   color: \\\'blue\\\';   background-image: url("/assets/background.jpg");   content: \\"\\";   font-family: \'Arial\' }`;export default css;');
+        expect(response.body.replace('\n', '').replace(/ /g, '').trim())
+          .to.equal('constcss=`*{background-image:url("/assets/background.jpg");font-family:\'Arial\'}.blockquote-footer::before{content:"\\\\2014\\\\00A0";}.fa-chevron-right:before{content:"\\\\f054";}`;exportdefaultcss;'); // eslint-disable-line max-len
         done();
       });
     });
diff --git a/packages/plugin-import-css/test/cases/develop.default/src/main.css b/packages/plugin-import-css/test/cases/develop.default/src/main.css
index 34447809..f5ae38ad 100644
--- a/packages/plugin-import-css/test/cases/develop.default/src/main.css
+++ b/packages/plugin-import-css/test/cases/develop.default/src/main.css
@@ -1,6 +1,12 @@
 * {
-  color: \'blue\';
   background-image: url("/assets/background.jpg");
-  content: \"\";
   font-family: 'Arial'
+}
+
+.blockquote-footer::before {
+  content: "\2014\00A0";
+}
+
+.fa-chevron-right:before {
+  content: "\f054";
 }
\ No newline at end of file