handle styled(Component)(object/function) syntax

[jsardev]

I'm using styled-components with SSR heavily and found few cases when the server-rendered markup mismatches on the client-side, resulting in a console warning in development mode.

After a lot of digging, I noticed that the problem goes away when I resign from the object/function syntax for extended components, like this:

styled(Component)(props => ({ color: props.color }));
styled(Component)({ color: 'red' });

This happens because this babel plugin does not ensure that styled-components with this kind of syntax will result in consistent component-id while doing SSR.

I tried to provide a PR by myself but I don't have much experience in compiler stuff so it took me a lot of time to start to understand anything in this repository 😥 And unfortunately I don't have more time to sit on this. But I managed to set up a failing test for this case - I guess it might be helpful.

test/fixtures/add-identifier/index.js

const WrappedComponentObjectForm = styled(Inner)({ color: red })
const WrappedComponentFunctionForm = styled(Inner)(p => ({ color: p.color || 'red' }))

test/snapshots/index.test.js.snap

const WrappedComponentObjectForm = styled(Inner).withConfig({
  componentId: \\"wkc8iz-6\\"
})({
  color: red
});
const WrappedComponentFunctionForm = styled(Inner).withConfig({
  componentId: \\"wkc8iz-7\\"
})(p => ({
  color: p.color || 'red'
}));"

I think handling this case could resolve few issues like #147 or next.js#3706.

I would very appreciate any action on this issue as I'm completely out of time right now and I'm sure someone with greater experience with AST's or particularly this repository could do this without spending a lot of time on it.

[KyorCode]

I'm running into this problem in 2020, was this every fixed? When wrapping an external library component with styled(Component), class mismatches are generated both in develop and production mode. I have tried every possible solution in the related issues, but can not seem to get it to work.

[mario-jerkovic]

Same here. I don't get this issue in development mode, only in production.

[mnajdova]

Same issue is surfacing when using mui v5 with styled-components. I am not sure if it is also related to it being an external dependency (there is another issue around this https://github.com/styled-components/babel-plugin-styled-components/issues/358)

This is the original issue posted on MUI - https://github.com/mui-org/material-ui/issues/29742