Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider running babel-plugin-styled-components if styled-components are in peerDependencies #1139

Open
stipsan opened this issue Oct 14, 2024 · 0 comments

Comments

@stipsan
Copy link
Member

stipsan commented Oct 14, 2024

Running this plugin if it's not required adds build time. In a lot of cases it's enough to check if styled-components are in devDependencies as well as peerDependencies.

Reasons for why this plugin is good for our libraries, like @sanity/ui are:

https://github.com/styled-components/babel-plugin-styled-components?tab=readme-ov-file#babel-plugin-styled-components

  • consistently hashed component classNames between environments (a must for server-side rendering)
  • various types of minification for styles and the tagged template literals styled-components uses

Most importantly, it performs dead code elimination:
https://styled-components.com/docs/tooling#dead-code-elimination

Without this plugin sc components that aren't used require analysis to be eliminated by pipelines that use vite, terser, webpack, turbopack or what have you.
With #__PURE__ annotations most tooling knows it's safe to remove the component if nothing imported in userland actually uses it.

Due to how much styled-components are used in @sanity/ui and in sanity itself, the benefits here can be substantial. Both in end user perf due to a smaller browser bundle, but also for cold starts in envs such as next dev.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant