This is a minimal reproduction repository for an issue with Rspack and css modules. When using native css modules support in rspack and changing the exportsConvention to camel-case, Rspack doesn't detect that camelCase referenced class names and removes them from the generated css bundle.

Rspack uses the LightningCssMinimizerRspackPlugin to minimize css.

LightningCssMinimizerRspackPlugin has a neat feature where it receives data from rspack about unused css classes for css_modules and removes those that aren't used by any JS files from the final css bundle.

So if you have a css module like this:

/* src/style.module.css */
.header-title {
  color: red;
}

.header-subtitle {
  color: blue;
}

// src/index.mjs
import * as styles from "./style.module.css";

console.log(styles["header-title"]);

The final css bundle will contain only the .header-title class, because .header-subtitle is not used.

However, if you change the exportLocalsConvention to camel-case in the rspack config then css classes are exported both in camelCase format and the original format:

// src/index.mjs
import * as styles from "./style.module.css";

console.log(styles.headerTitle);
// console.log(styles["header-title"]); this also works

However, in this case, the LightningCssMinimizerRspackPlugin doesn't detect that headerTitle is referencing .header-title class and think it's unused and removes the css class from the final css bundle.

1. Clone this repository
2. Run pnpm install
3. Run pnpm build
4. Open dist/main.css and see that it's empty.
5. Uncomment the line console.log("Hello, World!", styles["header-title"]); in src/index.js
6. Run pnpm build again
7. Open dist/main.css and see that it now contains the .header-title class.