From 051cc1d60a961c9c044c661ef518e368218f34ed Mon Sep 17 00:00:00 2001 From: LongYinan Date: Fri, 20 May 2022 17:49:03 +0800 Subject: [PATCH] Stabilize SWC emotion transform plugin --- docs/advanced-features/compiler.md | 6 +++--- examples/with-emotion-swc/next.config.js | 2 +- packages/next/build/swc/options.js | 6 +++--- packages/next/build/webpack-config.ts | 4 ++-- packages/next/server/config-shared.ts | 14 +++++++------- packages/next/server/config.ts | 8 ++++++++ test/development/basic/emotion-swc/next.config.js | 2 +- 7 files changed, 25 insertions(+), 17 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 35acc704d1bad..fbf7a34bc170d 100644 --- a/docs/advanced-features/compiler.md +++ b/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. diff --git a/examples/with-emotion-swc/next.config.js b/examples/with-emotion-swc/next.config.js index 0928286e81ee7..427b30c5aaa99 100644 --- a/examples/with-emotion-swc/next.config.js +++ b/examples/with-emotion-swc/next.config.js @@ -2,7 +2,7 @@ const nextConfig = { reactStrictMode: true, - experimental: { + compiler: { emotion: true, }, } diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js index 9547bfc0a4de2..ed7d1a6c07588 100644 --- a/packages/next/build/swc/options.js +++ b/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 diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index a6e9c45c9b3c2..bb73efb05c804 100644 --- a/packages/next/build/webpack-config.ts +++ b/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, }) diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index ca01d6194fb26..5c356436419d9 100644 --- a/packages/next/server/config-shared.ts +++ b/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 { exclude?: string[] } styledComponents?: boolean + emotion?: + | boolean + | { + sourceMap?: boolean + autoLabel?: 'dev-only' | 'always' | 'never' + labelFormat?: string + } } /** diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts index 40b74df35c103..9f16fc19d8204 100644 --- a/packages/next/server/config.ts +++ b/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) diff --git a/test/development/basic/emotion-swc/next.config.js b/test/development/basic/emotion-swc/next.config.js index 0928286e81ee7..427b30c5aaa99 100644 --- a/test/development/basic/emotion-swc/next.config.js +++ b/test/development/basic/emotion-swc/next.config.js @@ -2,7 +2,7 @@ const nextConfig = { reactStrictMode: true, - experimental: { + compiler: { emotion: true, }, }