styled-components v6 import { styled } vs import styled displayName

[beaucollins]

System Info

System:
OS: macOS 14.1
CPU: (8) arm64 Apple M1 Pro
Memory: 142.03 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
Browsers:
Chrome: 117.0.5938.132
Edge: 119.0.2151.46
Firefox: 119.0
Safari: 17.1
Safari Technology Preview: 17.4

Details

swc-project/plugins#225

Update swc dependencies.

With styled-components v6 the import syntax of import { styled } from 'styled-components' is now possible (and even preferred).

swc's styled-components plugin was updated to support this. Looks like rspack also uses this feature via swc.

Reproduce link

No response

Reproduce Steps

1. Create a styled component with import { styled } syntax

   import { styled } from 'styled-components';
   
   const Styled = styled.div`
     font-size: 10000px;
   `;
   
   export const Component = () => <Styled />

2. With this additional configuration for rspack:

         rspackExperiments: {
           styledComponents: {
             displayName: true,
             ssr: true,
           },
         },
   

Result: no display name prefixed on <div class="sc-329ontheas"></div>

[nieyuyao]

It seems to be a bug in @swc/plugin-styled-components. swc-project/plugins#224