diff --git a/e2e/cases/css/style-loader-lightningcss/index.test.ts b/e2e/cases/css/inject-styles-lightningcss/index.test.ts similarity index 100% rename from e2e/cases/css/style-loader-lightningcss/index.test.ts rename to e2e/cases/css/inject-styles-lightningcss/index.test.ts diff --git a/e2e/cases/css/style-loader-lightningcss/rsbuild.config.ts b/e2e/cases/css/inject-styles-lightningcss/rsbuild.config.ts similarity index 100% rename from e2e/cases/css/style-loader-lightningcss/rsbuild.config.ts rename to e2e/cases/css/inject-styles-lightningcss/rsbuild.config.ts diff --git a/e2e/cases/css/style-loader-lightningcss/src/index.css b/e2e/cases/css/inject-styles-lightningcss/src/index.css similarity index 100% rename from e2e/cases/css/style-loader-lightningcss/src/index.css rename to e2e/cases/css/inject-styles-lightningcss/src/index.css diff --git a/e2e/cases/css/style-loader-lightningcss/src/index.js b/e2e/cases/css/inject-styles-lightningcss/src/index.js similarity index 100% rename from e2e/cases/css/style-loader-lightningcss/src/index.js rename to e2e/cases/css/inject-styles-lightningcss/src/index.js diff --git a/e2e/cases/css/style-loader/index.test.ts b/e2e/cases/css/inject-styles/index.test.ts similarity index 73% rename from e2e/cases/css/style-loader/index.test.ts rename to e2e/cases/css/inject-styles/index.test.ts index 55ca5d10b7..a6cce6cc9f 100644 --- a/e2e/cases/css/style-loader/index.test.ts +++ b/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(); + }, +); diff --git a/e2e/cases/css/style-loader/rsbuild.config.ts b/e2e/cases/css/inject-styles/rsbuild.config.ts similarity index 100% rename from e2e/cases/css/style-loader/rsbuild.config.ts rename to e2e/cases/css/inject-styles/rsbuild.config.ts diff --git a/e2e/cases/css/style-loader/src/App.css b/e2e/cases/css/inject-styles/src/App.css similarity index 100% rename from e2e/cases/css/style-loader/src/App.css rename to e2e/cases/css/inject-styles/src/App.css diff --git a/e2e/cases/css/style-loader/src/App.module.less b/e2e/cases/css/inject-styles/src/App.module.less similarity index 100% rename from e2e/cases/css/style-loader/src/App.module.less rename to e2e/cases/css/inject-styles/src/App.module.less diff --git a/e2e/cases/css/style-loader/src/App.module.scss b/e2e/cases/css/inject-styles/src/App.module.scss similarity index 100% rename from e2e/cases/css/style-loader/src/App.module.scss rename to e2e/cases/css/inject-styles/src/App.module.scss diff --git a/e2e/cases/css/style-loader/src/App.tsx b/e2e/cases/css/inject-styles/src/App.tsx similarity index 100% rename from e2e/cases/css/style-loader/src/App.tsx rename to e2e/cases/css/inject-styles/src/App.tsx diff --git a/e2e/cases/css/style-loader/src/index.ts b/e2e/cases/css/inject-styles/src/index.ts similarity index 100% rename from e2e/cases/css/style-loader/src/index.ts rename to e2e/cases/css/inject-styles/src/index.ts diff --git a/e2e/cases/css/style-loader/src/types.d.ts b/e2e/cases/css/inject-styles/src/types.d.ts similarity index 100% rename from e2e/cases/css/style-loader/src/types.d.ts rename to e2e/cases/css/inject-styles/src/types.d.ts diff --git a/e2e/cases/css/style-loader/tsconfig.json b/e2e/cases/css/inject-styles/tsconfig.json similarity index 100% rename from e2e/cases/css/style-loader/tsconfig.json rename to e2e/cases/css/inject-styles/tsconfig.json diff --git a/packages/core/src/plugins/css.ts b/packages/core/src/plugins/css.ts index bdc9de0908..c77036feb3 100644 --- a/packages/core/src/plugins/css.ts +++ b/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); }); } diff --git a/packages/core/src/plugins/minimize.ts b/packages/core/src/plugins/minimize.ts index 96e055d833..4c98f3a708 100644 --- a/packages/core/src/plugins/minimize.ts +++ b/packages/core/src/plugins/minimize.ts @@ -116,6 +116,7 @@ export const pluginMinimize = (): RsbuildPlugin => ({ const loaderOptions = getLightningCSSLoaderOptions( config, environment.browserslist, + true, ); const defaultOptions: LightningCssMinimizerRspackPluginOptions = {