fix(core): improve builtin CSS compatibility

Author: intellild

e2e/README.md

@@ -17,6 +17,9 @@ pnpm e2e
 
 # Run specific test case, such as "css"
 pnpm e2e css
+
+# Run CSS cases with pluginRspackBuiltinCss
+pnpm e2e:css-builtin
 ```
 
 ## Debugging

e2e/cases/css/rspack-builtin-css/index.test.ts

@@ -17,8 +17,8 @@ test('should use Rspack built-in CSS', async ({ build }) => {
   rsbuild.expectNoLog(COMPILE_WARNING);
 });
 
-test('should use built-in style injection', async ({ build }) => {
-  const rsbuild = await build({
+test('should use built-in style injection', async ({ page, buildPreview }) => {
+  const rsbuild = await buildPreview({
     config: {
       output: {
         injectStyles: true,
@@ -29,6 +29,18 @@ test('should use built-in style injection', async ({ build }) => {
   const files = rsbuild.getDistFiles();
   const content = getFileContent(files, 'index.js');
   expect(content).toContain('color:red');
+  await expect
+    .poll(() =>
+      page.evaluate(
+        () =>
+          (
+            globalThis as typeof globalThis & {
+              testStyles: { less: string; sass: string };
+            }
+          ).testStyles,
+      ),
+    )
+    .toMatchObject({ less: expect.any(String), sass: expect.any(String) });
 
   // should have no warnings
   rsbuild.expectNoLog(COMPILE_WARNING);

e2e/helper/jsApi.ts

@@ -22,7 +22,9 @@ const updateConfigForTest = async (originalConfig: RsbuildConfig, cwd: string =
   });
   const cwdPath = toPosixPath(cwd);
   const useRspackBuiltinCss =
-    cwdPath.includes('/e2e/cases/css/') && !cwdPath.endsWith('/rspack-builtin-css');
+    process.env.RSBUILD_E2E_RSPACK_BUILTIN_CSS === '1' &&
+    cwdPath.includes('/e2e/cases/css/') &&
+    !cwdPath.endsWith('/rspack-builtin-css');
 
   const baseConfig: RsbuildConfig = {
     ...(useRspackBuiltinCss ? { plugins: [pluginRspackBuiltinCss()] } : {}),

package.json

@@ -11,6 +11,7 @@
     "check-spell": "pnpx cspell && heading-case",
     "doc": "cd website && node --run dev",
     "e2e": "cd ./e2e && pnpm e2e",
+    "e2e:css-builtin": "cross-env RSBUILD_E2E_RSPACK_BUILTIN_CSS=1 pnpm e2e css",
     "format": "oxfmt . && heading-case --write",
     "format:check": "oxfmt . --check",
     "lint": "rslint --type-check",

packages/core/src/plugins/rspackBuiltinCss.ts

@@ -54,6 +54,37 @@ const getExportsConvention = (
   return conventionMap[convention] ?? 'camel-case';
 };
 
+const LOCAL_IDENT_HASH_REGEX =
+  /\[(?:([^:\]]+):)?(?:(hash|contenthash|fullhash))(?::([a-z]+\d*))?(?::(\d+))?\]/i;
+const LOCAL_IDENT_HASH_REGEX_GLOBAL =
+  /\[(?:([^:\]]+):)?(?:hash|contenthash|fullhash)(?::([a-z]+\d*))?(?::(\d+))?\]/gi;
+
+const getLocalIdentOptions = (
+  localIdentName: string | undefined,
+): Partial<Rspack.CssModuleGeneratorOptions> => {
+  if (localIdentName === undefined) {
+    return {};
+  }
+
+  const match = localIdentName.match(LOCAL_IDENT_HASH_REGEX);
+  if (!match) {
+    return { localIdentName };
+  }
+
+  const [, hashFunction, , hashDigest, hashDigestLength] = match;
+
+  return {
+    localIdentName: localIdentName.replace(
+      LOCAL_IDENT_HASH_REGEX_GLOBAL,
+      (_match, _hashFunction, currentHashName) =>
+        currentHashName === 'fullhash' ? '[fullhash]' : '[hash]',
+    ),
+    ...(hashFunction ? { localIdentHashFunction: hashFunction } : {}),
+    ...(hashDigest ? { localIdentHashDigest: hashDigest } : {}),
+    ...(hashDigestLength ? { localIdentHashDigestLength: Number(hashDigestLength) } : {}),
+  };
+};
+
 const getResolveConfig = (rule: RspackChain.Rule<unknown>) =>
   (
     rule.resolve as RspackChain.Rule<unknown>['resolve'] & {
@@ -111,11 +142,17 @@ const applyCssModuleConfig = ({
   };
   const generatorOptions: Rspack.CssModuleGeneratorOptions = {
     ...options.generator,
+    // Rspack currently generates an invalid `exports` reference when style exports
+    // with default CSS Module exports are concatenated. CommonJS output prevents
+    // concatenation for these modules while preserving Rsbuild's default exports.
+    ...(config.output.injectStyles &&
+    !cssModules.namedExport &&
+    options.generator?.esModule === undefined
+      ? { esModule: false }
+      : {}),
     exportsOnly: !emitCss,
     exportsConvention: getExportsConvention(cssModules.exportLocalsConvention),
-    ...(cssModules.localIdentName === undefined
-      ? {}
-      : { localIdentName: cssModules.localIdentName }),
+    ...getLocalIdentOptions(cssModules.localIdentName),
   };
 
   chain.module.parser.merge({

packages/core/tests/css.test.ts

@@ -164,6 +164,51 @@ describe('plugin-rspack-builtin-css', () => {
     expect(rspackConfig.module?.generator?.['css/auto']).not.toHaveProperty('localIdentName');
   });
 
+  it('should preserve default CSS Module exports when injecting styles', async () => {
+    const rsbuild = await createRsbuild({
+      config: {
+        output: {
+          injectStyles: true,
+        },
+        plugins: [pluginRspackBuiltinCss()],
+      },
+    });
+    rstest.spyOn(rsbuild.logger, 'warn').mockImplementation(() => {});
+
+    const [rspackConfig] = await rsbuild.initConfigs();
+
+    expect(rspackConfig.module?.parser?.['css/auto']).toMatchObject({
+      exportType: 'style',
+      namedExports: false,
+    });
+    expect(rspackConfig.module?.generator?.['css/auto']).toMatchObject({
+      esModule: false,
+    });
+  });
+
+  it('should translate hash options from cssModules.localIdentName', async () => {
+    const rsbuild = await createRsbuild({
+      config: {
+        output: {
+          cssModules: {
+            localIdentName: '[name]__[local]--[sha256:hash:hex:4]',
+          },
+        },
+        plugins: [pluginRspackBuiltinCss()],
+      },
+    });
+    rstest.spyOn(rsbuild.logger, 'warn').mockImplementation(() => {});
+
+    const [rspackConfig] = await rsbuild.initConfigs();
+
+    expect(rspackConfig.module?.generator?.['css/auto']).toMatchObject({
+      localIdentHashDigest: 'hex',
+      localIdentHashDigestLength: 4,
+      localIdentHashFunction: 'sha256',
+      localIdentName: '[name]__[local]--[hash]',
+    });
+  });
+
   it('should warn when CSS ?url imports are unsupported', async () => {
     const rsbuild = await createRsbuild({
       config: {