Skip to content

Enable SWC Emotion importMap #41646

@Zn4rK

Description

@Zn4rK

Describe the feature you'd like to request

I recently tried to move from babel to SWC in one of my project, but noticed that I couldn't due to the fact that the SWC plugin for emotion does not have importMap support. In the current setup I have, emotion is re-exported and then used under the new export across the project.

importMap makes that possible:
https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin#importmap

Describe the solution you'd like

It looks like importMap support is already in the emotion plugin:

https://github.com/vercel/next.js/blob/canary/packages/next-swc/crates/emotion/src/import_map.rs
https://github.com/vercel/next.js/blob/canary/packages/next-swc/crates/emotion/tests/testImportMap.json

(Edit: These moved to here and here after #41613 was merged. Probably should've used a permalink, but w/e).

But the options are gated in the config:

function getEmotionOptions(nextConfig, development) {

Is this an oversight or is there a specific reason for the importMap not being accepted as options to the emotion compiler settings?

Describe alternatives you've considered

  • Continue using babel.
  • Using a patch to manually edit node_modules/next/dist/build/swc/options.js and set the importMap (which seems to work).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions