refactor(turbopack-ecmascript): deprecate enable_emotion, enable_styled*

crates/turbopack-cli/src/dev/web_entry_source.rs

@@ -6,8 +6,11 @@ use turbo_tasks_env::ProcessEnvVc;
 use turbo_tasks_fs::{FileSystem, FileSystemPathVc};
 use turbopack::{
     condition::ContextCondition,
-    ecmascript::EcmascriptModuleAssetVc,
-    module_options::{JsxTransformOptions, ModuleOptionsContext, ModuleOptionsContextVc},
+    ecmascript::{EcmascriptModuleAssetVc, TransformPluginVc},
+    module_options::{
+        CustomEcmascriptTransformPlugins, CustomEcmascriptTransformPluginsVc, JsxTransformOptions,
+        ModuleOptionsContext, ModuleOptionsContextVc,
+    },
     resolve_options_context::{ResolveOptionsContext, ResolveOptionsContextVc},
     transition::TransitionsByNameVc,
     ModuleAssetContextVc,
@@ -33,7 +36,12 @@ use turbopack_dev_server::{
     source::{asset_graph::AssetGraphContentSourceVc, ContentSourceVc},
 };
 use turbopack_ecmascript_plugins::transform::{
-    emotion::EmotionTransformConfigVc, styled_components::StyledComponentsTransformConfigVc,
+    emotion::{EmotionTransformConfig, EmotionTransformConfigVc, EmotionTransformer},
+    styled_components::{
+        StyledComponentsTransformConfig, StyledComponentsTransformConfigVc,
+        StyledComponentsTransformer,
+    },
+    styled_jsx::StyledJsxTransformer,
 };
 use turbopack_node::execution_context::ExecutionContextVc;
 
@@ -116,17 +124,31 @@ async fn get_client_module_options_context(
         .cell(),
     );
 
+    let custom_ecma_transform_plugins = Some(CustomEcmascriptTransformPluginsVc::cell(
+        CustomEcmascriptTransformPlugins {
+            source_transforms: vec![
+                TransformPluginVc::cell(Box::new(
+                    EmotionTransformer::new(&EmotionTransformConfig::default())
+                        .expect("Should be able to create emotion transformer"),
+                )),
+                TransformPluginVc::cell(Box::new(StyledComponentsTransformer::new(
+                    &StyledComponentsTransformConfig::default(),
+                ))),
+                TransformPluginVc::cell(Box::new(StyledJsxTransformer::new())),
+            ],
+            output_transforms: vec![],
+        },
+    ));
+
     let module_options_context = ModuleOptionsContext {
         enable_jsx,
-        enable_emotion: Some(EmotionTransformConfigVc::default()),
-        enable_styled_components: Some(StyledComponentsTransformConfigVc::default()),
-        enable_styled_jsx: true,
         enable_postcss_transform: Some(Default::default()),
         enable_typescript_transform: Some(Default::default()),
         rules: vec![(
             foreign_code_context_condition().await?,
             module_options_context.clone().cell(),
         )],
+        custom_ecma_transform_plugins,
         ..module_options_context
     }
     .cell();

crates/turbopack-ecmascript/Cargo.toml

@@ -26,9 +26,6 @@ rustc-hash = { workspace = true }
 serde = { workspace = true }
 serde_json = { workspace = true }
 serde_qs = { workspace = true }
-styled_components = { workspace = true }
-styled_jsx = { workspace = true }
-swc_emotion = { workspace = true }
 tokio = { workspace = true }
 tracing = { workspace = true }
 turbo-tasks = { workspace = true }

crates/turbopack-ecmascript/src/transform/mod.rs

@@ -1,13 +1,12 @@
-use std::{fmt::Debug, hash::Hash, path::PathBuf, sync::Arc};
+use std::{fmt::Debug, hash::Hash, sync::Arc};
 
 use anyhow::Result;
 use async_trait::async_trait;
 use swc_core::{
     base::SwcComments,
-    common::{chain, util::take::Take, FileName, Mark, SourceMap},
+    common::{chain, util::take::Take, Mark, SourceMap},
     ecma::{
         ast::{Module, ModuleItem, Program, Script},
-        atoms::JsWord,
         preset_env::{self, Targets},
         transforms::{
             base::{feature::FeatureFlag, helpers::inject_helpers, Assumptions},
@@ -16,7 +15,7 @@ use swc_core::{
         visit::{FoldWith, VisitMutWith},
     },
 };
-use turbo_tasks::primitives::{OptionStringVc, StringVc, StringsVc};
+use turbo_tasks::primitives::{OptionStringVc, StringVc};
 use turbo_tasks_fs::FileSystemPathVc;
 use turbopack_core::{
     environment::EnvironmentVc,
@@ -39,16 +38,6 @@ pub enum EcmascriptInputTransform {
         // swc.jsc.transform.react.runtime,
         runtime: OptionStringVc,
     },
-    StyledComponents {
-        display_name: bool,
-        ssr: bool,
-        file_name: bool,
-        top_level_import_paths: StringsVc,
-        meaningless_file_names: StringsVc,
-        css_prop: bool,
-        namespace: OptionStringVc,
-    },
-    StyledJsx,
     // These options are subset of swc_core::ecma::transforms::typescript::Config, but
     // it doesn't derive `Copy` so repeating values in here
     TypeScript {
@@ -139,8 +128,6 @@ impl EcmascriptInputTransform {
             source_map,
             top_level_mark,
             unresolved_mark,
-            file_name_hash,
-            file_path,
             ..
         } = ctx;
         match self {
@@ -240,54 +227,6 @@ impl EcmascriptInputTransform {
                     inject_helpers(unresolved_mark),
                 ));
             }
-            EcmascriptInputTransform::StyledComponents {
-                display_name,
-                ssr,
-                file_name,
-                top_level_import_paths,
-                meaningless_file_names,
-                css_prop,
-                namespace,
-            } => {
-                let mut options = styled_components::Config {
-                    display_name: *display_name,
-                    ssr: *ssr,
-                    file_name: *file_name,
-                    css_prop: *css_prop,
-                    ..Default::default()
-                };
-
-                if let Some(namespace) = &*namespace.await? {
-                    options.namespace = namespace.clone();
-                }
-
-                let top_level_import_paths = &*top_level_import_paths.await?;
-                if !top_level_import_paths.is_empty() {
-                    options.top_level_import_paths = top_level_import_paths
-                        .iter()
-                        .map(|s| JsWord::from(s.clone()))
-                        .collect();
-                }
-                let meaningless_file_names = &*meaningless_file_names.await?;
-                if !meaningless_file_names.is_empty() {
-                    options.meaningless_file_names = meaningless_file_names.clone();
-                }
-
-                program.visit_mut_with(&mut styled_components::styled_components(
-                    FileName::Real(PathBuf::from(file_path.await?.path.clone())),
-                    file_name_hash,
-                    options,
-                ));
-            }
-            EcmascriptInputTransform::StyledJsx => {
-                // Modeled after https://github.com/swc-project/plugins/blob/ae735894cdb7e6cfd776626fe2bc580d3e80fed9/packages/styled-jsx/src/lib.rs
-                let real_program = std::mem::replace(program, Program::Module(Module::dummy()));
-                *program = real_program.fold_with(&mut styled_jsx::visitor::styled_jsx(
-                    source_map.clone(),
-                    // styled_jsx don't really use that in a relevant way
-                    FileName::Anon,
-                ));
-            }
             EcmascriptInputTransform::TypeScript {
                 use_define_for_class_fields,
             } => {

crates/turbopack-tests/tests/snapshot.rs

@@ -45,7 +45,7 @@ use turbopack_core::{
 use turbopack_dev::DevChunkingContextVc;
 use turbopack_ecmascript_plugins::transform::{
     emotion::{EmotionTransformConfig, EmotionTransformer},
-    styled_components::StyledComponentsTransformConfigVc,
+    styled_components::{StyledComponentsTransformConfig, StyledComponentsTransformer},
 };
 use turbopack_env::ProcessEnvAssetVc;
 use turbopack_test_utils::snapshot::{diff, expected, matches_expected, snapshot_issues};
@@ -194,6 +194,23 @@ async fn run_test(resource: &str) -> Result<FileSystemPathVc> {
         )
         .cell();
 
+    let custom_ecma_transform_plugins = Some(CustomEcmascriptTransformPluginsVc::cell(
+        CustomEcmascriptTransformPlugins {
+            source_transforms: vec![
+                TransformPluginVc::cell(Box::new(
+                    EmotionTransformer::new(&EmotionTransformConfig {
+                        sourcemap: Some(false),
+                        ..Default::default()
+                    })
+                    .expect("Should be able to create emotion transformer"),
+                )),
+                TransformPluginVc::cell(Box::new(StyledComponentsTransformer::new(
+                    &StyledComponentsTransformConfig::default(),
+                ))),
+            ],
+            output_transforms: vec![],
+        },
+    ));
     let context: AssetContextVc = ModuleAssetContextVc::new(
         TransitionsByNameVc::cell(HashMap::new()),
         compile_time_info,
@@ -202,13 +219,6 @@ async fn run_test(resource: &str) -> Result<FileSystemPathVc> {
                 development: true,
                 ..Default::default()
             })),
-            enable_emotion: Some(EmotionTransformConfig::cell(EmotionTransformConfig {
-                sourcemap: Some(false),
-                ..Default::default()
-            })),
-            enable_styled_components: Some(StyledComponentsTransformConfigVc::cell(
-                Default::default(),
-            )),
             preset_env_versions: Some(env),
             rules: vec![(
                 ContextCondition::InDirectory("node_modules".to_string()),
@@ -217,18 +227,7 @@ async fn run_test(resource: &str) -> Result<FileSystemPathVc> {
                 }
                 .cell(),
             )],
-            custom_ecma_transform_plugins: Some(CustomEcmascriptTransformPluginsVc::cell(
-                CustomEcmascriptTransformPlugins {
-                    source_transforms: vec![TransformPluginVc::cell(Box::new(
-                        EmotionTransformer::new(&EmotionTransformConfig {
-                            sourcemap: Some(false),
-                            ..Default::default()
-                        })
-                        .unwrap(),
-                    ))],
-                    output_transforms: vec![],
-                },
-            )),
+            custom_ecma_transform_plugins,
             ..Default::default()
         }
         .into(),

crates/turbopack/src/module_options/mod.rs

@@ -62,8 +62,6 @@ impl ModuleOptionsVc {
     ) -> Result<ModuleOptionsVc> {
         let ModuleOptionsContext {
             enable_jsx,
-            enable_styled_jsx,
-            ref enable_styled_components,
             enable_types,
             enable_tree_shaking,
             ref enable_typescript_transform,
@@ -114,26 +112,8 @@ impl ModuleOptionsVc {
 
         // Order of transforms is important. e.g. if the React transform occurs before
         // Styled JSX, there won't be JSX nodes for Styled JSX to transform.
-        if enable_styled_jsx {
-            transforms.push(EcmascriptInputTransform::StyledJsx);
-        }
-
-        if let Some(enable_styled_components) = enable_styled_components {
-            let styled_components_transform = &*enable_styled_components.await?;
-            transforms.push(EcmascriptInputTransform::StyledComponents {
-                display_name: styled_components_transform.display_name,
-                ssr: styled_components_transform.ssr,
-                file_name: styled_components_transform.file_name,
-                top_level_import_paths: StringsVc::cell(
-                    styled_components_transform.top_level_import_paths.clone(),
-                ),
-                meaningless_file_names: StringsVc::cell(
-                    styled_components_transform.meaningless_file_names.clone(),
-                ),
-                css_prop: styled_components_transform.css_prop,
-                namespace: OptionStringVc::cell(styled_components_transform.namespace.clone()),
-            });
-        }
+        // If a custom plugin requires specific order _before_ core transform kicks in,
+        // should use `before_transform_plugins`.
         if let Some(enable_jsx) = enable_jsx {
             let jsx = enable_jsx.await?;
 

crates/turbopack/src/module_options/module_options_context.rs

@@ -150,9 +150,6 @@ impl MdxTransformModuleOptionsVc {
 #[serde(default)]
 pub struct ModuleOptionsContext {
     pub enable_jsx: Option<JsxTransformOptionsVc>,
-    pub enable_emotion: Option<EmotionTransformConfigVc>,
-    pub enable_styled_components: Option<StyledComponentsTransformConfigVc>,
-    pub enable_styled_jsx: bool,
     pub enable_postcss_transform: Option<PostCssTransformOptions>,
     pub enable_webpack_loaders: Option<WebpackLoadersOptions>,
     pub enable_types: bool,