SWC + styled-components: element classes & style classes are not synched

[tremppu]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 16.14.1
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.1.5-canary.4
react: 17.0.2
react-dom: 17.0.2
styled-components: 5.3.5

What browser are you using? (if relevant)

Chrome 100.0.4896.75

How are you deploying your application? (if relevant)

No response

Describe the Bug

Sometimes when passing props to styled-components component, the generated CSS class is not synched with the styles. Classes work normally when adding the basic .babelrc configuration for styled-components so I assume the problem is with SWC.

Expected Behavior

So far there has been 2 cases when classes are wrong:

1. When starting the app, initial class is wrong but works after dynamically updating props. In this case the initial class should work without dynamic changes.
2. After dynamically changing props the class changes on the element but CSS styles are scoped for the old class and if the props are changed to the original state, a third class is generated (kind like x -> y -> z -> y -> z). in this case the styles should be updated to the new class.

To Reproduce

I created a CodeSandbox version: https://codesandbox.io/s/next-styled-components-class-names-issue-bz5p0z?file=/pages/index.js

[tremppu]

Ok it seem that adding the: compiler: { styledComponents: true } to next.config.js solves the issue. Still since styled-components "works" without that I find that it would be great if there would be an automatic detection and a warning if that part is missing from next.config.js when styled-components is used without .babelrc.

[jankaifer]

I'll convert this to a discussion.
But we would love to review a PR for this.