feat(turbopack): basic sass-loader support (vercel/turborepo#4985)

### Description

WEB-654.

This is pairing PR from next.js
#49882 (not a breaking change
though) to have necessary support to run sass-loader. Mainly, it adds
near-dummy context in `webpack-loaders` as well as assigning specific
module types for the scss / sass.

I'm not entirely in favor of having internal custom module type logic in
webpack loaders setup by extension - however next.config.js itself
doesn't have enough information other than extension + loader to
determine module type. Something would like to address.

---------

Co-authored-by: Justin Ridgewell <[email protected]>

crates/turbopack-node/js/src/transforms/webpack-loaders.ts

@@ -41,6 +41,60 @@ const toPath = (file: string) => {
   return sep !== "/" ? relPath.replaceAll(sep, "/") : relPath;
 };
 
+const LogType = Object.freeze({
+  error: "error",
+  warn: "warn",
+  info: "info",
+  log: "log",
+  debug: "debug",
+
+  trace: "trace",
+
+  group: "group",
+  groupCollapsed: "groupCollapsed",
+  groupEnd: "groupEnd",
+
+  profile: "profile",
+  profileEnd: "profileEnd",
+
+  time: "time",
+
+  clear: "clear",
+  status: "status",
+});
+
+const loaderFlag = "LOADER_EXECUTION";
+
+const cutOffByFlag = (stack, flag) => {
+  const errorStack = stack.split("\n");
+  for (let i = 0; i < errorStack.length; i++) {
+    if (errorStack[i].includes(flag)) {
+      errorStack.length = i;
+    }
+  }
+  return errorStack.join("\n");
+};
+
+/**
+ * @param {string} stack stack trace
+ * @returns {string} stack trace without the loader execution flag included
+ */
+const cutOffLoaderExecution = (stack) => cutOffByFlag(stack, loaderFlag);
+
+class DummySpan {
+  traceChild() {
+    return new DummySpan();
+  }
+
+  traceFn<T>(fn: (span: DummySpan) => T): T {
+    return fn(this);
+  }
+
+  async traceAsyncFn<T>(fn: (span: DummySpan) => T | Promise<T>): Promise<T> {
+    return await fn(this);
+  }
+}
+
 const transform = (
   ipc: Ipc,
   content: string,
@@ -59,16 +113,41 @@ const transform = (
       {
         resource,
         context: {
+          currentTraceSpan: new DummySpan(),
           rootContext: contextDir,
           getOptions() {
             const entry = this.loaders[this.loaderIndex];
             return entry.options && typeof entry.options === "object"
               ? entry.options
               : {};
           },
+          getResolve: () => ({
+            // [TODO] this is incomplete
+          }),
           emitWarning: makeErrorEmitter("warning", ipc),
           emitError: makeErrorEmitter("error", ipc),
+          getLogger: (name) => (type, args) => {
+            let trace;
+            switch (type) {
+              case LogType.warn:
+              case LogType.error:
+              case LogType.trace:
+                trace = cutOffLoaderExecution(new Error("Trace").stack)
+                  .split("\n")
+                  .slice(3);
+                break;
+            }
+            const logEntry = {
+              time: Date.now(),
+              type,
+              args,
+              trace,
+            };
+
+            this.hooks.log.call(name, logEntry);
+          },
         },
+
         loaders: loadersWithOptions.map((loader) => ({
           loader: __turbopack_external_require__.resolve(loader.loader, {
             paths: [resourceDir],

crates/turbopack/src/module_options/mod.rs

@@ -466,10 +466,15 @@ impl ModuleOptionsVc {
                         ModuleRuleCondition::not(ModuleRuleCondition::ResourceIsVirtualAsset),
                     ]),
                     vec![
-                        ModuleRuleEffect::ModuleType(ModuleType::Ecmascript {
-                            transforms: app_transforms,
-                            options: ecmascript_options.clone(),
-                        }),
+                        // [TODO]: should accept rules as an option
+                        if ext == ".scss" || ext == ".sass" {
+                            ModuleRuleEffect::ModuleType(ModuleType::Css(css_transforms))
+                        } else {
+                            ModuleRuleEffect::ModuleType(ModuleType::Ecmascript {
+                                transforms: app_transforms,
+                                options: ecmascript_options.clone(),
+                            })
+                        },
                         ModuleRuleEffect::SourceTransforms(SourceTransformsVc::cell(vec![
                             WebpackLoadersVc::new(
                                 node_evaluate_asset_context(

crates/turbopack/src/resolve.rs

@@ -14,10 +14,7 @@ use turbopack_ecmascript::typescript::resolve::{
     apply_tsconfig_resolve_options, tsconfig, tsconfig_resolve_options,
 };
 
-use crate::{
-    resolve_options_context::ResolveOptionsContextVc,
-    unsupported_sass::UnsupportedSassResolvePluginVc,
-};
+use crate::resolve_options_context::ResolveOptionsContextVc;
 
 const NODE_EXTERNALS: [&str; 51] = [
     "assert",
@@ -112,8 +109,7 @@ async fn base_resolve_options(
     }
     let import_map = import_map.cell();
 
-    let mut plugins = opt.plugins.clone();
-    plugins.push(UnsupportedSassResolvePluginVc::new(root).as_resolve_plugin());
+    let plugins = opt.plugins.clone();
 
     Ok(ResolveOptions {
         extensions: if let Some(environment) = emulating {