Error using Emotion component selectors with SWC

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:08:47 PST 2022; root:xnu-8792.61.2~4/RELEASE_X86_64
    Binaries:
      Node: 16.18.1
      npm: 9.1.1
      Yarn: 1.22.19
      pnpm: 7.27.1
    Relevant packages:
      next: 13.1.6
      eslint-config-next: 13.1.6
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

SWC transpilation

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/polished-browser-went6z

To Reproduce

The following is a minimal reproduction (used in the reproduction codesandbox):

import styled from "@emotion/styled";

const A = styled.div`
  color: red;
`;

const B = styled.div`
  color: blue;
  ${A} {
    color: green;
  }
`;

export default function Home() {
  return <B><A>A inside B</A></B>;
}

No extra steps are required to reproduce. Simply load the codesandbox and observe the resulting error.

Describe the Bug

I'm getting the error:

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

When using component selectors as described in the "Targeting another emotion component" section of the emotion docs, I'm getting this error.

Expected Behavior

Since this reproduction repo uses the swc Emotion plugin, I would not expect this syntax to result in an error.

Given the example above, I would expect green text "Test" when rendering A inside B.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response