feat(pack): support emotion react transform (#2682)

Co-authored-by: xusd320 <xusd320@gmail.com>

Author: fireairforce

crates/pack-core/Cargo.toml

@@ -71,7 +71,7 @@ turbopack-ecmascript-plugins = { workspace = true, default-features = false }
 
 [target.'cfg(not(all(target_family = "wasm", target_os = "unknown")))'.dependencies]
 turbo-tasks-fetch            = { workspace = true }
-turbopack-ecmascript-plugins = { workspace = true, default-features = true }
+turbopack-ecmascript-plugins = { workspace = true, default-features = true, features = ["transform_emotion"] }
 
 [features]
 default          = ["process_pool"]

crates/pack-core/src/client/context.rs

@@ -47,7 +47,7 @@ use crate::{
         transforms::{
             css_modules::get_auto_css_modules_rule,
             default_export_namer::get_default_export_namer_rule,
-            remove_console::get_remove_console_transform_rule,
+            emotion::get_emotion_transform_rule, remove_console::get_remove_console_transform_rule,
             styled_components::get_styled_components_transform_rule,
             styled_jsx::get_styled_jsx_transform_rule,
             swc_ecma_transform_plugins::get_swc_ecma_transform_plugin_rule,
@@ -244,6 +244,7 @@ pub async fn get_client_module_options_context(
 
     let additional_rules: Vec<ModuleRule> = vec![
         get_swc_ecma_transform_plugin_rule(config, project_path.clone()).await?,
+        get_emotion_transform_rule(config).await?,
         get_styled_components_transform_rule(config).await?,
         get_styled_jsx_transform_rule(config, target_browsers).await?,
         get_remove_console_transform_rule(config).await?,

crates/pack-core/src/config.rs

@@ -271,6 +271,7 @@ pub struct ReactConfig {
 #[serde(rename_all = "camelCase")]
 pub struct StyleConfig {
     pub styled_components: Option<StyledComponentsTransformOptionsOrBoolean>,
+    pub emotion: Option<bool>,
     #[bincode(with = "turbo_bincode::serde_self_describing")]
     sass: Option<serde_json::Value>,
     #[bincode(with = "turbo_bincode::serde_self_describing")]

crates/pack-core/src/shared/transforms/emotion.rs

@@ -0,0 +1,26 @@
+use anyhow::Result;
+use turbo_tasks::Vc;
+use turbopack::module_options::ModuleRule;
+use turbopack_ecmascript_plugins::transform::emotion::{
+    EmotionTransformConfig, EmotionTransformer,
+};
+
+use crate::{
+    config::Config,
+    shared::transforms::{EcmascriptTransformStage, get_ecma_transform_rule},
+};
+
+pub async fn get_emotion_transform_rule(config: Vc<Config>) -> Result<Option<ModuleRule>> {
+    let styles = config.styles().await?;
+    let enabled = styles.emotion.unwrap_or(false);
+
+    if !enabled {
+        return Ok(None);
+    }
+
+    Ok(
+        EmotionTransformer::new(&EmotionTransformConfig::default()).map(|transformer| {
+            get_ecma_transform_rule(Box::new(transformer), false, EcmascriptTransformStage::Main)
+        }),
+    )
+}

crates/pack-core/src/shared/transforms/mod.rs

@@ -11,6 +11,7 @@ use wasm::StaticWasmModuleType;
 pub mod classic_jsx_react_import;
 pub mod css_modules;
 pub mod default_export_namer;
+pub mod emotion;
 pub mod image;
 pub mod modularize_imports;
 pub mod remove_console;

crates/pack-core/src/transform_options.rs

@@ -140,10 +140,19 @@ pub async fn get_jsx_transform_options(
     enable_react_refresh: bool,
 ) -> Result<Vc<JsxTransformOptions>> {
     let react_config = config.react().await?;
+    let emotion_enabled = config.styles().await?.emotion.unwrap_or(false);
+
+    let import_source = react_config.import_source.clone().or_else(|| {
+        if emotion_enabled {
+            Some("@emotion/react".into())
+        } else {
+            Some("react".into())
+        }
+    });
 
     let react_transform_options = JsxTransformOptions {
         development: mode.await?.is_react_development(),
-        import_source: react_config.import_source.clone().or(Some("react".into())),
+        import_source,
         runtime: react_config
             .runtime
             .as_ref()

crates/pack-schema/src/lib.rs

@@ -734,6 +734,11 @@ pub struct SchemaStyleConfig {
     #[schemars(description = "Styled components configuration")]
     pub styled_components: Option<serde_json::Value>,
 
+    /// Enable @emotion/react transform support
+    #[serde(skip_serializing_if = "Option::is_none")]
+    #[schemars(description = "Enable @emotion/react transform support")]
+    pub emotion: Option<bool>,
+
     /// Sass configuration
     #[serde(skip_serializing_if = "Option::is_none")]
     #[schemars(description = "Sass configuration")]