From f61af88eb239b431e3303082be41f27e984f2c4d Mon Sep 17 00:00:00 2001 From: "gaoyuan.1226" Date: Tue, 14 May 2024 11:48:31 +0800 Subject: [PATCH 1/3] docs: localIdentName hashDigest has been supported in rspack mode --- website/docs/en/config/output/css-modules.mdx | 4 ---- website/docs/zh/config/output/css-modules.mdx | 4 ---- 2 files changed, 8 deletions(-) diff --git a/website/docs/en/config/output/css-modules.mdx b/website/docs/en/config/output/css-modules.mdx index 75ff138e82..d9b8a469e8 100644 --- a/website/docs/en/config/output/css-modules.mdx +++ b/website/docs/en/config/output/css-modules.mdx @@ -114,10 +114,6 @@ You can use the following template strings in `localIdentName`: - `[ext]` - extension with leading dot. - `[hash::]`: hash with hash settings. -:::tip -When using Rspack as the bundler, currently does not support custom ``. -::: - ### Example Set `localIdentName` to other value: diff --git a/website/docs/zh/config/output/css-modules.mdx b/website/docs/zh/config/output/css-modules.mdx index 02678777e9..2052f00db1 100644 --- a/website/docs/zh/config/output/css-modules.mdx +++ b/website/docs/zh/config/output/css-modules.mdx @@ -114,10 +114,6 @@ console.log(styles.header); - `[ext]` - 文件后缀名，包含点号。 - `[hash::]` - 带有哈希设置的哈希。 -:::tip -在使用 Rspack 作为打包工具时, 暂不支持配置 ``。 -::: - ### 示例 将 `localIdentName` 设置为其他值： From b6604f5662474368e274f275250728df454abaaa Mon Sep 17 00:00:00 2001 From: "gaoyuan.1226" Date: Tue, 14 May 2024 11:48:31 +0800 Subject: [PATCH 2/3] docs: localIdentName hashDigest has been supported in rspack mode --- website/docs/en/config/output/css-modules.mdx | 4 ---- website/docs/zh/config/output/css-modules.mdx | 4 ---- 2 files changed, 8 deletions(-) diff --git a/website/docs/en/config/output/css-modules.mdx b/website/docs/en/config/output/css-modules.mdx index 75ff138e82..d9b8a469e8 100644 --- a/website/docs/en/config/output/css-modules.mdx +++ b/website/docs/en/config/output/css-modules.mdx @@ -114,10 +114,6 @@ You can use the following template strings in `localIdentName`: - `[ext]` - extension with leading dot. - `[hash::]`: hash with hash settings. -:::tip -When using Rspack as the bundler, currently does not support custom ``. -::: - ### Example Set `localIdentName` to other value: diff --git a/website/docs/zh/config/output/css-modules.mdx b/website/docs/zh/config/output/css-modules.mdx index 02678777e9..2052f00db1 100644 --- a/website/docs/zh/config/output/css-modules.mdx +++ b/website/docs/zh/config/output/css-modules.mdx @@ -114,10 +114,6 @@ console.log(styles.header); - `[ext]` - 文件后缀名，包含点号。 - `[hash::]` - 带有哈希设置的哈希。 -:::tip -在使用 Rspack 作为打包工具时, 暂不支持配置 ``。 -::: - ### 示例 将 `localIdentName` 设置为其他值： From e67c04ba1562d06e12f908d3f74b5b3dbe4f64cc Mon Sep 17 00:00:00 2001 From: "gaoyuan.1226" Date: Tue, 14 May 2024 12:17:10 +0800 Subject: [PATCH 3/3] fix: update test case --- e2e/cases/css/css-modules/index.test.ts | 42 +++++++++++++++++++++++++ packages/core/tests/css.test.ts | 19 ----------- 2 files changed, 42 insertions(+), 19 deletions(-) diff --git a/e2e/cases/css/css-modules/index.test.ts b/e2e/cases/css/css-modules/index.test.ts index 364cc6f123..4c09ce7fdd 100644 --- a/e2e/cases/css/css-modules/index.test.ts +++ b/e2e/cases/css/css-modules/index.test.ts @@ -37,3 +37,45 @@ test('should compile CSS Modules follow by output.cssModules', async () => { /.the-a-class{color:red}.the-b-class-\w{6}{color:blue}.the-c-class{color:yellow}.the-d-class{color:green}/, ); }); + +test('should compile CSS Modules follow by output.cssModules custom localIdentName', async () => { + const rsbuild = await build({ + cwd: __dirname, + rsbuildConfig: { + output: { + cssModules: { + localIdentName: '[hash:base64:8]', + }, + }, + }, + }); + const files = await rsbuild.unwrapOutputJSON(); + + const content = + files[Object.keys(files).find((file) => file.endsWith('.css'))!]; + + expect(content).toMatch( + /\.the-a-class{color:red}\.\w{8}{color:blue}\.\w{8}{color:yellow}\.the-d-class{color:green}/, + ); +}); + +test('should compile CSS Modules follow by output.cssModules custom localIdentName - hashDigest', async () => { + const rsbuild = await build({ + cwd: __dirname, + rsbuildConfig: { + output: { + cssModules: { + localIdentName: '[hash:hex:4]', + }, + }, + }, + }); + const files = await rsbuild.unwrapOutputJSON(); + + const content = + files[Object.keys(files).find((file) => file.endsWith('.css'))!]; + + expect(content).toMatch( + /\.the-a-class{color:red}\.\w{4}{color:blue}\.\w{4}{color:yellow}\.the-d-class{color:green}/, + ); +}); diff --git a/packages/core/tests/css.test.ts b/packages/core/tests/css.test.ts index 6f90dff6a7..23101544f7 100644 --- a/packages/core/tests/css.test.ts +++ b/packages/core/tests/css.test.ts @@ -125,25 +125,6 @@ describe('plugin-css', () => { ); }); - it('should ignore hashDigest when custom cssModules.localIdentName', async () => { - const rsbuild = await createStubRsbuild({ - plugins: [pluginCss()], - rsbuildConfig: { - output: { - cssModules: { - localIdentName: '[hash:base64:5]', - }, - }, - }, - }); - - const bundlerConfigs = await rsbuild.initConfigs(); - - expect(JSON.stringify(bundlerConfigs[0])).toContain( - '"localIdentName":"[hash:base64:5]"', - ); - }); - it('should use custom cssModules rule when using output.cssModules config', async () => { const rsbuild = await createStubRsbuild({ plugins: [pluginCss()],