fix(turbopack): keep the original sourcemap of styles after source transform (#79700)

## Why
The original sourcemap be lost after source transform. For example,
a`xyz.sass` file processed by sass-loader, return a `xyz.sass.css`, the
output css chunk only contains the sourcemap of `xyz.sass.css` produced
by lightningcss, `xyz.sass` associated sourcemap been lost.

## How
Extend lightningcss generated sourcemap with the original sourcemap,
see:

https://github.com/parcel-bundler/lightningcss/blob/f2dc67c4d3fe92f26693c02366db1e60cae0db27/napi/src/lib.rs#L776

## Related issue
utooland/utoo#1915

Author: xusd320

test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts

@@ -87,25 +87,45 @@ describe.each([
         if (process.env.IS_TURBOPACK_TEST) {
           if (dependencies.sass) {
             expect(sourceMapContentParsed).toMatchInlineSnapshot(`
-             {
-               "mappings": "AAAA,iCAAiC",
-               "names": [],
-               "sourcesContent": [
-                 ".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}",
-               ],
-               "version": 3,
-             }
+              {
+                "mappings": "AAEE,iCAKF",
+                "names": [],
+                "sourcesContent": [
+                  "$var: red;
+              .redText {
+                ::placeholder {
+                  color: $var;
+                }
+              }
+
+              .flex-parsing {
+                flex: 0 0 calc(50% - var(--vertical-gutter));
+              }
+              ",
+                ],
+                "version": 3,
+              }
             `)
           } else {
             expect(sourceMapContentParsed).toMatchInlineSnapshot(`
-             {
-               "mappings": "AAAA,iCAAiC",
-               "names": [],
-               "sourcesContent": [
-                 ".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}",
-               ],
-               "version": 3,
-             }
+              {
+                "mappings": "AAEE,iCAKF",
+                "names": [],
+                "sourcesContent": [
+                  "$var: red;
+              .redText {
+                ::placeholder {
+                  color: $var;
+                }
+              }
+
+              .flex-parsing {
+                flex: 0 0 calc(50% - var(--vertical-gutter));
+              }
+              ",
+                ],
+                "version": 3,
+              }
             `)
           }
         } else {

turbopack/crates/turbopack-css/src/asset.rs

@@ -14,6 +14,7 @@ use turbopack_core::{
     reference_type::ImportContext,
     resolve::origin::ResolveOrigin,
     source::Source,
+    source_map::GenerateSourceMap,
 };
 
 use crate::{
@@ -91,14 +92,24 @@ impl ProcessCss for CssModuleAsset {
     }
 
     #[turbo_tasks::function]
-    fn finalize_css(
+    async fn finalize_css(
         self: Vc<Self>,
         chunking_context: Vc<Box<dyn ChunkingContext>>,
         minify_type: MinifyType,
-    ) -> Vc<FinalCssResult> {
+    ) -> Result<Vc<FinalCssResult>> {
         let process_result = self.get_css_with_placeholder();
 
-        finalize_css(process_result, chunking_context, minify_type)
+        let origin_source_map =
+            match ResolvedVc::try_sidecast::<Box<dyn GenerateSourceMap>>(self.await?.source) {
+                Some(gsm) => gsm.generate_source_map(),
+                None => Vc::cell(None),
+            };
+        Ok(finalize_css(
+            process_result,
+            chunking_context,
+            minify_type,
+            origin_source_map,
+        ))
     }
 }
 

turbopack/crates/turbopack-css/src/process.rs

@@ -66,6 +66,7 @@ impl StyleSheetLike<'_, '_> {
         minify_type: MinifyType,
         enable_srcmap: bool,
         handle_nesting: bool,
+        mut origin_source_map: Option<parcel_sourcemap::SourceMap>,
     ) -> Result<CssOutput> {
         let ss = &self.0;
         let mut srcmap = if enable_srcmap {
@@ -94,8 +95,12 @@ impl StyleSheetLike<'_, '_> {
         if let Some(srcmap) = &mut srcmap {
             debug_assert_eq!(ss.sources.len(), 1);
 
-            srcmap.add_sources(ss.sources.clone());
-            srcmap.set_source_content(0, code)?;
+            if let Some(origin_source_map) = origin_source_map.as_mut() {
+                let _ = srcmap.extends(origin_source_map);
+            } else {
+                srcmap.add_sources(ss.sources.clone());
+                srcmap.set_source_content(0, code)?;
+            }
         }
 
         let srcmap = match srcmap {
@@ -193,7 +198,7 @@ pub async fn process_css_with_placeholder(
 
             // We use NoMinify because this is not a final css. We need to replace url references,
             // and we do final codegen with proper minification.
-            let (result, _) = stylesheet.to_css(&code, MinifyType::NoMinify, false, false)?;
+            let (result, _) = stylesheet.to_css(&code, MinifyType::NoMinify, false, false, None)?;
 
             let exports = result.exports.map(|exports| {
                 let mut exports = exports.into_iter().collect::<FxIndexMap<_, _>>();
@@ -222,6 +227,7 @@ pub async fn finalize_css(
     result: Vc<CssWithPlaceholderResult>,
     chunking_context: Vc<Box<dyn ChunkingContext>>,
     minify_type: MinifyType,
+    origin_source_map: Vc<OptionStringifiedSourceMap>,
 ) -> Result<Vc<FinalCssResult>> {
     let result = result.await?;
     match &*result {
@@ -259,7 +265,15 @@ pub async fn finalize_css(
                 FileContent::Content(v) => v.content().to_str()?,
                 _ => bail!("this case should be filtered out while parsing"),
             };
-            let (result, srcmap) = stylesheet.to_css(&code, minify_type, true, true)?;
+
+            let origin_source_map = if let Some(rope) = &*origin_source_map.await? {
+                Some(parcel_sourcemap::SourceMap::from_json("", &rope.to_str()?)?)
+            } else {
+                None
+            };
+
+            let (result, srcmap) =
+                stylesheet.to_css(&code, minify_type, true, true, origin_source_map)?;
 
             Ok(FinalCssResult::Ok {
                 output_code: result.code,