fix(source-maps): avoid loader request in lightningcss source maps (#13830)

* fix: avoid loader request in lightningcss source maps

* fix: preserve absolute source paths in lightningcss loader maps

---------

Co-authored-by: Cong-Cong Pan <dacongsama@live.com>

Author: zalishchuk

Cargo.lock

@@ -9,6 +9,7 @@ version.workspace = true
 
 [dependencies]
 async-trait          = { workspace = true }
+cow-utils            = { workspace = true }
 derive_more          = { workspace = true, features = ["debug"] }
 lightningcss         = { workspace = true, features = ["sourcemap", "into_owned"] }
 parcel_sourcemap     = { workspace = true }

crates/rspack_loader_lightningcss/Cargo.toml

@@ -4,6 +4,7 @@ use std::{
 };
 
 use config::Config;
+use cow_utils::CowUtils;
 use derive_more::Debug;
 pub use lightningcss;
 use lightningcss::{
@@ -175,11 +176,9 @@ impl LightningCssLoader {
       })
       .to_rspack_result()?;
 
-    let module_request = loader_context.context.module.request();
-
     let mut parcel_source_map = if loader_context.context.source_map_kind.enabled() {
       let mut sm = parcel_sourcemap::SourceMap::new(&loader_context.context.options.context);
-      sm.add_source(module_request);
+      sm.add_source(&filename);
       sm.set_source_content(0, &content_str).to_rspack_result()?;
       Some(sm)
     } else {
@@ -221,12 +220,34 @@ impl LightningCssLoader {
           }),
         }
       }));
+
+      let mut posix_context = loader_context
+        .context
+        .options
+        .context
+        .cow_replace("\\", "/");
+      if !posix_context.ends_with('/') {
+        posix_context.to_mut().push('/');
+      }
+      let posix_context = posix_context.into_owned();
+
       let rspack_source_map = SourceMap::new(
         mappings,
+        // Parcel stores sources relative to project_root, while Rspack source maps
+        // use absolute module paths for downstream loader/plugin handling.
         parcel_source_map
           .get_sources()
           .iter()
-          .map(ToString::to_string)
+          .map(|source| {
+            if source.starts_with('/') || source.contains(':') {
+              source.clone()
+            } else {
+              let mut absolute_source = String::with_capacity(posix_context.len() + source.len());
+              absolute_source.push_str(&posix_context);
+              absolute_source.push_str(source);
+              absolute_source
+            }
+          })
           .collect::<Vec<_>>(),
         parcel_source_map
           .get_sources_content()
@@ -240,9 +261,10 @@ impl LightningCssLoader {
           .collect::<Vec<_>>(),
       );
 
+      let posix_name = filename.cow_replace("\\", "/");
       let source_map_source = SourceMapSource::new(SourceMapSourceOptions {
         value: content.code.clone(),
-        name: module_request.to_string(),
+        name: posix_name,
         source_map: rspack_source_map,
         original_source: None,
         inner_source_map: loader_context.take_source_map(),

crates/rspack_loader_lightningcss/src/lib.rs

@@ -0,0 +1,12 @@
+const path = require('node:path');
+
+module.exports = function (code, map) {
+  const expectedSource = path
+    .resolve(__dirname, 'index.css')
+    .replace(/\\/g, '/');
+
+  expect(map).toBeTruthy();
+  expect(map.sources).toEqual([expectedSource]);
+
+  this.callback(null, code, map);
+};

tests/rspack-test/configCases/builtin-lightningcss-loader/source-map-absolute-sources/assert-source-map-loader.js

@@ -0,0 +1,3 @@
+.source-map-probe {
+  color: red;
+}

tests/rspack-test/configCases/builtin-lightningcss-loader/source-map-absolute-sources/index.css

@@ -0,0 +1 @@
+import './index.css';

tests/rspack-test/configCases/builtin-lightningcss-loader/source-map-absolute-sources/index.js

@@ -0,0 +1,21 @@
+/** @type {import("@rspack/core").Configuration} */
+module.exports = {
+  mode: 'development',
+  target: 'web',
+  devtool: 'source-map',
+  module: {
+    generator: {
+      'css/auto': {
+        exportsOnly: false,
+      },
+    },
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['./assert-source-map-loader.js', 'builtin:lightningcss-loader'],
+        sideEffects: true,
+        type: 'css/auto',
+      },
+    ],
+  },
+};