fix: allow to disable CSS minification if CSS is inlined

e2e/cases/css/style-loader/index.test.ts → e2e/cases/css/inject-styles/index.test.ts

@@ -6,7 +6,7 @@ import { expect, test } from '@playwright/test';
 const fixtures = __dirname;
 
 rspackOnlyTest(
-  'should inline style when injectStyles is true',
+  'should inline style when `injectStyles` is enabled',
   async ({ page }) => {
     const rsbuild = await build({
       cwd: fixtures,
@@ -45,7 +45,7 @@ rspackOnlyTest(
 );
 
 rspackOnlyTest(
-  'HMR should work well when injectStyles is true',
+  'HMR should work well when `injectStyles` is enabled',
   async ({ page }) => {
     // HMR cases will fail in Windows
     if (process.platform === 'win32') {
@@ -97,3 +97,37 @@ rspackOnlyTest(
     await rsbuild.close();
   },
 );
+
+rspackOnlyTest(
+  'should allow to disable CSS minification when `injectStyles` is enabled',
+  async ({ page }) => {
+    const rsbuild = await build({
+      cwd: fixtures,
+      page,
+      rsbuildConfig: {
+        output: {
+          minify: false,
+        },
+      },
+    });
+
+    // injectStyles worked
+    const files = await rsbuild.unwrapOutputJSON();
+    const cssFiles = Object.keys(files).filter((file) => file.endsWith('.css'));
+    expect(cssFiles.length).toBe(0);
+
+    // should inline CSS
+    const indexJsFile = Object.keys(files).find(
+      (file) => file.includes('index.') && file.endsWith('.js'),
+    )!;
+
+    expect(
+      files[indexJsFile].includes(`html, body {
+  margin: 0;
+  padding: 0;
+}`),
+    ).toBeTruthy();
+
+    await rsbuild.close();
+  },
+);

packages/core/src/plugins/css.ts

@@ -16,6 +16,7 @@ import type {
   Rspack,
   RspackChain,
 } from '../types';
+import { parseMinifyOptions } from './minimize';
 
 const getCSSModulesLocalIdentName = (
   config: NormalizedEnvironmentConfig,
@@ -30,6 +31,7 @@ const getCSSModulesLocalIdentName = (
 export const getLightningCSSLoaderOptions = (
   config: NormalizedEnvironmentConfig,
   targets: string[],
+  minify: boolean,
 ): Rspack.LightningcssLoaderOptions => {
   const userOptions =
     typeof config.tools.lightningcssLoader === 'object'
@@ -40,7 +42,7 @@ export const getLightningCSSLoaderOptions = (
     targets,
   };
 
-  if (config.mode === 'production' && config.output.injectStyles) {
+  if (minify) {
     initialOptions.minify = true;
   }
 
@@ -345,22 +347,25 @@ export const pluginCss = (): RsbuildPlugin => ({
           ) {
             importLoaders++;
 
-            const lightningcssOptions = getLightningCSSLoaderOptions(
-              config,
-              environment.browserslist,
-            );
+            const { minifyCss } = parseMinifyOptions(config, isProd);
 
             updateRules((rule, type) => {
-              const enableMinify =
-                type === 'inline' && config.mode === 'production';
+              // Inline styles are not processed by Rspack's minimizers,
+              // so we need to minify them via `builtin:lightningcss-loader`
+              const inlineStyle =
+                type === 'inline' || config.output.injectStyles;
+              const minify = inlineStyle && isProd && minifyCss;
+
+              const lightningcssOptions = getLightningCSSLoaderOptions(
+                config,
+                environment.browserslist,
+                minify,
+              );
+
               rule
                 .use(CHAIN_ID.USE.LIGHTNINGCSS)
                 .loader('builtin:lightningcss-loader')
-                .options(
-                  enableMinify
-                    ? { ...lightningcssOptions, minify: true }
-                    : lightningcssOptions,
-                );
+                .options(lightningcssOptions);
             });
           }
 

packages/core/src/plugins/minimize.ts

@@ -116,6 +116,7 @@ export const pluginMinimize = (): RsbuildPlugin => ({
         const loaderOptions = getLightningCSSLoaderOptions(
           config,
           environment.browserslist,
+          true,
         );
 
         const defaultOptions: LightningCssMinimizerRspackPluginOptions = {