search

styled-components / babel-plugin-styled-components

Improve the debugging experience and add server-side rendering support to styled-components
MIT License
1.07k stars 139 forks source link

Support pre-transpiled code (#379) #380

Closed rbong closed 1 year ago

rbong commented 2 years ago

This adds support for identifying styled components imports using _interopRequiredDefault and calls to styled components that use sequence expressions (ex. (0, _styled)('div')()).

This should improve support for MUI + Next with SSR.

In isStyled, I added equivalent checks for sequence expressions wherever they could be used instead of member expressions. However, there's one case that I'm not sure will ever apply:

(importLocalName('default', state) &&
  t.isCallExpression(tag) &&
  t.isMemberExpression(tag.callee) &&
  tag.object.property.name === 'default' &&
  tag.object.object.name === importLocalName('default', state))

Please let me know if this needs an equivalent sequence expression check.

I thought maybe this PR might add some new errors on re-transpilation, but I ran tests using outputs as inputs and didn't see any new problems.

eckmLJE commented 2 years ago

Re-posting this from the issue.

We have run into this issue using module federation and our in-house component library. babel-plugin-styled-components successfully namespaces styled components written within each app, preventing class name collision when multiple apps are loaded on the same page with module federation. However, each app also imports from our component library which is already transpiled, and these component class names are not namespaced, leading to class name collision bugs.

We've tested this PR in our dev environment and it fixes our issue.