From cb8fdc6db6280b847e752d884afbd99dd1290b40 Mon Sep 17 00:00:00 2001
From: Oskar Grunning <oskargrunning@gmail.com>
Date: Thu, 10 Nov 2022 22:23:40 +0100
Subject: [PATCH] fix: enable emotion import map (#42750)

This PR aims to add support for the `importMap` option for `emotion`. It's already supported by `swc_emotion`.

Fixes https://github.com/vercel/next.js/issues/41646.

## Feature

- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`
---
 docs/advanced-features/compiler.md    | 14 ++++++++++++--
 packages/next/build/swc/options.js    |  1 +
 packages/next/server/config-schema.ts |  3 +++
 packages/next/server/config-shared.ts |  8 ++++++++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md
index 09b5f208116c000..9a7cbd75a5690e1 100644
--- a/docs/advanced-features/compiler.md
+++ b/docs/advanced-features/compiler.md
@@ -233,13 +233,23 @@ module.exports = {
       // The format is defined via string where variable parts are enclosed in square brackets [].
       // For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
       labelFormat?: string,
+      // default is undefined.
+      // This option allows you to tell the compiler what imports it should
+      // look at to determine what it should transform so if you re-export
+      // Emotion's exports, you can still use transforms.
+      importMap?: {
+        [packageName: string]: {
+          [exportName: string]: {
+            canonicalImport?: [string, string],
+            styledBaseImport?: [string, string],
+          }
+        }
+      },
     },
   },
 }
 ```
 
-Only `importMap` in `@emotion/babel-plugin` is not supported for now.
-
 ### Minification
 
 Next.js' swc compiler is used for minification by default since v13. This is 7x faster than Terser.
diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
index 673d4a0dd279c5b..d6037779f735320 100644
--- a/packages/next/build/swc/options.js
+++ b/packages/next/build/swc/options.js
@@ -165,6 +165,7 @@ function getEmotionOptions(nextConfig, development) {
   return {
     enabled: true,
     autoLabel,
+    importMap: nextConfig?.compiler?.emotion?.importMap,
     labelFormat: nextConfig?.compiler?.emotion?.labelFormat,
     sourcemap: development
       ? nextConfig?.compiler?.emotion?.sourceMap ?? true
diff --git a/packages/next/server/config-schema.ts b/packages/next/server/config-schema.ts
index 1d0c41d5350742f..ed2f9d9e82ed3df 100644
--- a/packages/next/server/config-schema.ts
+++ b/packages/next/server/config-schema.ts
@@ -52,6 +52,9 @@ const configSchema = {
                   type: 'string',
                   minLength: 1,
                 },
+                importMap: {
+                  type: 'object',
+                },
               },
             },
           ] as any,
diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts
index 2f60960f5f12f0b..f9b99a800ab8aad 100644
--- a/packages/next/server/config-shared.ts
+++ b/packages/next/server/config-shared.ts
@@ -491,6 +491,14 @@ export interface NextConfig extends Record<string, any> {
           sourceMap?: boolean
           autoLabel?: 'dev-only' | 'always' | 'never'
           labelFormat?: string
+          importMap?: {
+            [importName: string]: {
+              [exportName: string]: {
+                canonicalImport?: [string, string]
+                styledBaseImport?: [string, string]
+              }
+            }
+          }
         }
   }