Port @emotion/babel-plugin to SWC

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.

@emotion

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

@sanderkooger

@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 :)

@opolo

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

Any process or status on this?

@emotion

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

@emotion

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!

@emotion

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 )

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.

@sanderkooger

@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?

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

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.

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!

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?

@macko911

@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

@Brooooooklyn

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

@macko911

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.

@macko911

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

@macko911

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.

@macko911

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

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

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.

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

@timneutkens

@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'

@tettoffensive

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

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.

Navigation Menu

Repository navigation

Port @emotion/babel-plugin to SWC #30804

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Port @emotion/babel-plugin to SWC #30804

Description

Activity

sanderkooger commented on Nov 16, 2021

opolo commented on Nov 19, 2021

andrei9669 commented on Nov 21, 2021

RangerCoder99 commented on Nov 29, 2021

MonstraG commented on Dec 3, 2021

RangerCoder99 commented on Dec 3, 2021

opolo commented on Dec 3, 2021

fillon commented on Dec 18, 2021

osdiab commented on Dec 27, 2021

KLaci commented on Dec 29, 2021

CloutProject commented on Jan 2, 2022

dominiczaq commented on Jan 20, 2022

timneutkens commented on Jan 20, 2022

9 remaining items

dominiczaq commented on Mar 15, 2022

macko911 commented on Mar 17, 2022

Brooooooklyn commented on Mar 17, 2022

macko911 commented on Mar 21, 2022

tills13 commented on Mar 21, 2022

spencermehta commented on Mar 22, 2022

MonstraG commented on Mar 22, 2022

spencermehta commented on Mar 22, 2022

karlhorky commented on Mar 25, 2022

bart-krakowski commented on Mar 27, 2022

markcnunes commented on Apr 4, 2022

tettoffensive commented on Apr 16, 2022

vjpr commented on Apr 21, 2022

github-actions commented on May 22, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions