Component selector is not working on nested styled components

[Brooooooklyn]

First of all thank you for the great work!
Not sure if I should open another issue but I'm still having a problem after trying out the emotion transform.

Component selectors can only be used in conjunction with @emotion/babel-plugin

Here is an example repo with the issue. https://github.com/macko911/next-swc-emotion-component-selector
Basically I've added only this component to the with-emotion-swc example from the Next.js repo.

export const ComponentSelectors = styled.div`
  ${Basic} {
    color: red;
  }`

Is this a feature that might come later, or will I have to refactor my code so that it doesn't rely on the component selector API?

Originally posted by @macko911 in #30804 (comment)

[icyJoseph]

Hi,

I am a bit confused now, I have project in production which uses this:

export const BadgesWrapper = styled(Flex)`
  flex-direction: column;

  & ${BaseCard} {
    width: 100%;
    max-width: 66.66%;
  }

  @media (min-width: 40em) {
    flex-direction: row;

    & ${BaseCard} {
      width: 100%;
      max-width: 90%;
    }
  }
`;

With SWC and even the swcMinify option.

My confusion is, you are pointing to a repo that uses emotion, but you are using styled-components, so how does your project look like? Are you maybe mixing frameworks?

[Brooooooklyn]

@icyJoseph This issue is for the swc emotion transformation bug, and the posted codes are also valid emotion syntax.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.