Alternative to Babel for NextJS 11.1 SWC toolchain

[osdiab]

The problem

I currently rely on the emotion babel config to add CSS prop support to my app. However, NextJS just released Next 11.1, where they use SWC instead of Babel to transpile JS. This is opt-in on their end, so I can just keep using Babel and not have a problem, but I would like to use that faster toolchain and still reap the syntactic niceness of the Emotion CSS prop without adding the JSX pragma everywhere.

Proposed solution

Some alternative that works with SWC for supporting the CSS prop; maybe a webpack plugin, since that should still be usable?

Alternative solutions

Just using the JSX pragma, sigh.

[DavidVaness]

any news on this?

[Andarist]

I’ve talked to Next maintainers and they plan to port our Babel plugin to Rust and their SWC-based plugin system. So we have to be patient and wait till they manage to do that. You must understand that this is still very early stage for them in this aspect and the plugin system is not publicly available.

[DavidVaness]

Thank you so much. Would love to see this implemented

[refactorized]

It wasn't clear to me that their plugin system was still closed - that's an important detail.

[tony]

Issue for Next's swc support for emotion: vercel/next.js#30804

[EqualMa]

I have a question that might be stupid. Why do we need a plugin for emotion?
I just add "jsxImportSource": "@emotion/react" to compilerOptions in tsconfig.json and it works. It seems this would also work for jsconfig.json in non-typescript projects. Am I missing something?

[srmagura]

@EqualMa Not a stupid question and thanks for bringing this up.

The Next documentation states that "jsxImportSource" works in both tsconfig.json and jsconfig.json. I can personally confirm that it works with tsconfig.json.

When using the modern JSX transform (the default in recent versions of Next), setting jsxImportSource is all that's needed for the css prop to work. This is enough for the vast majority of users.

@emotion/babel-plugin has some extra goodies like the ability to use components as selectors. If you need any of these features, you can still use a custom .babelrc with Next. The only downside is compilation will be slower, though there may not be much difference if type checking is the bottleneck.

So it would be cool to have an Emotion swc plugin with the same functionality as @emotion/babel-plugin, but that shouldn't be something that anybody truly needs.

@Andarist Seems like this issue can be closed. Do you agree?

[rolivegab]

Just for information, by having this as my root .swcrc

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "refresh": true,
        "importSource": "@emotion/react"
      }
    }
  }
}

and also this as my root tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "jsxImportSource": "@emotion/react",
    "downlevelIteration": true,
    "incremental": true,
    "baseUrl": "src"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "next.config.js"
  ],
  "exclude": [
    "node_modules"
  ]
}

I'm able to use emotion css prop with swc and without any JSX pragma

[Andarist]

So it would be cool to have an Emotion swc plugin with the same functionality as @emotion/babel-plugin, but that shouldn't be something that anybody truly needs.

The plugin also provides some other goodies like auto labels, source maps, and some very minor optimizations (those are on the verge of micro-optimizations though so I wouldn't really call this a strong argument).

Emotion plugin has been merged to Next 20 days ago~: vercel/next.js#34687 . You can try looking there into how you can actually use it today (I think it's possible using their canary releases). As long as that plugin is written and maintained by the Next team - you should report issues/bugs/etc there and not here.

[tianhuil]

It looks like emotion is working as an experimental feature. You have to next.config.js to

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    emotion: true,
  },
}

module.exports = nextConfig

and adding jsxImportSource to tsconfig.json to

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react"
  },
}

I can confirm this works with next@12.1.4. See this merged PR

[mcrowder65]

@tianhuil but looks like we may need to wait until nextjs team ports this plugin to @swc/core?

[fforres]

@tianhuil @mcrowder65 is that something actually planned for their plugin?

Been trying to use it outside of a next-js implementation but doesn't seem straightforward.

Toying around with the crate they published here: https://crates.io/crates/swc_emotion but it seems that their's is a whole fork of swc that we need to run instead.

Are they keen on allowing for a non-nextjs-specific access to the plugin? Might not be a priority as it might drive folks away from using next.js?

cc @Andarist in case you know about this also.

[fforres]

(Looks like their next-swc crate is not officially public ATM https://github.com/vercel/next.js/blob/canary/packages/next-swc/crates/core/Cargo.toml#L2-L5)

[Andarist]

Are they keen on allowing for a non-nextjs-specific access to the plugin? Might not be a priority as it might drive folks away from using next.js?

I assume that the goal is to make this usable outside of Next but I might be mistaken.

[IvanRodriCalleja]

@fforres I created a emotion plugin with a next-swc that you can use outside next

https://www.npmjs.com/package/emotion-swc-plugin

[fforres]

@IvanRodriCalleja yes! This is awesome, i was clearing my afternoon to take a stab at this 🙏

[fforres]

@IvanRodriCalleja do you have a repository where you are doing that work? 🙏

[IvanRodriCalleja]

@fforres I added an example: https://github.com/IvanRodriCalleja/emotion-swc-plugin/tree/main/exampes/with-node
This is with node but the config is the same for a .swcrc

[gerisztein]

I was playing around with it but I was having troubles with Jest.
The solution below worked just fine for me. No babel for building, just for tests for now.

• Add @emotion/babel-preset-css-prop to devDependencies
• Add this to next.config.js

  experimental: {
    emotion: true,
  },

• and this inside the jest.config.js

  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': [
      'babel-jest',
      {
        presets: ['next/babel', '@emotion/babel-preset-css-prop'],
      },
    ],
  }

[IvanRodriCalleja]

I don't think you need to configure transform option because you are already enabling emotion in the next config that you are linking to next/jest. With this approach you are using babel for transpilation and no SWC