Fix passing props arrow function directly to styled not working (#1633)

* Fix passing props arrow function directly to styled not working

* Make formatting a bit nicer

* Add changeset

* Add tests

* Add tsx syntax highlighting to changeset

* Fix prettier warning in changeset

.changeset/rare-pans-trade.md

@@ -0,0 +1,25 @@
+---
+'@compiled/babel-plugin': patch
+---
+
+Previously, if you passed `props => ...` directly to `styled.div` or `css()`, and the return value of the arrow function was an object, you would cause `@compiled/babel-plugin` to crash:
+
+```tsx
+import { styled } from '@compiled/react';
+import React from 'react';
+
+const Component = styled.div((props) => ({
+  color: `${props.customColor}`,
+  background: props.background,
+}));
+```
+
+While at the same time, wrapping the return value inside a logical expression or ternary expression would make it work perfectly fine:
+
+```tsx
+const Styles = styled.div((props) =>
+  props.isEditing ? {} : { backgroundColor: props.highlightColor }
+);
+```
+
+With this version, both of these forms will work without issue. :)

packages/babel-plugin/src/styled/__tests__/behaviour.test.ts

@@ -869,6 +869,42 @@ describe('styled component behaviour', () => {
     );
   });
 
+  it('should apply unconditional CSS with props', () => {
+    const actual = transform(`
+      import { styled } from '@compiled/react';
+
+      const Component = styled.div(
+        props => ({ color: props.primary }),
+      );
+    `);
+
+    expect(actual).toIncludeMultiple([
+      'const _="._syaz1q2z{color:var(--_1r7cl4y)}"',
+      '"--_1r7cl4y":ix(__cmplp.primary)',
+    ]);
+
+    expect(actual).toInclude('className={ax(["_syaz1q2z",__cmplp.className])}');
+  });
+
+  it('should apply unconditional CSS with and without props', () => {
+    const actual = transform(`
+      import { styled } from '@compiled/react';
+
+      const Component = styled.div(
+        { background: 'red' },
+        props => ({ color: props.primary }),
+      );
+    `);
+
+    expect(actual).toIncludeMultiple([
+      '._syaz1q2z{color:var(--_1r7cl4y)}',
+      '._bfhk5scu{background-color:red}',
+      '--_1r7cl4y":ix(__cmplp.primary)}',
+    ]);
+
+    expect(actual).toInclude('className={ax(["_bfhk5scu _syaz1q2z",__cmplp.className])}');
+  });
+
   it('should apply conditional CSS with object styles', () => {
     const actual = transform(`
       import { styled } from '@compiled/react';

packages/babel-plugin/src/utils/__tests__/normalize-props.usage.test.ts

@@ -42,6 +42,14 @@ describe('normalizePropsUsage', () => {
 
   describe('destructured props', () => {
     it('reconstructs destructured props param', () => {
+      const actual = transform(
+        `styled.div(({ customColor }) => ({ backgroundColor: customColor }));`
+      );
+
+      expect(actual).toInclude(`(${P_NAME}) => ({ backgroundColor: ${P_NAME}.customColor,}))`);
+    });
+
+    it('reconstructs destructured props param with logical expression', () => {
       const actual = transform(`
         styled.div(({ width }) => width && { width });
     `);

packages/babel-plugin/src/utils/css-builders.ts

@@ -877,12 +877,18 @@ export const buildCss = (node: t.Expression | t.Expression[], meta: Metadata): C
     return buildCss(value, updatedMeta);
   }
 
-  if (t.isArrowFunctionExpression(node) && t.isLogicalExpression(node.body)) {
-    return extractLogicalExpression(node, meta);
-  }
+  if (t.isArrowFunctionExpression(node)) {
+    if (t.isObjectExpression(node.body)) {
+      return extractObjectExpression(node.body, meta);
+    }
 
-  if (t.isArrowFunctionExpression(node) && t.isConditionalExpression(node.body)) {
-    return extractConditionalExpression(node.body, meta);
+    if (t.isLogicalExpression(node.body)) {
+      return extractLogicalExpression(node, meta);
+    }
+
+    if (t.isConditionalExpression(node.body)) {
+      return extractConditionalExpression(node.body, meta);
+    }
   }
 
   if (t.isIdentifier(node)) {