Support exportLocalsConvention for CSS Modules in Turbopack

[johndalvik]

Goals

1. Allow configuring how CSS module class names are exported to JavaScript in Turbopack (camelCase, dashesOnly, etc.)
2. Reach parity with webpack's css-loader modules.exportLocalsConvention option
3. Unblock migration to Turbopack for projects using kebab-case CSS with camelCase JS imports

Non-Goals

1. Changing the default behavior — asIs remains the default for backwards compatibility
2. Modifying the webpack codepath — it already has its own implementation via css-loader
3. Supporting function-based conventions (webpack's css-loader also accepts a function, but string values cover all practical use cases)

Background

Webpack's css-loader has supported modules.exportLocalsConvention for years. Many projects — especially those using SCSS — write kebab-case in stylesheets and camelCase in JavaScript:

/* styles.module.css */
.main-content { color: red; }
.nav-bar { background: blue; }

import styles from './styles.module.css'
styles.mainContent // works with webpack's camelCaseOnly convention
styles.mainContent // undefined with Turbopack — only styles["main-content"] works

Turbopack hardcodes exports as-is with no configuration option, which blocks adoption for any project relying on this pattern.

Current alternatives:

• Fall back to webpack for dev — defeats Turbopack's purpose
• Rewrite all CSS to camelCase class names — impractical for large codebases, breaks SCSS conventions
• Use bracket notation everywhere (styles["main-content"]) — poor DX, no autocomplete

The webpack implementation already exists in the Next.js repo:

• packages/next/src/build/webpack/loaders/lightningcss-loader/src/codegen.ts — convention switch
• packages/next/src/build/webpack/loaders/css-loader/src/camelcase.ts — camelCase transform
• packages/next/src/build/webpack/loaders/css-loader/src/utils.ts — dashesCamelCase transform

Proposal

Add a turbopack.cssModules.exportLocalsConvention option to next.config.js:

module.exports = {
  turbopack: {
    cssModules: {
      exportLocalsConvention: 'camelCaseOnly'
    }
  }
}

Supporting all 5 conventions matching webpack's css-loader:

Value	.main-content exports
asIs (default)	styles["main-content"]
camelCase	styles["main-content"] + styles.mainContent
camelCaseOnly	styles.mainContent
dashes	styles["main-content"] + styles.mainContent
dashesOnly	styles.mainContent

I have a working implementation ready as a PR. Changes span:

• Rust: CssModuleExportConvention enum and transform functions in turbopack-css, threaded through turbopack and next-core crates
• Config: TypeScript types in config-shared.ts, zod schema in config-schema.ts
• Tests: e2e test verifying camelCaseOnly in Turbopack
• Docs: Updated turbopack.mdx with CSS Modules section

[johndalvik]

Pull request can be found here
#91839