Port @emotion/babel-plugin to SWC

[timneutkens]

This plugin is being used by a good chunk of users. #30802 has even more users though so it's best to start with that one.

[sanderkooger]

Ahhh we are just switching from styled components to @emotion as its recommended by @mui. Hope to see this work soon!

[opolo]

@sanderkooger Same we just did the same! We tried using styled components with MUI5 initially, but that was a mess. MUI5 had pretty bad support/documentation for swapping their styling engine from Emotion to Styled Components, so we ended up having quite some issues... With emotion it worked out of the box. Expect many Next users using MUI5 to swap soon :)

[andrei9669]

@opolo same, after migrating to MUI5, swapping styled-components to emotion was really painless as lots of things worked quite similarly. altho shouldForwardProp is an annoying thing.

[RangerCoder99]

Any process or status on this?

[MonstraG]

Mui folks just stopped trying to make styled-components work with SSR, my team patiently waits for SWC to support @emotion for now

[RangerCoder99]

Mui folks just stopped trying to make styled-components work with SSR, my team patiently waits for SWC to support @emotion for now

Things like that make me, dislike the Mui team. But same hopefully SWC will work with @emotion soon!

[opolo]

Mui folks just stopped trying to make styled-components work with SSR, my team patiently waits for SWC to support @emotion for now

Things like that make me, dislike the Mui team. But same hopefully SWC will work with @emotion soon!

Yup same. Upgrading 15+ packages to new major versions (including NextJS to 12) took a couple of hours. We spent 3-4 days trying to upgrade to MUI5 from 4 with our styled-component implementation (and their own example didnt work, they have since removed it .__.)... It was a kick in the face for our senior-developer, when he after those days removed styled-components in favor of Emotion, not knowing the knew consequences it brought (fortunately none so far, it seems... Except slower upgrade to using SWC now :D )

[osdiab]

FYI if your project is flexible to it and you're fine missing out on the extra optimizations of the babel plugin, I haven't had any problems at my company using the emotion ESLint plugin to just auto-add the JSX pragma at the top of any file that needs it, and not relying on the babel plugin at all. would be nice to have this but that option isn't the end of the world.

[CloutProject]

@sanderkooger

we are just switching from styled components to @emotion as its recommended by @mui. Hope to see this work soon!

Considering SWC is disabled when a project has a babel config and most people use babel-plugin-import to minimize bundle size with MUI, as well as @emotion/babel-plugin to use component selectors, I'm wondering how can we make a MUI v5 project work with SWC?

[dominiczaq]

is there any roadmap for supporting @emotion/babel-plugin? Is there any work that community can help with to push this forward?

[timneutkens]

I've posted an update on the feedback thread recently: #30174 (comment)

If someone wants to work on it before Heyang gets around to work on it I'd be happy to land a PR for the transform if it matches the babel plugin, you can have a look at the styled-components transform in packages/next-swc to get started.

[williamtetlow]

@RangerCoder99 do you have a link to resource where next team say they won't be doing this?

[corysimmons]

@williamtetlow Spoiler: he doesn't. He's upset at the recent release of 12.1 where they picked to support the more popular styled-components first. I highly suspect they're working on Emotion and will land it within the next release or two.

In fact, Tim said:

One of our part-time (10%) team members is working on expanding the styled-components transform to support the css property and once that is done will continue with the Emotion transform.

I'm glad they don't hold up releases until they support everything.

[CloutProject]

@RangerCoder99

Look like Emotion support was passed over by the team, look like we may need to wait a long time until we can use Material UI with SWC

Even if the team did add emotion support for SWC, Material UI would still not be usable with SWC.

A properly configured MUI project will use babel-plugin-import to minimize bundle size with MUI, as well as @emotion/babel-plugin to use component selectors.

In short, MUI needs babel to be properly configured and SWC is disabled when a project has a babel config.

[markhughes]

@CloutProject the documentation reads:

⚠️ The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler that doesn't support tree-shaking.

MUI does not require babel in SWC, or any modern project that has tree-shaking.

[CloutProject]

@markhughes Oh, I see, thanks for correcting me!

[markhughes]

@CloutProject its a common misunderstanding :)

[dominiczaq]

hey, could you elaborate on why swc emotion transform plugin is in next.js package, not directly in swc? is it backmerged later on, or there is different workflow here? Thank you!

[macko911]

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?

[Brooooooklyn]

@macko911 this feature hasn't been released to the stable channel, so you need to change https://github.com/macko911/next-swc-emotion-component-selector/blob/main/package.json#L11 to canary

[macko911]

@Brooooooklyn Sorry, I was trying it with the canary version locally but didn't use it in the reproduction repo. I found out that I have to use an "extended" styled component as a selector for it to break.

export const Basic = styled.div`
  ${basicStyles};
`

export const BasicExtended = styled(Basic)``

export const ComponentSelectorsExtended = styled.div`
  ${BasicExtended} {
    color: green;
  }
`

With this code I get the error even on the latest canary release. I've updated the repo.

[tills13]

Just to clarify @macko911's example, standard styled components as selectors are fine e.g.

const StyledComponent = styled.div` /* styles */ `
const Wrapper = styled.div`
  ${StyledComponent} {
    ...
  }
`

but extending or wrapping an existing component with styled does not

const StyledComponent = styled.div` /* styles */ `
const ExtendedStyledComponent = styled(StyledComponent)`...` // or
const WrappedOtherComponent = styled(OtherComponent)`...`

const Wrapper = styled.div`
  /* neither work individually */
  ${ExtendedStyledComponent},
  ${WrappedOtherComponent} {
    ...
  }
`

Again, thanks for putting this together. I'm excited to use it in my projects.

[spencermehta]

Perhaps I'm being stupid @macko911 @tills13, how do I use standard styled components? Trying styled.div gives me the error Property 'div' does not exist on type 'CreateMUIStyled<Theme>'.

[MonstraG]

Perhaps I'm being stupid @macko911 @tills13, how do I use standard styled components? Trying styled.div gives me the error Property 'div' does not exist on type 'CreateMUIStyled<Theme>'.

Mui doesn't support that yet, use styled("div") instead.

[spencermehta]

Perhaps I'm being stupid @macko911 @tills13, how do I use standard styled components? Trying styled.div gives me the error Property 'div' does not exist on type 'CreateMUIStyled<Theme>'.

Mui doesn't support that yet, use styled("div") instead.

Unfortunately that then reintroduces the Error: Component selectors can only be used in conjunction with @emotion/babel-plugin. error

[karlhorky]

Looks like v12.1.1-canary.18 includes the fix for the component selector problem (fixed in #35527)

[bart-krakowski]

Is this usable with Jest? I see the following error when I try to use it:
Component selectors can only be used in conjunction with @emotion/babel-plugin.

[markcnunes]

Is this usable with Jest? I see the following error when I try to use it: Component selectors can only be used in conjunction with @emotion/babel-plugin.

I am getting the same error. There is an issue related to it. #35661

[tettoffensive]

@timneutkens I tried turning on the experimental feature for emotion but am now experiencing issues related to twin.macro (which many people use for tailwind css with emotion/styled-components):

ben-rogerson/twin.macro#664

error - ./node_modules/import-fresh/node_modules/resolve-from/index.js:3:0
Module not found: Can't resolve 'module'

[vjpr]

@tettoffensive twin.macro relies on babel-plugin-macros which needs to be ported to swc, and then twin.macro needs to be ported to swc too.

twin.macro should probably be rewritten directly as an swc plugin.

[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.