[Bug]: CSS Modules not being extracted

[elliotwestlake]

Version

System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 59.00 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 126.0.6478.114
    Safari: 17.1
  npmPackages:
    @rsbuild/core: ^0.7.9 => 0.7.9 
    @rsbuild/plugin-react: ^0.7.9 => 0.7.9

Details

It seems that rsbuild is not extracting css module styles correctly for animations.

I seem to be able to get the animations working if I name styles using kebab-case instead of camelCase

Reproduce link

https://github.com/elliotwestlake/rsbuild-css-modules

Reproduce Steps

1. pnpm dev
2. go to browser and see styles not loaded.

I have included a working example for vite

1. pnpm dev:vite
2. go to browser and see styles have loaded.

[xc2]

Why does it happen

rsbuild/rspack/css-loader will transform export names to camel case by default when named exports is not on.

so .animateDog and @keyframes animate-dog will share single export name animateDog and the latter overrides the former - that is to say, styles.animateDog refers to the keyframes animate-dog.

How to escape

There's a way to disable the name transform:

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [pluginReact()],
  html: {
    template: "./index.html",
  },
  output: {
    cssModules: {
      // configure `exportLocalsConvention` to `asIs` to disable the name convertion
      exportLocalsConvention: 'asIs'
    }
  }
});

[elliotwestlake]

Thank you! That makes a lot of sense!