fix: allow to only generate source map for CSS files

web-infra-dev · Jan 29, 2025 · 35187aa · 35187aa
1 parent 1b5868d
commit 35187aa
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 15 deletions.
diff --git a/e2e/cases/output/source-map/index.test.ts b/e2e/cases/output/source-map/index.test.ts
@@ -186,3 +186,28 @@ test('should generate source map correctly in development build', async ({
 
   await rsbuild.close();
 });
+
+test('should allow to only generate source map for CSS files', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    rsbuildConfig: {
+      output: {
+        sourceMap: {
+          js: false,
+          css: true,
+        },
+      },
+    },
+  });
+
+  const files = await rsbuild.unwrapOutputJSON(false);
+
+  const jsMapFiles = Object.keys(files).filter((files) =>
+    files.endsWith('.js.map'),
+  );
+  const cssMapFiles = Object.keys(files).filter((files) =>
+    files.endsWith('.css.map'),
+  );
+  expect(jsMapFiles.length).toEqual(0);
+  expect(cssMapFiles.length).toBeGreaterThan(0);
+});
diff --git a/packages/compat/webpack/src/webpackConfig.ts b/packages/compat/webpack/src/webpackConfig.ts
@@ -105,6 +105,7 @@ export async function generateWebpackConfig({
     DefinePlugin,
     IgnorePlugin,
     ProvidePlugin,
+    SourceMapDevToolPlugin,
     HotModuleReplacementPlugin,
   } = webpack;
 
@@ -115,6 +116,7 @@ export async function generateWebpackConfig({
       DefinePlugin,
       IgnorePlugin,
       ProvidePlugin,
+      SourceMapDevToolPlugin,
       HotModuleReplacementPlugin,
     },
   });

diff --git a/packages/core/src/plugins/basic.ts b/packages/core/src/plugins/basic.ts
@@ -6,9 +6,7 @@ import type {
   Rspack,
 } from '../types';
 
-const getJsSourceMap = (
-  config: NormalizedEnvironmentConfig,
-): Rspack.DevTool => {
+const getDevtool = (config: NormalizedEnvironmentConfig): Rspack.DevTool => {
   const { sourceMap } = config.output;
   const isProd = config.mode === 'production';
 
@@ -25,7 +23,7 @@ const getJsSourceMap = (
 };
 
 /**
- * Provide some basic configs of rspack
+ * Set some basic Rspack configs
  */
 export const pluginBasic = (): RsbuildPlugin => ({
   name: 'rsbuild:basic',
@@ -37,7 +35,20 @@ export const pluginBasic = (): RsbuildPlugin => ({
 
         chain.name(environment.name);
 
-        chain.devtool(getJsSourceMap(config));
+        const devtool = getDevtool(config);
+        chain.devtool(devtool);
+
+        // When JS source map is disabled, but CSS source map is enabled,
+        // add `SourceMapDevToolPlugin` to let Rspack generate CSS source map.
+        const { sourceMap } = config.output;
+        if (!devtool && typeof sourceMap === 'object' && sourceMap.css) {
+          chain.plugin('source-map-css').use(bundler.SourceMapDevToolPlugin, [
+            {
+              test: /\.css$/,
+              filename: '[file].map[query]',
+            },
+          ]);
+        }
 
         // The base directory for resolving entry points and loaders from the configuration.
         chain.context(api.context.rootPath);

diff --git a/packages/core/src/provider/rspackConfig.ts b/packages/core/src/provider/rspackConfig.ts
@@ -163,6 +163,7 @@ export async function generateRspackConfig({
     DefinePlugin,
     IgnorePlugin,
     ProvidePlugin,
+    SourceMapDevToolPlugin,
     HotModuleReplacementPlugin,
   } = rspack;
 
@@ -173,6 +174,7 @@ export async function generateRspackConfig({
       DefinePlugin,
       IgnorePlugin,
       ProvidePlugin,
+      SourceMapDevToolPlugin,
       HotModuleReplacementPlugin,
     },
   });

diff --git a/packages/core/src/types/hooks.ts b/packages/core/src/types/hooks.ts
@@ -192,6 +192,7 @@ export type ModifyBundlerChainUtils = ModifyChainUtils & {
     DefinePlugin: PluginInstance;
     IgnorePlugin: PluginInstance;
     ProvidePlugin: PluginInstance;
+    SourceMapDevToolPlugin: PluginInstance;
     HotModuleReplacementPlugin: PluginInstance;
   };
 };

diff --git a/website/docs/en/plugins/dev/hooks.mdx b/website/docs/en/plugins/dev/hooks.mdx
@@ -405,11 +405,7 @@ type ModifyBundlerChainUtils = {
   CHAIN_ID: ChainIdentifier;
   HtmlPlugin: typeof import('html-rspack-plugin');
   bundler: {
-    BannerPlugin: rspack.BannerPlugin;
-    DefinePlugin: rspack.DefinePlugin;
-    IgnorePlugin: rspack.IgnorePlugin;
-    ProvidePlugin: rspack.ProvidePlugin;
-    HotModuleReplacementPlugin: rspack.HotModuleReplacementPlugin;
+    // some Rspack built-in plugins
   };
 };
 

diff --git a/website/docs/zh/plugins/dev/hooks.mdx b/website/docs/zh/plugins/dev/hooks.mdx
@@ -401,11 +401,7 @@ type ModifyBundlerChainUtils = {
   CHAIN_ID: ChainIdentifier;
   HtmlPlugin: typeof import('html-rspack-plugin');
   bundler: {
-    BannerPlugin: rspack.BannerPlugin;
-    DefinePlugin: rspack.DefinePlugin;
-    IgnorePlugin: rspack.IgnorePlugin;
-    ProvidePlugin: rspack.ProvidePlugin;
-    HotModuleReplacementPlugin: rspack.HotModuleReplacementPlugin;
+    // some Rspack built-in plugins
   };
 };