Usage of css prop broken in 1.13.2

[jbanulso]

Hi,

Upgrading this library from v1.12.0 to v1.13.2 is breaking my app builds. I've pinned it down to a specific component that it's using the css prop as follows:

const MyComponent = ({ width, ...props }) => {
  return (
    <ThirdPartyComponent css={{ width: width ? `${width}px` : '100%' }} {...props} />;
  );
};

For the record, the issue still happens when using an HTML tag (i.e. div) instead of a custom ThirdPartyComponent.

Is this a bug or is it intended behaviour after the upgrade?

Note: I'm building my application with the latest versions of Webpack 5 and Babel 7, and using styled-components@5.2.3

[quantizor]

@jbanulso could you try 2.0.1-test and let me know how it goes?

[jbanulso]

@probablyup 2.0.1 breaks my application even further... Even usage of simple css prop is broken now.

I had a workaround for my original problem that used to work, but not anymore. My ThirdPartyComponent complains that children is undefined.

const MyComponent = ({ width: w, ...props }) => {
  const width = w ? `${w}px` : '100%'
  return (
    <ThirdPartyComponent css={{ width }} {...props} />;
  );
};

---

So, to sum up, these are the use cases that are broken:

• css={{ width: width ? `${width}px` : '100%' }} - from v1.13.2
• css={{ width }}, where const width = w ? `${w}px` : '100%' - from v2.0.1
• css={{ width: '100px' }} - from v2.0.1

[quantizor]

@jbanulso Interesting, we have tests for all of those scenarios. What sort of build setup do you have?

[jbanulso]

@jbanulso Interesting, we have tests for all of those scenarios. What sort of build setup do you have?

Latest versions of Webpack 5 and Babel 7. styled-components@5.3.3

[jbanulso]

And in case it's worth mentioning it, the particular third-party component I've experienced these problems with is the Accordion from @reach/accordion.