CSS prop is breaking build when component comes from imported object

[dlehmhus]

Problem

When trying to add css to a component that comes from a different file from inside an object, an error gets thrown with the message Uncaught ReferenceError: Icons is not defined. Strangely the error only occurs in the production build. In development-mode everything is working fine. Also when I move the content of the icons.tsx inside the app.tsx everything is working as expected as well.

Setup

// icons.tsx
import React from "react";

const icons = { Foo: (props: any) => <div {...props}>Foo</div> };

export default icons;

// app.tsx
import React from "react";
import { css } from "styled-components/macro";
import Icons from "./icons";

const someCss = css` background: purple;`;

const App: React.FC = () => { return <Icons.Foo css={someCss} />; };

Repo with an example setup: https://github.com/dlehmhus/styled-components-with-macro-example

[sfishel-splunk]

Any updates on this? I just ran into it myself. Looks like it was introduced in 1.9.0, so reverting to 1.8.0 is the only workaround I can find.

[chasemccoy]

Also seeing this behavior

[sfishel18]

Looks like the root cause is the JSX member expression, so I think you should be able to work around it like this:

import React from "react";
import { css } from "styled-components/macro";
import Icons from "./icons";

const someCss = css` background: purple;`;

const IconFoo = Icon.Foo;
const App: React.FC = () => { return <IconFoo css={someCss} />; };

[vedrani]

Guys, any news when this could be fixed. PR is working.
What needs to be done and can I help to deliver this?