Fix passing props arrow function directly to styled not working

atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.

Apache License 2.0

1.99k stars 67 forks source link

For some reason, 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:

import { styled } from '@compiled/react';
import React from 'react';

const Component = styled.div(props => ({
  color: `${props.customColor}`,
  background: props.background,
}));

On the other hand, wrapping the return value inside a logical expression or ternary expression would make it work perfectly fine:

const Styles = styled.div(
  (props) => (props.isEditing ? {} : { backgroundColor: props.highlightColor }),
);

(note the above examples exclude TypeScript type annotations for simplicity)

This PR fixes this discrepancy.

Todo

[x] Add some tests
[x] Sanity check

atlassian-labs / compiled

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

Todo

🦋 Changeset detected