Turbopack: fix module rules for .module.scss (#82570)

It ran `postcss(webpack(postcss(filesource)))`, which doesn't work.

And changing the order does make sense, since we do want Webpack (SCSS) to run first, and only then PostCSS?

#82554 didn't catch every case

Author: mischnic

test/e2e/app-dir/css-modules-rsc-postcss/app/other.module.scss

@@ -0,0 +1,4 @@
+.other {
+  // some SCSS
+  color: red;
+}

test/e2e/app-dir/css-modules-rsc-postcss/app/page.tsx

@@ -1,5 +1,11 @@
 import styles from './page.module.css'
+import other from './other.module.scss'
 
 export default function Page() {
-  return <p className={styles.main}>hello world</p>
+  return (
+    <div>
+      <p className={styles.main}>hello world</p>
+      <span className={other.other}>hello world</span>
+    </div>
+  )
 }

test/e2e/app-dir/css-modules-rsc-postcss/css-modules-rsc-postcss.test.ts

@@ -5,6 +5,7 @@ describe('css-modules-rsc-postcss', () => {
     files: __dirname,
     dependencies: {
       'postcss-nested': '4.2.1',
+      sass: 'latest',
     },
   })
 
@@ -13,5 +14,8 @@ describe('css-modules-rsc-postcss', () => {
     expect(await browser.elementByCss('p').getComputedCss('color')).toBe(
       'rgb(0, 128, 0)'
     )
+    expect(await browser.elementByCss('span').getComputedCss('color')).toBe(
+      'rgb(0, 128, 0)'
+    )
   })
 })

test/e2e/app-dir/css-order/app/base-scss.module.scss

@@ -1,3 +1,4 @@
+// this is scss
 $base1: rgb(255, 1, 0);
 
 .base {

test/e2e/app-dir/css-order/app/base2-scss.module.scss

@@ -1,3 +1,4 @@
+// this is scss
 .base {
   color: rgb(255, 3, 0);
 }

turbopack/crates/turbopack/src/module_options/mod.rs

@@ -470,6 +470,86 @@ impl ModuleOptions {
             ),
         ];
 
+        if let Some(webpack_loaders_options) = enable_webpack_loaders {
+            let webpack_loaders_options = webpack_loaders_options.await?;
+            let execution_context =
+                execution_context.context("execution_context is required for webpack_loaders")?;
+            let import_map = if let Some(loader_runner_package) =
+                webpack_loaders_options.loader_runner_package
+            {
+                package_import_map_from_import_mapping(
+                    rcstr!("loader-runner"),
+                    *loader_runner_package,
+                )
+            } else {
+                package_import_map_from_context(
+                    rcstr!("loader-runner"),
+                    path.clone()
+                        .context("need_path in ModuleOptions::new is incorrect")?,
+                )
+            };
+            for (key, rule) in webpack_loaders_options.rules.await?.iter() {
+                rules.push(ModuleRule::new(
+                    RuleCondition::All(vec![
+                        if key.starts_with("#") {
+                            // This is a custom marker requiring a corresponding condition entry
+                            let conditions = (*webpack_loaders_options.conditions.await?)
+                                .context(
+                                    "Expected a condition entry for the webpack loader rule \
+                                     matching {key}. Create a `conditions` mapping in your \
+                                     next.config.js",
+                                )?
+                                .await?;
+
+                            let condition = conditions.get(key).context(
+                                "Expected a condition entry for the webpack loader rule matching \
+                                 {key}.",
+                            )?;
+
+                            match &condition.path {
+                                ConditionPath::Glob(glob) => RuleCondition::ResourcePathGlob {
+                                    base: execution_context.project_path().owned().await?,
+                                    glob: Glob::new(glob.clone()).await?,
+                                },
+                                ConditionPath::Regex(regex) => {
+                                    RuleCondition::ResourcePathEsRegex(regex.await?)
+                                }
+                            }
+                        } else if key.contains('/') {
+                            RuleCondition::ResourcePathGlob {
+                                base: execution_context.project_path().owned().await?,
+                                glob: Glob::new(key.clone()).await?,
+                            }
+                        } else {
+                            RuleCondition::ResourceBasePathGlob(Glob::new(key.clone()).await?)
+                        },
+                        RuleCondition::not(RuleCondition::ResourceIsVirtualSource),
+                        module_css_external_transform_conditions.clone(),
+                    ]),
+                    vec![ModuleRuleEffect::SourceTransforms(ResolvedVc::cell(vec![
+                        ResolvedVc::upcast(
+                            WebpackLoaders::new(
+                                node_evaluate_asset_context(
+                                    *execution_context,
+                                    Some(import_map),
+                                    None,
+                                    Layer::new(rcstr!("webpack_loaders")),
+                                    false,
+                                ),
+                                *execution_context,
+                                *rule.loaders,
+                                rule.rename_as.clone(),
+                                resolve_options_context,
+                                matches!(ecmascript_source_maps, SourceMapsType::Full),
+                            )
+                            .to_resolved()
+                            .await?,
+                        ),
+                    ]))],
+                ));
+            }
+        }
+
         if enable_raw_css {
             rules.extend([
                 ModuleRule::new(
@@ -644,85 +724,6 @@ impl ModuleOptions {
             ));
         }
 
-        if let Some(webpack_loaders_options) = enable_webpack_loaders {
-            let webpack_loaders_options = webpack_loaders_options.await?;
-            let execution_context =
-                execution_context.context("execution_context is required for webpack_loaders")?;
-            let import_map = if let Some(loader_runner_package) =
-                webpack_loaders_options.loader_runner_package
-            {
-                package_import_map_from_import_mapping(
-                    rcstr!("loader-runner"),
-                    *loader_runner_package,
-                )
-            } else {
-                package_import_map_from_context(
-                    rcstr!("loader-runner"),
-                    path.context("need_path in ModuleOptions::new is incorrect")?,
-                )
-            };
-            for (key, rule) in webpack_loaders_options.rules.await?.iter() {
-                rules.push(ModuleRule::new(
-                    RuleCondition::All(vec![
-                        if key.starts_with("#") {
-                            // This is a custom marker requiring a corresponding condition entry
-                            let conditions = (*webpack_loaders_options.conditions.await?)
-                                .context(
-                                    "Expected a condition entry for the webpack loader rule \
-                                     matching {key}. Create a `conditions` mapping in your \
-                                     next.config.js",
-                                )?
-                                .await?;
-
-                            let condition = conditions.get(key).context(
-                                "Expected a condition entry for the webpack loader rule matching \
-                                 {key}.",
-                            )?;
-
-                            match &condition.path {
-                                ConditionPath::Glob(glob) => RuleCondition::ResourcePathGlob {
-                                    base: execution_context.project_path().owned().await?,
-                                    glob: Glob::new(glob.clone()).await?,
-                                },
-                                ConditionPath::Regex(regex) => {
-                                    RuleCondition::ResourcePathEsRegex(regex.await?)
-                                }
-                            }
-                        } else if key.contains('/') {
-                            RuleCondition::ResourcePathGlob {
-                                base: execution_context.project_path().owned().await?,
-                                glob: Glob::new(key.clone()).await?,
-                            }
-                        } else {
-                            RuleCondition::ResourceBasePathGlob(Glob::new(key.clone()).await?)
-                        },
-                        RuleCondition::not(RuleCondition::ResourceIsVirtualSource),
-                        module_css_external_transform_conditions.clone(),
-                    ]),
-                    vec![ModuleRuleEffect::SourceTransforms(ResolvedVc::cell(vec![
-                        ResolvedVc::upcast(
-                            WebpackLoaders::new(
-                                node_evaluate_asset_context(
-                                    *execution_context,
-                                    Some(import_map),
-                                    None,
-                                    Layer::new(rcstr!("webpack_loaders")),
-                                    false,
-                                ),
-                                *execution_context,
-                                *rule.loaders,
-                                rule.rename_as.clone(),
-                                resolve_options_context,
-                                matches!(ecmascript_source_maps, SourceMapsType::Full),
-                            )
-                            .to_resolved()
-                            .await?,
-                        ),
-                    ]))],
-                ));
-            }
-        }
-
         rules.extend(module_rules.iter().cloned());
 
         Ok(ModuleOptions::cell(ModuleOptions { rules }))