Turbopack: Remove fragile heuristics for detecting manually-configured sass or babel loaders, configure rules as a vec and not a map

Author: bgw

crates/next-core/src/next_config.rs

@@ -14,7 +14,7 @@ use turbo_tasks_env::{EnvMap, ProcessEnv};
 use turbo_tasks_fetch::FetchClient;
 use turbo_tasks_fs::FileSystemPath;
 use turbopack::module_options::{
-    ConditionItem, ConditionPath, LoaderRuleItem, OptionWebpackRules,
+    ConditionItem, ConditionPath, LoaderRuleItem, WebpackRules,
     module_options_context::{MdxTransformOptions, OptionWebpackConditions},
 };
 use turbopack_core::{
@@ -868,6 +868,13 @@ pub struct ExperimentalConfig {
     turbopack_tree_shaking: Option<bool>,
     turbopack_scope_hoisting: Option<bool>,
     turbopack_use_system_tls_certs: Option<bool>,
+    /// Disable automatic configuration of the sass loader.
+    #[serde(default)]
+    turbopack_force_disable_sass: bool,
+    /// Disable automatic configuration of the babel loader when a babel configuration file is
+    /// present.
+    #[serde(default)]
+    turbopack_force_disable_babel: bool,
     // Whether to enable the global-not-found convention
     global_not_found: Option<bool>,
     /// Defaults to false in development mode, true in production mode.
@@ -1380,14 +1387,14 @@ impl NextConfig {
         &self,
         active_conditions: BTreeSet<WebpackLoaderBuiltinCondition>,
         project_path: FileSystemPath,
-    ) -> Result<Vc<OptionWebpackRules>> {
+    ) -> Result<Vc<WebpackRules>> {
         let Some(turbo_rules) = self.turbopack.as_ref().and_then(|t| t.rules.as_ref()) else {
-            return Ok(Vc::cell(None));
+            return Ok(Vc::cell(Vec::new()));
         };
         if turbo_rules.is_empty() {
-            return Ok(Vc::cell(None));
+            return Ok(Vc::cell(Vec::new()));
         }
-        let mut rules = FxIndexMap::default();
+        let mut rules = Vec::new();
         for (glob, rule) in turbo_rules.iter() {
             fn transform_loaders(loaders: &[LoaderItem]) -> ResolvedVc<WebpackLoaderItems> {
                 ResolvedVc::cell(
@@ -1443,14 +1450,14 @@ impl NextConfig {
             let config_file_path = || project_path.join(&self.config_file_name);
             match rule {
                 RuleConfigItemOrShortcut::Loaders(loaders) => {
-                    rules.insert(
+                    rules.push((
                         glob.clone(),
                         LoaderRuleItem {
                             loaders: transform_loaders(loaders),
                             rename_as: None,
                             condition: None,
                         },
-                    );
+                    ));
                 }
                 RuleConfigItemOrShortcut::Advanced(rule) => {
                     if let FindRuleResult::Found(RuleConfigItemOptions {
@@ -1492,19 +1499,19 @@ impl NextConfig {
                             None
                         };
 
-                        rules.insert(
+                        rules.push((
                             glob.clone(),
                             LoaderRuleItem {
                                 loaders: transform_loaders(loaders),
                                 rename_as: rename_as.clone(),
                                 condition,
                             },
-                        );
+                        ));
                     }
                 }
             }
         }
-        Ok(Vc::cell(Some(ResolvedVc::cell(rules))))
+        Ok(Vc::cell(rules))
     }
 
     #[turbo_tasks::function]
@@ -1641,6 +1648,16 @@ impl NextConfig {
         })
     }
 
+    #[turbo_tasks::function]
+    pub fn experimental_turbopack_force_disable_babel(&self) -> Vc<bool> {
+        Vc::cell(self.experimental.turbopack_force_disable_babel)
+    }
+
+    #[turbo_tasks::function]
+    pub fn experimental_turbopack_force_disable_sass(&self) -> Vc<bool> {
+        Vc::cell(self.experimental.turbopack_force_disable_sass)
+    }
+
     #[turbo_tasks::function]
     pub fn react_compiler(&self) -> Vc<OptionalReactCompilerOptions> {
         let options = &self.experimental.react_compiler;

crates/next-core/src/next_shared/webpack_rules/babel.rs

@@ -2,14 +2,16 @@ use anyhow::Result;
 use turbo_rcstr::rcstr;
 use turbo_tasks::{ResolvedVc, Vc};
 use turbo_tasks_fs::{self, FileSystemEntryType, FileSystemPath};
-use turbopack::module_options::{LoaderRuleItem, OptionWebpackRules, WebpackRules};
+use turbopack::module_options::{LoaderRuleItem, WebpackRules};
 use turbopack_core::{
     issue::{Issue, IssueExt, IssueSeverity, IssueStage, OptionStyledString, StyledString},
     reference_type::{CommonJsReferenceSubType, ReferenceType},
     resolve::{node::node_cjs_resolve_options, parse::Request, pattern::Pattern, resolve},
 };
 use turbopack_node::transforms::webpack::WebpackLoaderItem;
 
+// https://babeljs.io/docs/config-files
+// TODO: Also support a `babel` key in a package.json file
 const BABEL_CONFIG_FILES: &[&str] = &[
     ".babelrc",
     ".babelrc.json",
@@ -22,94 +24,59 @@ const BABEL_CONFIG_FILES: &[&str] = &[
     "babel.config.cjs",
 ];
 
-/// If the user has a babel configuration file (see list above) alongside their
-/// `next.config.js` configuration, automatically add `babel-loader` as a
-/// webpack loader for each eligible file type if it doesn't already exist.
+/// If the user has a babel configuration file (see list above) alongside their `next.config.js`
+/// configuration, automatically add `babel-loader` as a webpack loader for each eligible file type
+/// if it doesn't already exist.
 #[turbo_tasks::function]
 pub async fn maybe_add_babel_loader(
     project_root: FileSystemPath,
-    webpack_rules: Option<ResolvedVc<WebpackRules>>,
-) -> Result<Vc<OptionWebpackRules>> {
-    let has_babel_config = {
-        let mut has_babel_config = false;
-        for &filename in BABEL_CONFIG_FILES {
-            let filetype = *project_root.join(filename)?.get_type().await?;
-            if matches!(filetype, FileSystemEntryType::File) {
-                has_babel_config = true;
-                break;
-            }
+    webpack_rules: Vc<WebpackRules>,
+) -> Result<Vc<WebpackRules>> {
+    let mut has_babel_config = false;
+    for &filename in BABEL_CONFIG_FILES {
+        let filetype = *project_root.join(filename)?.get_type().await?;
+        if matches!(filetype, FileSystemEntryType::File) {
+            has_babel_config = true;
+            break;
         }
-        has_babel_config
-    };
-
-    if has_babel_config {
-        let mut rules = if let Some(webpack_rules) = webpack_rules {
-            webpack_rules.owned().await?
-        } else {
-            Default::default()
-        };
-        let mut has_emitted_babel_resolve_issue = false;
-        let mut has_changed = false;
-        for pattern in ["*.js", "*.jsx", "*.ts", "*.tsx", "*.cjs", "*.mjs"] {
-            let rule = rules.get_mut(pattern);
-            let has_babel_loader = if let Some(rule) = rule.as_ref() {
-                rule.loaders
-                    .await?
-                    .iter()
-                    .any(|c| c.loader == "babel-loader")
-            } else {
-                false
-            };
-
-            if !has_babel_loader {
-                if !has_emitted_babel_resolve_issue
-                    && !*is_babel_loader_available(project_root.clone()).await?
-                {
-                    BabelIssue {
-                        path: project_root.clone(),
-                        title: StyledString::Text(rcstr!(
-                            "Unable to resolve babel-loader, but a babel config is present"
-                        ))
-                        .resolved_cell(),
-                        description: StyledString::Text(rcstr!(
-                            "Make sure babel-loader is installed via your package manager."
-                        ))
-                        .resolved_cell(),
-                        severity: IssueSeverity::Fatal,
-                    }
-                    .resolved_cell()
-                    .emit();
-
-                    has_emitted_babel_resolve_issue = true;
-                }
+    }
+    if !has_babel_config {
+        return Ok(webpack_rules);
+    }
 
-                let loader = WebpackLoaderItem {
-                    loader: rcstr!("babel-loader"),
-                    options: Default::default(),
-                };
-                if let Some(rule) = rule {
-                    let mut loaders = rule.loaders.owned().await?;
-                    loaders.push(loader);
-                    rule.loaders = ResolvedVc::cell(loaders);
-                } else {
-                    rules.insert(
-                        pattern.into(),
-                        LoaderRuleItem {
-                            loaders: ResolvedVc::cell(vec![loader]),
-                            rename_as: Some(rcstr!("*")),
-                            condition: None,
-                        },
-                    );
-                }
-                has_changed = true;
-            }
-        }
+    let mut rules = webpack_rules.owned().await?;
+    let pattern = rcstr!("*.{js,jsx,ts,tsx,cjs,mjs,mts,cts}");
 
-        if has_changed {
-            return Ok(Vc::cell(Some(ResolvedVc::cell(rules))));
+    if !*is_babel_loader_available(project_root.clone()).await? {
+        BabelIssue {
+            path: project_root.clone(),
+            title: StyledString::Text(rcstr!(
+                "Unable to resolve babel-loader, but a babel config is present"
+            ))
+            .resolved_cell(),
+            description: StyledString::Text(rcstr!(
+                "Make sure babel-loader is installed via your package manager."
+            ))
+            .resolved_cell(),
+            severity: IssueSeverity::Fatal,
         }
+        .resolved_cell()
+        .emit();
     }
-    Ok(Vc::cell(webpack_rules))
+
+    rules.push((
+        pattern,
+        LoaderRuleItem {
+            loaders: ResolvedVc::cell(vec![WebpackLoaderItem {
+                loader: rcstr!("babel-loader"),
+                options: Default::default(),
+            }]),
+            rename_as: Some(rcstr!("*")),
+            condition: None,
+        },
+    ));
+
+    Ok(Vc::cell(rules))
 }
 
 #[turbo_tasks::function]

crates/next-core/src/next_shared/webpack_rules/mod.rs

@@ -10,7 +10,7 @@ use turbopack::module_options::{
 };
 use turbopack_core::resolve::{ExternalTraced, ExternalType, options::ImportMapping};
 
-use self::{babel::maybe_add_babel_loader, sass::maybe_add_sass_loader};
+use self::{babel::maybe_add_babel_loader, sass::add_sass_loader};
 use crate::next_config::NextConfig;
 
 pub(crate) mod babel;
@@ -196,16 +196,26 @@ pub async fn webpack_loader_options(
     next_config: Vc<NextConfig>,
     builtin_conditions: BTreeSet<WebpackLoaderBuiltinCondition>,
 ) -> Result<Option<ResolvedVc<WebpackLoadersOptions>>> {
-    let mut rules = *next_config
-        .webpack_rules(builtin_conditions.clone(), project_path.clone())
-        .await?;
-    rules = *maybe_add_sass_loader(next_config.sass_config(), rules.map(|v| *v)).await?;
-    if !builtin_conditions.contains(&WebpackLoaderBuiltinCondition::Foreign) {
-        rules = *maybe_add_babel_loader(project_path.clone(), rules.map(|v| *v)).await?;
+    let mut rules = next_config.webpack_rules(builtin_conditions.clone(), project_path.clone());
+
+    if !*next_config
+        .experimental_turbopack_force_disable_sass()
+        .await?
+    {
+        rules = add_sass_loader(next_config.sass_config(), rules);
+    }
+
+    if !builtin_conditions.contains(&WebpackLoaderBuiltinCondition::Foreign)
+        && !*next_config
+            .experimental_turbopack_force_disable_babel()
+            .await?
+    {
+        rules = maybe_add_babel_loader(project_path.clone(), rules);
     }
 
-    let conditions = next_config.webpack_conditions().to_resolved().await?;
-    Ok(if let Some(rules) = rules {
+    let rules = rules.to_resolved().await?;
+    Ok(if !rules.await?.is_empty() {
+        let conditions = next_config.webpack_conditions().to_resolved().await?;
         Some(
             WebpackLoadersOptions {
                 rules,