diff --git a/.changeset/seven-foxes-read.md b/.changeset/seven-foxes-read.md new file mode 100644 index 0000000000..24fadf62da --- /dev/null +++ b/.changeset/seven-foxes-read.md @@ -0,0 +1,5 @@ +--- +"@lynx-js/react-rsbuild-plugin": patch +--- + +Enable CSS minification for scoped CSS. diff --git a/packages/rspeedy/plugin-react/src/css.ts b/packages/rspeedy/plugin-react/src/css.ts index 0b3c055a22..ee37380d3b 100644 --- a/packages/rspeedy/plugin-react/src/css.ts +++ b/packages/rspeedy/plugin-react/src/css.ts @@ -151,11 +151,6 @@ export function applyCSS( .end() .end() - if (enableRemoveCSSScope !== true) { - // TODO: enable CSS minimizer when `LightningCssMinimizerRspackPlugin` supports custom parser options. - chain.optimization.minimizers.delete(CHAIN_ID.MINIMIZER.CSS) - } - // We add `sideEffects: false` to all Scoped CSS Modules. // Since there is no need to emit scoped CSS when the CSS Modules is not used. chain diff --git a/packages/rspeedy/plugin-react/test/css.test.ts b/packages/rspeedy/plugin-react/test/css.test.ts index b38ff017b8..96911ab801 100644 --- a/packages/rspeedy/plugin-react/test/css.test.ts +++ b/packages/rspeedy/plugin-react/test/css.test.ts @@ -12,13 +12,14 @@ import type { PostCSSLoaderOptions, Rspack, } from '@rsbuild/core' -import { describe, expect, test } from 'vitest' +import { describe, expect, test, vi } from 'vitest' import { CssExtractRspackPlugin, CssExtractWebpackPlugin, } from '@lynx-js/css-extract-webpack-plugin' import { LAYERS } from '@lynx-js/react-webpack-plugin' +import { createRspeedy } from '@lynx-js/rspeedy' import { getLoaderOptions } from './getLoaderOptions.js' import { pluginStubRspeedyAPI } from './stub-rspeedy-api.plugin.js' @@ -582,4 +583,47 @@ describe('Plugins - CSS', () => { expect(config).not.toHaveLoader('builtin:lightningcss-loader') }) }) + + describe('minification', () => { + test('default', async () => { + vi.stubEnv('NODE_ENV', 'production') + const rspeedy = await createRspeedy({ + rspeedyConfig: { + plugins: [pluginReactLynx(), pluginStubRspeedyAPI()], + }, + }) + + const [config] = await rspeedy.initConfigs() + + expect( + config?.optimization?.minimizer?.find(minimizer => + minimizer && minimizer !== '...' + && minimizer.constructor.name === 'CssMinimizerPlugin' + ), + ).toBeDefined() + }) + + test('with enableRemoveCSSScope: false', async () => { + vi.stubEnv('NODE_ENV', 'production') + const rspeedy = await createRspeedy({ + rspeedyConfig: { + plugins: [ + pluginReactLynx({ + enableRemoveCSSScope: false, + }), + pluginStubRspeedyAPI(), + ], + }, + }) + + const [config] = await rspeedy.initConfigs() + + expect( + config?.optimization?.minimizer?.find(minimizer => + minimizer && minimizer !== '...' + && minimizer.constructor.name === 'CssMinimizerPlugin' + ), + ).toBeDefined() + }) + }) })