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:
handle double quotes used inside user CSS for import CSS
<!--
## Submitting a Pull Request
We love contributions and appreciate any help you can offer!
-->

## Related Issue
resolves #678 

## Summary of Changes
1. Since we use `"` to wrap CSS via ESM, need to escape `"` in userland code
1. Added test

Patch:
diff --git a/packages/plugin-import-css/src/index.js b/packages/plugin-import-css/src/index.js
index 54eb4ad1..73d2e198 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, ' ')}";\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 97d09540..40e558e0 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
@@ -86,7 +86,7 @@ describe('Develop Greenwood With: ', function() {
       });
 
       it('should return an ECMASCript module', function(done) {
-        expect(response.body.replace('\n', '')).to.equal('const css = "* {   color: blue; }";export default css;');
+        expect(response.body.replace('\n', '')).to.equal('const css = "* {   color: blue;   background-image: url(\\"/assets/background.jpg\\"); }";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 9a7b45f9..fe961a4c 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,3 +1,4 @@
 * {
   color: blue;
+  background-image: url("/assets/background.jpg");
 }
\ No newline at end of file