Repository: ProjectEvergreen/greenwood (js)

Issue:
double quotes inside `import`ed CSS breaks
## Type of Change
- [ ] New Feature Request
- [ ] Documentation / Website
- [ ] Improvement / Suggestion
- [x] Bug
- [ ] Other (please clarify below)

## Summary
As observed in https://github.com/thescientist13/greenwood-starter-presentation/pull/18, if the CSS being used with `import` has double quotes around it (`"`) which is what Greenwood wraps CSS is with when transforming it to JS, the returned JS breaks in the console because of the `"`. 
```css
:root {
  .
  .
  .
  --backgroundUrl: url("/assets/background.jpg");
}
```

![image](https://user-images.githubusercontent.com/895923/127782129-aee34bb3-1b66-425d-bd89-a145d77766d3.png)


## Details
So whatever Greenwood wants to wrap in, it should just make sure [to escape it properly](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/plugin-import-css/src/index.js#L33) for userland.  Hopefully can be captured through a spec.

Pull request:
refactor and enhance tests for CSS with quotes
<!--
## Submitting a Pull Request
We love contributions and appreciate any help you can offer!
-->

## Related Issue
resolves #678 

## Summary of Changes
1. Refactor to support nested quotes when wrapping CSS-in-JS for using with ESM
1. Updated specs to test all possible permutations of single and double quote escaping

Patch:
diff --git a/packages/plugin-import-css/src/index.js b/packages/plugin-import-css/src/index.js
index 73d2e198..8db8bd5c 100644
--- a/packages/plugin-import-css/src/index.js
+++ b/packages/plugin-import-css/src/index.js
@@ -30,7 +30,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, ' ').replace(/"/g, '\\"')}";\nexport default css;`;
+        const cssInJsBody = `const css = \`${body.replace(/\r?\n|\r/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 40e558e0..c093ea96 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
@@ -17,7 +17,6 @@
  *
  */
 const expect = require('chai').expect;
-const { JSDOM } = require('jsdom');
 const path = require('path');
 const request = require('request');
 const Runner = require('gallinago').Runner;
@@ -67,8 +66,8 @@ describe('Develop Greenwood With: ', function() {
             }
 
             response = res;
-            
-            dom = new JSDOM(body);
+            response.body = body;
+
             resolve();
           });
         });
@@ -86,7 +85,8 @@ describe('Develop Greenwood With: ', function() {
       });
 
       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\\"); }";export default css;');
+        expect(response.body.replace('\n', ''))
+          .to.equal('const css = `* {   color: \\\'blue\\\';   background-image: url("/assets/background.jpg");   content: \\"\\";   font-family: \'Arial\' }`;export default css;');
         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 fe961a4c..34447809 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,4 +1,6 @@
 * {
-  color: blue;
+  color: \'blue\';
   background-image: url("/assets/background.jpg");
+  content: \"\";
+  font-family: 'Arial'
 }
\ No newline at end of file