Next 12.2.0 - Using Emtion with SWC still does not work fully

Verify canary release

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

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.14.0
      npm: 8.3.1
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.2.1-canary.2
      eslint-config-next: 12.2.0
      react: 18.1.0
      react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I use emotion in our project, before Next 12.2 emotion support in SWC was still experimental and therefore we held off and was still using babel. However, now that it’s not experimental we decided to try it out.

However, we get a build error: Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.

Expected Behavior

I expected the swc_emotion crate in SWC to work correctly

Link to reproduction

https://codesandbox.io/s/swc-emotion-problem-gnp94o

To Reproduce

All you need is emotion/react, emotion/styled and to turn it on in next config.

Then you need two styled components, one which is a parent, and the other which will be a child. Then use Component selector ${ComponentName} to style said child.

[vip30]

I’m facing the exactly same issue with passing option to styled function and use that component for the selector

i.e.

styled(Abc, {  shouldForwardProp: (propertyName: string) => !propertyName.startsWith("$") })

here is the reproduce link https://codesandbox.io/s/swc-emotion-problem-forked-c7fbit?file=/pages/index.tsx

FYI, using babel is working as expected

[admapop]

@vip30 You’re right actually, just tried it in my sandbox as well. The culprit seems to be shouldForwardProp.

It breaks even if you do plain HTML.

styled("p", {
  shouldForwardProp: (propertyName: string) => !propertyName.startsWith("$")
})

FYI @Brooooooklyn