From 178d111fbd3878486af02a7913d1c0c9961cd9ba Mon Sep 17 00:00:00 2001 From: OJ Kwon <1210596+kwonoj@users.noreply.github.com> Date: Mon, 22 May 2023 11:17:41 -0700 Subject: [PATCH] refactor(turbopack-ecmascript): deprecate enable_emotion, enable_styled* (vercel/turbo#4955) ### Description WEB-1048. With https://github.com/vercel/next.js/pull/49621, now we can consolidate most of non-core transforms into ecmaplugins. Postcss / mdx are the only exceptions, but not immediate priority compare to work (which requires to setup some rules instead of just plugins) and filed 1054/1055 for those to deal with later. --- .../turbopack-cli/src/dev/web_entry_source.rs | 34 ++++++++-- crates/turbopack-ecmascript/Cargo.toml | 3 - .../turbopack-ecmascript/src/transform/mod.rs | 67 +------------------ crates/turbopack-tests/tests/snapshot.rs | 39 ++++++----- crates/turbopack/src/module_options/mod.rs | 24 +------ .../module_options/module_options_context.rs | 3 - 6 files changed, 52 insertions(+), 118 deletions(-) diff --git a/crates/turbopack-cli/src/dev/web_entry_source.rs b/crates/turbopack-cli/src/dev/web_entry_source.rs index ba908031d4724..e7f6585758192 100644 --- a/crates/turbopack-cli/src/dev/web_entry_source.rs +++ b/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(); diff --git a/crates/turbopack-ecmascript/Cargo.toml b/crates/turbopack-ecmascript/Cargo.toml index 92ffa42761bed..6a6534c4815cd 100644 --- a/crates/turbopack-ecmascript/Cargo.toml +++ b/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 } diff --git a/crates/turbopack-ecmascript/src/transform/mod.rs b/crates/turbopack-ecmascript/src/transform/mod.rs index 59c1847234ba6..60cee63aeaa5c 100644 --- a/crates/turbopack-ecmascript/src/transform/mod.rs +++ b/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, } => { diff --git a/crates/turbopack-tests/tests/snapshot.rs b/crates/turbopack-tests/tests/snapshot.rs index bd36285bd8102..cff03bf154681 100644 --- a/crates/turbopack-tests/tests/snapshot.rs +++ b/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 { ) .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 { 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 { } .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(), diff --git a/crates/turbopack/src/module_options/mod.rs b/crates/turbopack/src/module_options/mod.rs index 2a7ce35b52885..3a134873c59e0 100644 --- a/crates/turbopack/src/module_options/mod.rs +++ b/crates/turbopack/src/module_options/mod.rs @@ -62,8 +62,6 @@ impl ModuleOptionsVc { ) -> Result { 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?; diff --git a/crates/turbopack/src/module_options/module_options_context.rs b/crates/turbopack/src/module_options/module_options_context.rs index 2abc20a365a56..91e66f74dfbaf 100644 --- a/crates/turbopack/src/module_options/module_options_context.rs +++ b/crates/turbopack/src/module_options/module_options_context.rs @@ -150,9 +150,6 @@ impl MdxTransformModuleOptionsVc { #[serde(default)] pub struct ModuleOptionsContext { pub enable_jsx: Option, - pub enable_emotion: Option, - pub enable_styled_components: Option, - pub enable_styled_jsx: bool, pub enable_postcss_transform: Option, pub enable_webpack_loaders: Option, pub enable_types: bool,