From 470d0492e37ff795c6379bc59501ae79834b9198 Mon Sep 17 00:00:00 2001
From: DOUGES <madou@users.noreply.github.com>
Date: Fri, 12 Jun 2020 15:47:38 +1000
Subject: [PATCH] =?UTF-8?q?fix:=20fixes=20hashing=20exploding=20when=20usi?=
 =?UTF-8?q?ng=20a=20node=20creating=20during=20transf=E2=80=A6=20(#219)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: fixes hashing exploding when using a node creating during transformation

* chore: remove try catch in mock
---
 .../babel-plugin/src/__tests__/index.test.tsx | 34 +++++++++++++++++++
 .../src/css-prop/__tests__/index.test.tsx     | 12 ++++---
 .../styled-component/__tests__/index.test.tsx |  2 +-
 .../ts-transform/src/utils/__mocks__/hash.tsx | 18 ++++------
 .../src/utils/template-literal-to-css.tsx     |  4 +--
 5 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/packages/babel-plugin/src/__tests__/index.test.tsx b/packages/babel-plugin/src/__tests__/index.test.tsx
index 948c3b258..09affe406 100644
--- a/packages/babel-plugin/src/__tests__/index.test.tsx
+++ b/packages/babel-plugin/src/__tests__/index.test.tsx
@@ -158,4 +158,38 @@ describe('babel plugin', () => {
       );
     }).not.toThrow();
   });
+
+  it('should transform inline expression', () => {
+    const actual = transformSync(
+      `
+      import { styled } from '@compiled/css-in-js';
+
+      const gridSize = (() => 8)();
+
+      export const EmptyWrapper = styled.div\`
+          margin-top: \${gridSize * 10}px;
+          width: 100%;
+      \`;
+    `,
+      babelOpts
+    );
+
+    expect(actual?.code).toMatchInlineSnapshot(`
+      "import React from \\"react\\";
+      import { CC, CS } from '@compiled/css-in-js';
+
+      const gridSize = (() => 8)();
+
+      export const EmptyWrapper = /*#__PURE__*/React.forwardRef(({
+        as: C = \\"div\\",
+        ...props
+      }, ref) => <CC><CS hash=\\"1n72cnx\\">{[\\".cc-1n72cnx{margin-top:var(--var-1af23ve);width:100%}\\"]}</CS><C {...props} ref={ref} className={\\"cc-1n72cnx\\" + (props.className ? \\" \\" + props.className : \\"\\")} style={{ ...props.style,
+          \\"--var-1af23ve\\": (gridSize * 10 || \\"\\") + \\"px\\"
+        }} /></CC>);
+
+      if (process.env.NODE_ENV === \\"development\\") {
+        EmptyWrapper.displayName = \\"EmptyWrapper\\";
+      }"
+    `);
+  });
 });
diff --git a/packages/ts-transform/src/css-prop/__tests__/index.test.tsx b/packages/ts-transform/src/css-prop/__tests__/index.test.tsx
index 93607fc57..b770614e8 100644
--- a/packages/ts-transform/src/css-prop/__tests__/index.test.tsx
+++ b/packages/ts-transform/src/css-prop/__tests__/index.test.tsx
@@ -770,8 +770,10 @@ describe('css prop transformer', () => {
         <div css={{ marginLeft: \`\${heading.depth}rem\` }}>hello world</div>
       `);
 
-      expect(actual).toInclude('style={{ "--var-test": (heading.depth || "") + "rem" }}');
-      expect(actual).toInclude('.css-test{margin-left:var(--var-test)}');
+      expect(actual).toInclude(
+        'style={{ "--var-test-headingdepth": (heading.depth || "") + "rem" }}'
+      );
+      expect(actual).toInclude('.css-test{margin-left:var(--var-test-headingdepth)}');
     });
 
     it('should persist prefix of dynamic property value into inline styles', () => {
@@ -800,8 +802,10 @@ describe('css prop transformer', () => {
         <div css={{ marginLeft: \`calc(100% - \${heading.depth}rem)\` }}>hello world</div>
       `);
 
-      expect(actual).toInclude('style={{ "--var-test": (heading.depth || "") + "rem" }}');
-      expect(actual).toInclude('.css-test{margin-left:calc(100% - var(--var-test))}');
+      expect(actual).toInclude(
+        'style={{ "--var-test-headingdepth": (heading.depth || "") + "rem" }}'
+      );
+      expect(actual).toInclude('.css-test{margin-left:calc(100% - var(--var-test-headingdepth))}');
     });
 
     it('should move multiple groups of interpolations into inline styles', () => {
diff --git a/packages/ts-transform/src/styled-component/__tests__/index.test.tsx b/packages/ts-transform/src/styled-component/__tests__/index.test.tsx
index 867eb4c84..fc92d8546 100644
--- a/packages/ts-transform/src/styled-component/__tests__/index.test.tsx
+++ b/packages/ts-transform/src/styled-component/__tests__/index.test.tsx
@@ -562,7 +562,7 @@ describe('styled component transformer', () => {
       `);
 
       expect(actual).toInclude(
-        '<CS hash="css-test">{[".css-test{border-radius:var(--var-test);color:blue}"]}</CS>'
+        '<CS hash="css-test">{[".css-test{border-radius:var(--var-test-2+2);color:blue}"]}</CS>'
       );
     });
 
diff --git a/packages/ts-transform/src/utils/__mocks__/hash.tsx b/packages/ts-transform/src/utils/__mocks__/hash.tsx
index 1e5cb73e4..d878ad268 100644
--- a/packages/ts-transform/src/utils/__mocks__/hash.tsx
+++ b/packages/ts-transform/src/utils/__mocks__/hash.tsx
@@ -7,15 +7,11 @@ export const classNameHash = (): string => {
 };
 
 export const cssVariableHash = (node: ts.Node): string => {
-  try {
-    return `--var-test-${node
-      .getText()
-      .toLowerCase()
-      .split('?')[0]
-      .trim()
-      .replace('return', '')
-      .replace(/ |`|=|'|"|\(|\)|;|\{|\}|\$|\./g, '')}`;
-  } catch (e) {
-    return '--var-test';
-  }
+  return `--var-test-${node
+    .getText()
+    .toLowerCase()
+    .split('?')[0]
+    .trim()
+    .replace('return', '')
+    .replace(/ |`|=|'|"|\(|\)|;|\{|\}|\$|\./g, '')}`;
 };
diff --git a/packages/ts-transform/src/utils/template-literal-to-css.tsx b/packages/ts-transform/src/utils/template-literal-to-css.tsx
index cbcbf7cfd..798c1c82a 100644
--- a/packages/ts-transform/src/utils/template-literal-to-css.tsx
+++ b/packages/ts-transform/src/utils/template-literal-to-css.tsx
@@ -205,7 +205,7 @@ export const templateLiteralToCss = (
       const before = cssBeforeInterpolation(css);
       const after = cssAfterInterpolation(span.literal.text);
       const cssVariableExpression = buildCssVariableExpression(span.expression, before, after);
-      const variableName = cssVariableHash(cssVariableExpression);
+      const variableName = cssVariableHash(span.expression);
 
       cssVariables.push({
         name: variableName,
@@ -223,7 +223,7 @@ export const templateLiteralToCss = (
       const before = cssBeforeInterpolation(css);
       const after = cssAfterInterpolation(span.literal.text);
       const cssVariableExpression = buildCssVariableExpression(span.expression, before, after);
-      const cssVarName = cssVariableHash(cssVariableExpression);
+      const cssVarName = cssVariableHash(span.expression);
 
       css += `var(${cssVarName})${after.css}`;
       cssVariables.push({