feat(turbopack): initial sass-loader support

packages/next-swc/crates/next-core/src/lib.rs

@@ -31,6 +31,7 @@ pub mod pages_structure;
 pub mod router;
 pub mod router_source;
 mod runtime;
+mod sass;
 mod transform_options;
 mod util;
 mod web_entry_source;

packages/next-swc/crates/next-core/src/next_client/context.rs

@@ -30,8 +30,8 @@ use turbopack_binding::{
             module_options::{
                 module_options_context::{ModuleOptionsContext, ModuleOptionsContextVc},
                 CustomEcmascriptTransformPlugins, CustomEcmascriptTransformPluginsVc,
-                JsxTransformOptions, MdxTransformModuleOptions, PostCssTransformOptions,
-                TypescriptTransformOptions, WebpackLoadersOptions,
+                JsxTransformOptions, MdxTransformModuleOptions,
+                PostCssTransformOptions, TypescriptTransformOptions, WebpackLoadersOptions,
             },
             resolve_options_context::{ResolveOptionsContext, ResolveOptionsContextVc},
             transition::TransitionsByNameVc,
@@ -55,6 +55,7 @@ use crate::{
     next_shared::{
         resolve::UnsupportedModulesResolvePluginVc, transforms::get_relay_transform_plugin,
     },
+    sass::maybe_add_sass_loader,
     transform_options::{
         get_decorators_transform_options, get_emotion_compiler_config, get_jsx_transform_options,
         get_styled_components_compiler_config, get_typescript_transform_options,
@@ -192,11 +193,12 @@ pub async fn get_client_module_options_context(
             loader_runner_package: Some(get_external_next_compiled_package_mapping(
                 StringVc::cell("loader-runner".to_owned()),
             )),
-            placeholder_for_future_extensions: (),
+            ..Default::default()
         }
         .cell();
 
-        maybe_add_babel_loader(project_path, loaders_options)
+        let loaders_options = maybe_add_babel_loader(project_path, loaders_options);
+        maybe_add_sass_loader(next_config.sass_config(), loaders_options)
             .await?
             .clone_if()
     };

packages/next-swc/crates/next-core/src/next_config.rs

@@ -3,7 +3,7 @@ use indexmap::IndexMap;
 use serde::{Deserialize, Serialize};
 use serde_json::Value as JsonValue;
 use turbo_tasks::{
-    primitives::{BoolVc, StringsVc},
+    primitives::{BoolVc, JsonValueVc, StringsVc},
     trace::TraceRawVcs,
     CompletionVc, Value,
 };
@@ -59,6 +59,7 @@ pub struct NextConfig {
     pub rewrites: Rewrites,
     pub transpile_packages: Option<Vec<String>>,
     pub modularize_imports: Option<IndexMap<String, ModularizeImportPackageConfig>>,
+    sass_options: Option<serde_json::Value>,
 
     // Partially supported
     pub compiler: Option<CompilerConfig>,
@@ -92,7 +93,6 @@ pub struct NextConfig {
     production_browser_source_maps: bool,
     public_runtime_config: IndexMap<String, serde_json::Value>,
     redirects: Vec<Redirect>,
-    sass_options: IndexMap<String, serde_json::Value>,
     server_runtime_config: IndexMap<String, serde_json::Value>,
     static_page_generation_timeout: f64,
     swc_minify: bool,
@@ -570,6 +570,13 @@ impl NextConfigVc {
             self.await?.experimental.mdx_rs.unwrap_or(false),
         ))
     }
+
+    #[turbo_tasks::function]
+    pub async fn sass_config(self) -> Result<JsonValueVc> {
+        Ok(JsonValueVc::cell(
+            self.await?.sass_options.clone().unwrap_or_default(),
+        ))
+    }
 }
 
 fn next_configs() -> StringsVc {

packages/next-swc/crates/next-core/src/next_server/context.rs

@@ -47,6 +47,7 @@ use crate::{
     next_shared::{
         resolve::UnsupportedModulesResolvePluginVc, transforms::get_relay_transform_plugin,
     },
+    sass::maybe_add_sass_loader,
     transform_options::{
         get_decorators_transform_options, get_emotion_compiler_config, get_jsx_transform_options,
         get_styled_components_compiler_config, get_typescript_transform_options,
@@ -272,11 +273,12 @@ pub async fn get_server_module_options_context(
             loader_runner_package: Some(get_external_next_compiled_package_mapping(
                 StringVc::cell("loader-runner".to_owned()),
             )),
-            placeholder_for_future_extensions: (),
+            ..Default::default()
         }
         .cell();
 
-        maybe_add_babel_loader(project_path, loaders_options)
+        let loaders_options = maybe_add_babel_loader(project_path, loaders_options);
+        maybe_add_sass_loader(next_config.sass_config(), loaders_options)
             .await?
             .clone_if()
     };

packages/next-swc/crates/next-core/src/sass.rs

@@ -0,0 +1,42 @@
+use anyhow::Result;
+use turbo_tasks::primitives::JsonValueVc;
+use turbopack_binding::turbopack::{
+    node::transforms::webpack::{WebpackLoaderConfigItem, WebpackLoaderConfigItemsVc},
+    turbopack::module_options::WebpackLoadersOptionsVc,
+};
+
+#[turbo_tasks::function]
+pub async fn maybe_add_sass_loader(
+    sass_options: JsonValueVc,
+    webpack_options: WebpackLoadersOptionsVc,
+) -> Result<WebpackLoadersOptionsVc> {
+    let mut options = (*webpack_options.await?).clone();
+
+    let sass_options = sass_options.await?.as_object().unwrap().clone();
+    for ext in [".scss", ".sass"] {
+        let loader = WebpackLoaderConfigItem::LoaderNameWithOptions {
+            loader: "next/dist/compiled/sass-loader".to_string(),
+            options: serde_json::json!({
+                //https://github.com/vercel/turbo/blob/d527eb54be384a4658243304cecd547d09c05c6b/crates/turbopack-node/src/transforms/webpack.rs#L191
+                "sourceMap": false,
+                "sassOptions": sass_options,
+            })
+            .as_object()
+            .unwrap()
+            .clone(),
+        };
+
+        options.extension_to_loaders.insert(
+            ext.to_owned(),
+            if options.extension_to_loaders.contains_key(ext) {
+                let mut new_configs = (*(options.extension_to_loaders[ext].await?)).clone();
+                new_configs.push(loader);
+                WebpackLoaderConfigItemsVc::cell(new_configs)
+            } else {
+                WebpackLoaderConfigItemsVc::cell(vec![loader])
+            },
+        );
+    }
+
+    Ok(options.cell())
+}