fix: emit css source map in bundleless mode (#698)

Author: coderbaozi

examples/react-component-bundle-false/rslib.config.ts

@@ -32,7 +32,7 @@ export default defineConfig({
   ],
   output: {
     target: 'web',
-    assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts
+    assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts,
   },
   plugins: [pluginReact(), pluginSass()],
 });

packages/core/src/css/libCssExtractLoader.ts

@@ -255,14 +255,13 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function (
 
     const m = new Map<string, string>();
 
-    for (const { content, filepath } of dependencies) {
+    for (const { content, filepath, sourceMap } of dependencies) {
       let distFilepath = getRelativePath(rootDir, filepath);
       const ext = extname(distFilepath);
       if (ext !== 'css') {
         distFilepath = distFilepath.replace(ext, '.css');
       }
       distFilepath = distFilepath.replace(/\.module\.css/, '_module.css');
-
       const cssFilename = path.basename(distFilepath);
       if (content.trim()) {
         m.get(distFilepath)
@@ -272,6 +271,13 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function (
         importCssFiles += '\n';
         importCssFiles += `import "./${cssFilename}"`;
       }
+      if (sourceMap) {
+        const sourceMapPath = `${distFilepath}.map`;
+        m.set(sourceMapPath, `${sourceMap}`);
+        // Associate the source map with the CSS file
+        const sourceMappingURL = `/*# sourceMappingURL=${cssFilename}.map */`;
+        m.set(distFilepath, `${m.get(distFilepath)}\n${sourceMappingURL}`);
+      }
     }
     for (const [distFilepath, content] of m.entries()) {
       this.emitFile(distFilepath, content);

pnpm-lock.yaml

@@ -0,0 +1,6 @@
+{
+  "name": "sourcemap-css-test",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module"
+}

tests/integration/sourcemap/css/package.json

@@ -0,0 +1,17 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [generateBundleEsmConfig({ bundle: false })],
+  source: {
+    entry: {
+      index: ['./src/index.css'],
+    },
+  },
+  output: {
+    target: 'web',
+    sourceMap: {
+      css: true,
+    },
+  },
+});

tests/integration/sourcemap/css/rslib.config.ts

@@ -0,0 +1,3 @@
+.hello-world {
+  color: #bfa;
+}

tests/integration/sourcemap/css/src/index.css

@@ -41,3 +41,19 @@ test('should generate js inline sourcemap: inline-cheap-module-source-map', asyn
 
   expect(code[0]).toContain('//# sourceMappingURL=data:application/json');
 });
+
+test('should generate css sourcemap file', async () => {
+  const fixturePath = join(__dirname, 'css');
+  const { contents } = await buildAndGetResults({ fixturePath, type: 'css' });
+  const files = Object.keys(contents.esm);
+  const code = Object.values(contents.esm);
+
+  expect(files).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/sourcemap/css/dist/esm/index.css",
+      "<ROOT>/tests/integration/sourcemap/css/dist/esm/index.css.map",
+    ]
+  `);
+
+  expect(code[0]).toContain('/*# sourceMappingURL=index.css.map */');
+});