fix: fixes hashing exploding when using a node creating during transf… (

#219) * fix: fixes hashing exploding when using a node creating during transformation * chore: remove try catch in mock
atlassian-labs · Jun 12, 2020 · 470d049 · 470d049
1 parent 224c703
commit 470d049
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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({
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>'
           );
         });
@@ Expand Down @@