Stabilize SWC emotion transform plugin

docs/advanced-features/compiler.md

@@ -187,8 +187,6 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
 }
 ```
 
-## Experimental Features
-
 ### Emotion
 
 We're working to port `@emotion/babel-plugin` to the Next.js Compiler.
@@ -199,7 +197,7 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
 // next.config.js
 
 module.exports = {
-  experimental: {
+  compiler: {
     emotion: boolean | {
       // default is true. It will be disabled when build type is production.
       sourceMap?: boolean,
@@ -219,6 +217,8 @@ module.exports = {
 
 Only `importMap` in `@emotion/babel-plugin` is not supported for now.
 
+## Experimental Features
+
 ### Minification
 
 You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser.

examples/with-emotion-swc/next.config.js

@@ -2,7 +2,7 @@
 
 const nextConfig = {
   reactStrictMode: true,
-  experimental: {
+  compiler: {
     emotion: true,
   },
 }

packages/next/build/swc/options.js

@@ -70,7 +70,7 @@ function getBaseSWCOptions({
         react: {
           importSource:
             jsConfig?.compilerOptions?.jsxImportSource ??
-            (nextConfig?.experimental?.emotion ? '@emotion/react' : 'react'),
+            (nextConfig?.compiler?.emotion ? '@emotion/react' : 'react'),
           runtime: 'automatic',
           pragma: 'React.createElement',
           pragmaFrag: 'React.Fragment',
@@ -117,11 +117,11 @@ function getBaseSWCOptions({
 }
 
 function getEmotionOptions(nextConfig, development) {
-  if (!nextConfig?.experimental?.emotion) {
+  if (!nextConfig?.compiler?.emotion) {
     return null
   }
   let autoLabel = false
-  switch (nextConfig?.experimental?.emotion?.autoLabel) {
+  switch (nextConfig?.compiler?.emotion?.autoLabel) {
     case 'never':
       autoLabel = false
       break

packages/next/build/webpack-config.ts

@@ -1666,7 +1666,7 @@ export default async function getBaseWebpackConfig(
               ],
               ['swcRemoveConsole', !!config.compiler?.removeConsole],
               ['swcImportSource', !!jsConfig?.compilerOptions?.jsxImportSource],
-              ['swcEmotion', !!config.experimental.emotion],
+              ['swcEmotion', !!config.compiler?.emotion],
               SWCBinaryTarget,
             ].filter<[Feature, boolean]>(Boolean as any)
           )
@@ -1796,7 +1796,7 @@ export default async function getBaseWebpackConfig(
     reactRemoveProperties: config.compiler?.reactRemoveProperties,
     styledComponents: config.compiler?.styledComponents,
     relay: config.compiler?.relay,
-    emotion: config.experimental?.emotion,
+    emotion: config.compiler?.emotion,
     modularizeImports: config.experimental?.modularizeImports,
     legacyBrowsers: config.experimental?.legacyBrowsers,
   })

packages/next/server/config-shared.ts

@@ -122,13 +122,6 @@ export interface ExperimentalConfig {
     remotePatterns: RemotePattern[]
   }
   middlewareSourceMaps?: boolean
-  emotion?:
-    | boolean
-    | {
-        sourceMap?: boolean
-        autoLabel?: 'dev-only' | 'always' | 'never'
-        labelFormat?: string
-      }
   modularizeImports?: Record<
     string,
     {
@@ -414,6 +407,13 @@ export interface NextConfig extends Record<string, any> {
           exclude?: string[]
         }
     styledComponents?: boolean
+    emotion?:
+      | boolean
+      | {
+          sourceMap?: boolean
+          autoLabel?: 'dev-only' | 'always' | 'never'
+          labelFormat?: string
+        }
   }
 
   /**

packages/next/server/config.ts

@@ -457,6 +457,14 @@ function assignDefaults(userConfig: { [key: string]: any }) {
     ).styledComponents
   }
 
+  if (result.experimental && 'emotion' in (result.experimental as any)) {
+    Log.warn(
+      `\`emotion\` has been moved out of \`experimental\` and into \`compiler\`. Please update your ${configFileName} file accordingly.`
+    )
+    result.compiler = result.compiler || {}
+    result.compiler.emotion = (result.experimental as any).emotion
+  }
+
   if (
     result.experimental &&
     'reactRemoveProperties' in (result.experimental as any)

test/development/basic/emotion-swc/next.config.js

@@ -2,7 +2,7 @@
 
 const nextConfig = {
   reactStrictMode: true,
-  experimental: {
+  compiler: {
     emotion: true,
   },
 }