atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.
https://compiledcssinjs.com
Apache License 2.0
1.99k stars 67 forks source link

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

Closed dddlr closed 7 months ago

dddlr commented 8 months ago

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

changeset-bot[bot] commented 8 months ago

🦋 Changeset detected

Latest commit: b6f22b39081b6facdc67797ca842ab6bf7a18466

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | ---------------------- | ----- | | @compiled/babel-plugin | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR