Port babel-plugin-styled-components to SWC

This Babel plugin is the most used customization of .babelrc.

The plugin is split up in multiple separate transforms:

https://github.com/styled-components/babel-plugin-styled-components/blob/a26774e599c82c72e8793989f60310d29c181fac/src/index.js

The defaults are here: https://github.com/styled-components/babel-plugin-styled-components/blob/950692b92855f17609e4281d5081e3d2acbf4b6b/src/utils/options.js

The critical one which makes styled-components not have hydration issues with Next.js is displayNameAndId. All the other ones seem to be optimizations. Because of this I’d start by porting the displayNameAndId transform and then check what else can be ported.

Looking at the defaults the only transform that is disabled by default is the pure annotations one.

List of transforms:

• ssr – enabled when styledComponents: true
• displayName – enabled when styledComponents: true, disabled in production to reduce file size
• css prop
• fileName
• minify
• transpileTemplateLiterals
• pure
• namespace

[kritika-agrawal-dunzo]

@timneutkens when are you planning to release support for css prop?

[timneutkens]

swc-project/swc#2506

Unclear if this is relevant, but it looks like SWC fixed the compiler to not break with styled-components. Still probably not enough to close this issue for customization/optionality, but maybe if updated, swc can compile SC at a base level now?

The linked issue is unrelated as that one is about the minifier. This issue is about implementing the transforms that are critical for running styled-components correctly when doing SSR.