Skip to content

sx prop transform doesn't work with spread attributes #34

@kripod

Description

@kripod

Description

A className contained in a spread attribute is not taken into account by the Babel transform.

Reproduction

A new fixture has also been added.

function Component(props) {
  return <p sx={{ color: 'green' }} {...props} />;
}

Expected behavior

function Component(props) {
  const sx = useStyling();
  // When the `sx` prop is present, make sure that `className` comes last
  return <p {...props} className={`${props.className || ''} ${sx()}`} />;
}

Actual behavior

function Component(props) {
  const sx = useStyling();
  return (
    <p
      className={sx({
        color: 'green',
      })}
      {...props}
    />
  );
}

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions