fix: Escape backtick and backslash in CSS (#536)

## Details

Escape backtick and backslash in CSS source. In any CSS file, today usage of:
* backtick makes the compiler produce an invalid javascript
* backslash escape the next character

Fix #530 

## Does this PR introduce a breaking change?

* [ ] Yes
* [X] No

packages/lwc-compiler/src/transformers/__tests__/transform.spec.ts

@@ -287,4 +287,40 @@ describe('CSS transform', () => {
 
         expect(pretify(code)).toBe(pretify(expected));
     });
+
+    it('should escape grave accents', async () => {
+        const actual = `/* Comment with grave accents \`#\` */`;
+        const expected = `
+            function style(token) {
+                return \`/* Comment with grave accents \\\`#\\\` */\`;
+            }
+
+            export default style;
+        `;
+
+        const { code } = await transform(actual, 'foo.css', {
+            namespace: 'x',
+            name: 'foo',
+        });
+
+        expect(pretify(code)).toBe(pretify(expected));
+    });
+
+    it('should escape backslash', async () => {
+        const actual = '.foo { content: "\\\\"; }';
+        const expected = `
+            function style(token) {
+                return \`.foo[\${token}] { content: "\\\\\\\\"; }\`;
+            }
+
+            export default style;
+        `;
+
+        const { code } = await transform(actual, 'foo.css', {
+            namespace: 'x',
+            name: 'foo',
+        });
+
+        expect(pretify(code)).toBe(pretify(expected));
+    });
 });

packages/lwc-compiler/src/transformers/style.ts

@@ -22,6 +22,17 @@ export default style;
 /** The javascript identifier used when custom properties get resolved from a module. */
 const CUSTOM_PROPERTIES_IDENTIFIER = 'customProperties';
 
+/**
+ * Escape CSS string to injected in a javascript string literal. This method escapes:
+ *  - grave accent to avoid conflict with the template string
+ *  - back slash to avoid unexpected string escape in the generated CSS
+ */
+function escapeString(src: string): string {
+    return src.replace(/[`\\]/g, (char: string) => {
+        return '\\' + char;
+    });
+}
+
 /**
  * Transform the var() function to a javascript call expression with the name and fallback value.
  */
@@ -75,9 +86,11 @@ export default async function transformStyle(
         );
     }
 
+    const escapedSource = escapeString(src);
+
     let res;
     try {
-        res = await postcss(plugins).process(src, {
+        res = await postcss(plugins).process(escapedSource, {
             from: filename,
         });
     } catch (e) {