shakapacker 9.0.0.beta.8 → 9.0.0.beta.10

data/README.md

@@ -1,13 +1,14 @@
-# Shakapacker (v8)
+# Shakapacker (v9)
 ---
 
-_🚀 Shakapacker 9.0.0.beta.2 supports [Rspack](https://rspack.rs/)! 10x faster than webpack!_
+_🚀 Shakapacker 9 supports [Rspack](https://rspack.rs/)! 10x faster than webpack!_
 
 ---
 
 _Official, actively maintained successor to [rails/webpacker](https://github.com/rails/webpacker). ShakaCode stands behind the long-term maintenance and development of this project for the Rails community._
 
 * ⚠️ See the [6-stable](https://github.com/shakacode/shakapacker/tree/6-stable) branch for Shakapacker v6.x code and documentation. :warning:
+* **See [V9 Upgrade](./docs/v9_upgrade.md) for upgrading from the v8 release.**
 * See [V8 Upgrade](./docs/v8_upgrade.md) for upgrading from the v7 release.
 * See [V7 Upgrade](./docs/v7_upgrade.md) for upgrading from the v6 release.
 * See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases.

data/TODO_v9.md

@@ -20,12 +20,15 @@ Align with Next.js and modern tooling by using named exports:
   options: {
     modules: {
       namedExport: true,
-      exportLocalsConvention: 'camelCase'
+      exportLocalsConvention: 'camelCaseOnly'  // Must be 'camelCaseOnly' or 'dashesOnly' with namedExport: true
     }
   }
 }
 ```
 
+**Note:** Using `exportLocalsConvention: 'camelCase'` with `namedExport: true` will cause a build error.
+css-loader only allows `'camelCaseOnly'` or `'dashesOnly'` when named exports are enabled.
+
 2. **Update TypeScript types:**
 - Ensure proper typing for CSS modules with named exports
 - May need to update or generate `.d.ts` files for CSS modules
@@ -81,4 +84,4 @@ Align with Next.js and modern tooling by using named exports:
 ### Test Infrastructure
 - Successfully implemented dual bundler support (webpack/rspack)
 - test-bundler script working well with status command
-- Consider adding more comprehensive tests for both bundlers
+- Consider adding more comprehensive tests for both bundlers

data/conductor-setup.sh

@@ -35,6 +35,18 @@ $BUNDLE_CMD install
 echo "📦 Installing JavaScript dependencies..."
 yarn install
 
+# Set up Husky git hooks
+echo "🪝 Setting up Husky git hooks..."
+npx husky
+if [ ! -f .husky/pre-commit ]; then
+    echo "Creating pre-commit hook..."
+    cat > .husky/pre-commit << 'EOF'
+#!/usr/bin/env sh
+npx lint-staged
+EOF
+    chmod +x .husky/pre-commit
+fi
+
 # Copy environment files if they exist in root
 if [ -n "${CONDUCTOR_ROOT_PATH:-}" ]; then
     if [ -f "$CONDUCTOR_ROOT_PATH/.env" ]; then

data/docs/css-modules-export-mode.md

@@ -32,6 +32,55 @@ import * as styles from './Foo.module.css';
 - Aligns with modern JavaScript module standards
 - Automatically converts kebab-case to camelCase (`my-button` → `myButton`)
 
+### Important: exportLocalsConvention with namedExport
+
+When `namedExport: true` is enabled (v9 default), css-loader requires `exportLocalsConvention` to be either `'camelCaseOnly'` or `'dashesOnly'`.
+
+**The following will cause a build error:**
+```js
+modules: {
+  namedExport: true,
+  exportLocalsConvention: 'camelCase'  // ❌ ERROR: incompatible with namedExport: true
+}
+```
+
+**Error message:**
+```
+"exportLocalsConvention" with "camelCase" value is incompatible with "namedExport: true" option
+```
+
+**Correct v9 configuration:**
+```js
+modules: {
+  namedExport: true,
+  exportLocalsConvention: 'camelCaseOnly'  // ✅ Correct - only camelCase exported
+}
+```
+
+**exportLocalsConvention options with namedExport:**
+
+When `namedExport: true`, you can use:
+- `'camelCaseOnly'` (v9 default): Exports ONLY the camelCase version (e.g., only `myButton`)
+- `'dashesOnly'`: Exports ONLY the original kebab-case version (e.g., only `my-button`)
+
+**Not compatible with namedExport: true:**
+- `'camelCase'`: Exports both versions (both `my-button` and `myButton`) - only works with `namedExport: false` (v8 behavior)
+
+**Configuration Quick Reference:**
+
+| namedExport | exportLocalsConvention | `.my-button` exports | Use Case | Compatible? |
+|-------------|------------------------|---------------------|----------|-------------|
+| `true` | `'camelCaseOnly'` | `myButton` | JavaScript conventions | ✅ Valid |
+| `true` | `'dashesOnly'` | `'my-button'` | Preserve CSS naming | ✅ Valid |
+| `false` | `'camelCase'` | Both `myButton` AND `'my-button'` | v8 compatibility | ✅ Valid |
+| `false` | `'asIs'` | `'my-button'` | No transformation | ✅ Valid |
+| `true` | `'camelCase'` | - | - | ❌ Build Error |
+
+**When to use each option:**
+- Use `'camelCaseOnly'` if you prefer standard JavaScript naming conventions
+- Use `'dashesOnly'` if you want to preserve your CSS class names exactly as written
+- Use `'camelCase'` (with `namedExport: false`) only if you need both versions available
+
 ## Version 8.x and Earlier Behavior
 
 In Shakapacker v8 and earlier, the default behavior was to use a **default export object**:
@@ -244,7 +293,9 @@ import { bright, container, button } from './Component.module.css';
 
 #### 3. Handle Kebab-Case Class Names
 
-With v9's `exportLocalsConvention: 'camelCase'`, kebab-case class names are automatically converted:
+**Option A: Use camelCase (v9 default)**
+
+With `exportLocalsConvention: 'camelCaseOnly'`, kebab-case class names are automatically converted:
 
 ```css
 /* styles.module.css */
@@ -253,13 +304,35 @@ With v9's `exportLocalsConvention: 'camelCase'`, kebab-case class names are auto
 ```
 
 ```js
-// v9 imports (camelCase conversion)
+// v9 default - camelCase conversion
 import { myButton, primaryColor } from './styles.module.css';
+<button className={myButton} />
+```
 
-// Use the camelCase versions in your components
+**Option B: Keep kebab-case with 'dashesOnly'**
+
+If you prefer to preserve the original kebab-case names, configure your webpack to use `'dashesOnly'`:
+
+```js
+// config/webpack/commonWebpackConfig.js
+modules: {
+  namedExport: true,
+  exportLocalsConvention: 'dashesOnly'
+}
+```
+
+```js
+// With dashesOnly - preserve kebab-case
+import * as styles from './styles.module.css';
+<button className={styles['my-button']} />
+
+// Or with aliasing:
+import { 'my-button': myButton } from './styles.module.css';
 <button className={myButton} />
 ```
 
+**Note:** With both `'camelCaseOnly'` and `'dashesOnly'`, only one version of each class name is exported. The original kebab-case name is NOT available with `'camelCaseOnly'`, and the camelCase version is NOT available with `'dashesOnly'`.
+
 #### 4. Using a Codemod for Large Codebases
 
 For large codebases, you can create a codemod to automate the migration:
@@ -298,12 +371,12 @@ npx jscodeshift -t css-modules-v9-migration.js src/
 
 ## Version Comparison
 
-| Feature | v8 (and earlier) | v9 | 
-|---------|-----------------|----| 
+| Feature | v8 (and earlier) | v9 |
+|---------|-----------------|----|
 | Default behavior | Default export object | Named exports |
 | Import syntax | `import styles from '...'` | `import { className } from '...'` |
 | Class reference | `styles.className` | `className` |
-| Export convention | `asIs` (no transformation) | `camelCase` |
+| Export convention | `asIs` (no transformation) | `camelCaseOnly` |
 | TypeScript warnings | May show warnings | No warnings |
 | Tree-shaking | Limited | Optimized |
 
@@ -368,13 +441,34 @@ Then search for `css-loader` options in the generated JSON file.
 
 ## Troubleshooting
 
+### Build Error: exportLocalsConvention Incompatible with namedExport
+
+If you see this error during build:
+```
+"exportLocalsConvention" with "camelCase" value is incompatible with "namedExport: true" option
+```
+
+**Cause:** Your webpack configuration has `namedExport: true` with `exportLocalsConvention: 'camelCase'`.
+
+**Solution:** Change `exportLocalsConvention` to `'camelCaseOnly'` or `'dashesOnly'`:
+
+```js
+// config/webpack/commonWebpackConfig.js or similar
+modules: {
+  namedExport: true,
+  exportLocalsConvention: 'camelCaseOnly'  // or 'dashesOnly'
+}
+```
+
+Alternatively, if you need the `'camelCase'` option (both original and camelCase exports), you must revert to v8 behavior by setting `namedExport: false` as shown in the "Reverting to Default Exports" section above.
+
 ### CSS Classes Not Applying
 
 If your CSS classes aren't applying after the upgrade:
 
 1. **Check import syntax**: Ensure you're using the correct import style for your configuration
 2. **Verify class names**: Use `console.log` to see available classes
-3. **Check camelCase conversion**: Kebab-case names are converted to camelCase in v9
+3. **Check camelCase conversion**: Kebab-case names are converted to camelCase in v9 with `'camelCaseOnly'`
 4. **Rebuild webpack**: Clear cache and rebuild: `rm -rf tmp/cache && bin/shakapacker`
 
 ### TypeScript Support
@@ -415,4 +509,4 @@ The configuration changes should not impact build performance significantly. If
 - **v8 default**: Default export object with no conversion
 - **Migration path**: Update imports or override configuration
 - **Benefits of v9**: No warnings, better tree-shaking, explicit dependencies
-- **Keeping v8 behavior**: Override css-loader configuration as shown above
+- **Keeping v8 behavior**: Override css-loader configuration as shown above

data/docs/v9_upgrade.md

@@ -9,30 +9,69 @@ This guide outlines new features, breaking changes, and migration steps for upgr
 Shakapacker v9 includes TypeScript definitions for better IDE support and type safety.
 
 - **No breaking changes** - JavaScript configs continue to work
-- **Optional** - Use TypeScript only if you want it  
+- **Optional** - Use TypeScript only if you want it
 - **Type safety** - Catch configuration errors at compile-time
 - **IDE support** - Full autocomplete for all options
 
 See the [TypeScript Documentation](./typescript.md) for usage examples.
 
+### NODE_ENV Default Behavior Fixed
+
+**What changed:** NODE_ENV now intelligently defaults based on RAILS_ENV instead of always defaulting to "production".
+
+**New behavior:**
+
+- When `RAILS_ENV=production` → `NODE_ENV` defaults to `"production"`
+- When `RAILS_ENV=development` or unset → `NODE_ENV` defaults to `"development"`
+- When `RAILS_ENV` is any other value (test, staging, etc.) → `NODE_ENV` defaults to `"development"`
+
+**Benefits:**
+
+- **Dev server "just works"** - No need to explicitly set NODE_ENV when running the development server
+- **Correct configuration loaded** - Development server now properly loads the development configuration from shakapacker.yml
+- **Fixes port issues** - Dev server uses the configured port (e.g., 3035) instead of defaulting to 8080
+- **Fixes 404 errors** - Assets load correctly without requiring manual NODE_ENV configuration
+
+**No action required** - This change improves the default behavior and requires no migration.
+
+**If you previously worked around this bug**, you can now remove these workarounds:
+
+- Remove `NODE_ENV=development` from your `.env`, `.env.development`, or `.env.local` files
+- Remove `NODE_ENV=development` from your `docker-compose.yml` or Dockerfile
+- Remove custom scripts that set NODE_ENV before running the dev server
+- Remove `NODE_ENV=development` from your `bin/dev` or Procfile.dev
+
 ## Breaking Changes
 
 ### 1. CSS Modules Configuration Changed to Named Exports
 
-**What changed:** CSS Modules are now configured with `namedExport: true` and `exportLocalsConvention: 'camelCase'` by default, aligning with Next.js and modern tooling standards.
+**What changed:** CSS Modules are now configured with `namedExport: true` and `exportLocalsConvention: 'camelCaseOnly'` by default, aligning with Next.js and modern tooling standards.
+
+> **Important:** When `namedExport: true` is enabled, css-loader requires `exportLocalsConvention` to be either `'camelCaseOnly'` or `'dashesOnly'`. Using `'camelCase'` will cause a build error: `"exportLocalsConvention" with "camelCase" value is incompatible with "namedExport: true" option`.
+
+**Quick Reference: Configuration Options**
+
+| Configuration   | namedExport | exportLocalsConvention | CSS: `.my-button` | Export Available                  | Works With        |
+| --------------- | ----------- | ---------------------- | ----------------- | --------------------------------- | ----------------- |
+| **v9 Default**  | `true`      | `'camelCaseOnly'`      | `.my-button`      | `myButton` only                   | ✅ Named exports  |
+| **Alternative** | `true`      | `'dashesOnly'`         | `.my-button`      | `'my-button'` only                | ✅ Named exports  |
+| **v8 Style**    | `false`     | `'camelCase'`          | `.my-button`      | Both `myButton` AND `'my-button'` | ✅ Default export |
+| **❌ Invalid**  | `true`      | `'camelCase'`          | -                 | -                                 | ❌ Build Error    |
 
 **JavaScript Projects:**
+
 ```js
 // Before (v8)
-import styles from './Component.module.css';
-<button className={styles.button} />
+import styles from "./Component.module.css"
+;<button className={styles.button} />
 
 // After (v9)
-import { button } from './Component.module.css';
-<button className={button} />
+import { button } from "./Component.module.css"
+;<button className={button} />
 ```
 
 **TypeScript Projects:**
+
 ```typescript
 // Before (v8)
 import styles from './Component.module.css';
@@ -46,6 +85,7 @@ import * as styles from './Component.module.css';
 **Migration Options:**
 
 1. **Update your code** (Recommended):
+
    - JavaScript: Change to named imports (`import { className }`)
    - TypeScript: Change to namespace imports (`import * as styles`)
    - Kebab-case class names are automatically converted to camelCase
@@ -55,6 +95,7 @@ import * as styles from './Component.module.css';
    - This gives you time to migrate gradually
 
 **Benefits of the change:**
+
 - Eliminates webpack/TypeScript warnings
 - Better tree-shaking of unused CSS classes
 - More explicit about which classes are used
@@ -65,15 +106,17 @@ import * as styles from './Component.module.css';
 **What changed:** The configuration option has been renamed to better reflect its purpose.
 
 **Before (v8):**
+
 ```yml
 # config/shakapacker.yml
-webpack_loader: 'babel'
+webpack_loader: "babel"
 ```
 
 **After (v9):**
+
 ```yml
 # config/shakapacker.yml
-javascript_transpiler: 'babel'
+javascript_transpiler: "babel"
 ```
 
 **Note:** The old `webpack_loader` option is deprecated but still supported with a warning.
@@ -85,38 +128,48 @@ javascript_transpiler: 'babel'
 **Why:** SWC is 20x faster than Babel while maintaining compatibility with most JavaScript and TypeScript code.
 
 **Impact on existing projects:**
+
 - Your project will continue using Babel if you already have babel packages in package.json
 - To switch to SWC for better performance, see migration options below
 
 **Impact on new projects:**
+
 - New installations will use SWC by default
 - Babel dependencies won't be installed unless explicitly configured
 
 ### Migration Options
 
 #### Option 1 (Recommended): Switch to SWC
+
 ```yml
 # config/shakapacker.yml
-javascript_transpiler: 'swc'
+javascript_transpiler: "swc"
 ```
+
 Then install SWC:
+
 ```bash
 npm install @swc/core swc-loader
 ```
 
 #### Option 2: Keep using Babel
+
 ```yml
 # config/shakapacker.yml
-javascript_transpiler: 'babel'
+javascript_transpiler: "babel"
 ```
+
 No other changes needed - your existing babel packages will continue to work.
 
 #### Option 3: Use esbuild
+
 ```yml
 # config/shakapacker.yml
-javascript_transpiler: 'esbuild'
+javascript_transpiler: "esbuild"
 ```
+
 Then install esbuild:
+
 ```bash
 npm install esbuild esbuild-loader
 ```
@@ -127,7 +180,7 @@ npm install esbuild esbuild-loader
 
 ```yml
 # config/shakapacker.yml
-assets_bundler: 'rspack'  # or 'webpack' (default)
+assets_bundler: "rspack" # or 'webpack' (default)
 ```
 
 ### 5. All Peer Dependencies Now Optional
@@ -135,16 +188,19 @@ assets_bundler: 'rspack'  # or 'webpack' (default)
 **What changed:** All peer dependencies are now marked as optional via `peerDependenciesMeta`.
 
 **Benefits:**
+
 - **No installation warnings** - You won't see peer dependency warnings for packages you don't use
 - **Install only what you need** - Using webpack? Don't install rspack. Using SWC? Don't install Babel.
 - **Clear version constraints** - When you do install a package, version compatibility is still enforced
 
 **What this means for you:**
+
 - **Existing projects:** No changes needed. Your existing dependencies will continue to work.
 - **New projects:** The installer only adds the packages you actually need based on your configuration.
 - **Package manager behavior:** npm, yarn, and pnpm will no longer warn about missing peer dependencies.
 
 **Example:** If you're using SWC with webpack, you only need:
+
 ```json
 {
   "dependencies": {
@@ -157,6 +213,7 @@ assets_bundler: 'rspack'  # or 'webpack' (default)
   }
 }
 ```
+
 You won't get warnings about missing Babel, Rspack, or esbuild packages.
 
 ## Migration Steps
@@ -175,22 +232,22 @@ yarn upgrade shakapacker@^9.0.0
 
 ```js
 // Find imports like this:
-import styles from './styles.module.css';
+import styles from "./styles.module.css"
 
 // Replace with named imports:
-import { className1, className2 } from './styles.module.css';
+import { className1, className2 } from "./styles.module.css"
 ```
 
 #### Update TypeScript definitions:
 
 ```typescript
 // Update your CSS module type definitions
-declare module '*.module.css' {
+declare module "*.module.css" {
   // With namedExport: true, css-loader generates individual named exports
   // TypeScript can't know the exact names at compile time, so we declare
   // a module with any number of string exports
-  const classes: { readonly [key: string]: string };
-  export = classes;
+  const classes: { readonly [key: string]: string }
+  export = classes
   // Note: This allows 'import * as styles' but not 'import styles from'
   // because css-loader with namedExport: true doesn't generate a default export
 }
@@ -198,19 +255,45 @@ declare module '*.module.css' {
 
 ### Step 3: Handle Kebab-Case Class Names
 
-v9 automatically converts kebab-case to camelCase:
+v9 automatically converts kebab-case to camelCase with `exportLocalsConvention: 'camelCaseOnly'`:
 
 ```css
 /* styles.module.css */
-.my-button { }
-.primary-color { }
+.my-button {
+}
+.primary-color {
+}
+```
+
+```js
+// v9 default - camelCase conversion
+import { myButton, primaryColor } from "./styles.module.css"
 ```
 
+**Alternative: Keep kebab-case names with 'dashesOnly'**
+
+If you prefer to keep kebab-case names in JavaScript, you can override the configuration to use `'dashesOnly'`:
+
+```js
+// config/webpack/commonWebpackConfig.js
+modules: {
+  namedExport: true,
+  exportLocalsConvention: 'dashesOnly'  // Keep original kebab-case names
+}
+```
+
+Then use the original kebab-case names in your imports:
+
 ```js
-// v9 imports
-import { myButton, primaryColor } from './styles.module.css';
+// With dashesOnly configuration
+import { 'my-button': myButton, 'primary-color': primaryColor } from './styles.module.css';
+// or access as properties
+import * as styles from './styles.module.css';
+const buttonClass = styles['my-button'];
 ```
 
+**Note:** With `'camelCaseOnly'` (default) or `'dashesOnly'`, only one version is exported. If you need both the original and camelCase versions, you would need to use `'camelCase'` instead, but this requires `namedExport: false` (v8 behavior). See the [CSS Modules Export Mode documentation](./css-modules-export-mode.md) for details on reverting to v8 behavior.
+
 ### Step 4: Update Configuration Files
 
 If you have `webpack_loader` in your configuration:
@@ -221,7 +304,7 @@ If you have `webpack_loader` in your configuration:
 # webpack_loader: 'babel'
 
 # NEW:
-javascript_transpiler: 'babel'
+javascript_transpiler: "babel"
 ```
 
 ### Step 5: Run Tests
@@ -253,35 +336,60 @@ Update your global type definitions as shown in Step 2.
 
 If you see warnings about CSS module exports, ensure you've updated all imports to use named exports or have properly configured the override.
 
+### Build Error: exportLocalsConvention Incompatible with namedExport
+
+If you see this error:
+
+```
+"exportLocalsConvention" with "camelCase" value is incompatible with "namedExport: true" option
+```
+
+This means your webpack configuration has `namedExport: true` with `exportLocalsConvention: 'camelCase'`. The fix is to change to `'camelCaseOnly'` or `'dashesOnly'`:
+
+```js
+// config/webpack/commonWebpackConfig.js or wherever you configure css-loader
+modules: {
+  namedExport: true,
+  exportLocalsConvention: 'camelCaseOnly'  // or 'dashesOnly'
+}
+```
+
+If you want to use `'camelCase'` (which exports both original and camelCase versions), you must set `namedExport: false` and revert to v8 behavior. See the [CSS Modules Export Mode documentation](./css-modules-export-mode.md) for details.
+
 ### Unexpected Peer Dependency Warnings After Upgrade
 
 If you experience unexpected peer dependency warnings after upgrading to v9, you may need to clear your package manager's cache and reinstall dependencies. This ensures the new optional peer dependency configuration takes effect properly.
 
 **For npm:**
+
 ```bash
 rm -rf node_modules package-lock.json
 npm install
 ```
 
 **For Yarn:**
+
 ```bash
 rm -rf node_modules yarn.lock
 yarn install
 ```
 
 **For pnpm:**
+
 ```bash
 rm -rf node_modules pnpm-lock.yaml
 pnpm install
 ```
 
 **For Bun:**
+
 ```bash
 rm -rf node_modules bun.lockb
 bun install
 ```
 
 **When is this necessary?**
+
 - If you see peer dependency warnings for packages you don't use (e.g., warnings about Babel when using SWC)
 - If your package manager cached the old dependency resolution from v8
 - After switching transpilers or bundlers (e.g., from Babel to SWC, or webpack to rspack)

data/lib/shakapacker/doctor.rb

@@ -43,6 +43,7 @@ module Shakapacker
         # Dependency checks
         check_javascript_transpiler_dependencies if config_exists?
         check_css_dependencies
+        check_css_modules_configuration
         check_bundler_dependencies if config_exists?
         check_file_type_dependencies if config_exists?
         check_sri_dependencies if config_exists?
@@ -432,6 +433,28 @@ module Shakapacker
         if transpiler == "esbuild" && package_installed?("babel-loader")
           @warnings << "Both esbuild and Babel dependencies are installed. Consider removing Babel dependencies to reduce node_modules size"
         end
+
+        # Check for SWC configuration conflicts
+        if transpiler == "swc"
+          check_swc_config_conflicts
+        end
+      end
+
+      def check_swc_config_conflicts
+        swcrc_path = root_path.join(".swcrc")
+        return unless swcrc_path.exist?
+
+        begin
+          swcrc = JSON.parse(File.read(swcrc_path))
+          # Check for conflicting jsc.target and env settings
+          if swcrc.dig("jsc", "target") && swcrc["env"]
+            @issues << "SWC configuration conflict: .swcrc contains both 'jsc.target' and 'env' settings, which are mutually exclusive. Remove 'jsc.target' from .swcrc"
+          elsif swcrc.dig("jsc", "target")
+            @warnings << "SWC configuration: .swcrc contains 'jsc.target' which may conflict with the loader's 'env' setting. Consider removing 'jsc.target' from .swcrc to avoid build errors"
+          end
+        rescue JSON::ParserError
+          @warnings << "SWC configuration: .swcrc exists but contains invalid JSON"
+        end
       end
 
       def check_css_dependencies
@@ -440,6 +463,77 @@ module Shakapacker
         check_optional_dependency("mini-css-extract-plugin", @warnings, "CSS extraction")
       end
 
+      def check_css_modules_configuration
+        # Check for CSS module files in the project
+        return unless config_exists?
+
+        source_path = config.source_path
+        return unless source_path.exist?
+
+        # Performance optimization: Just check if ANY CSS module file exists
+        # Using .first with early return is much faster than globbing all files
+        css_module_exists = Dir.glob(File.join(source_path, "**/*.module.{css,scss,sass}")).first
+        return unless css_module_exists
+
+        # Check webpack configuration for CSS modules settings
+        webpack_config_paths = [
+          root_path.join("config/webpack/webpack.config.js"),
+          root_path.join("config/webpack/webpack.config.ts"),
+          root_path.join("config/webpack/commonWebpackConfig.js"),
+          root_path.join("config/webpack/commonWebpackConfig.ts")
+        ]
+
+        webpack_config_paths.each do |config_path|
+          next unless config_path.exist?
+
+          config_content = File.read(config_path)
+
+          # Check for the invalid configuration: namedExport: true with exportLocalsConvention: 'camelCase'
+          if config_content.match(/namedExport\s*:\s*true/) && config_content.match(/exportLocalsConvention\s*:\s*['"]camelCase['"]/)
+            @issues << "CSS Modules: Invalid configuration detected in #{config_path.relative_path_from(root_path)}"
+            @issues << "  Using exportLocalsConvention: 'camelCase' with namedExport: true will cause build errors"
+            @issues << "  Change to 'camelCaseOnly' or 'dashesOnly'. See docs/v9_upgrade.md for details"
+          end
+
+          # Warn if CSS modules are used but no configuration is found
+          if !config_content.match(/namedExport/) && !config_content.match(/exportLocalsConvention/)
+            @info << "CSS module files found but no explicit CSS modules configuration detected"
+            @info << "  v9 defaults: namedExport: true, exportLocalsConvention: 'camelCaseOnly'"
+          end
+        end
+
+        # Check for common v8 to v9 migration issues
+        check_css_modules_import_patterns
+      rescue => e
+        # Don't fail doctor if CSS modules check has issues
+        @warnings << "Unable to validate CSS modules configuration: #{e.message}"
+      end
+
+      def check_css_modules_import_patterns
+        # Look for JavaScript/TypeScript files that might have v8-style imports
+        source_path = config.source_path
+
+        # Use lazy evaluation with Enumerator to avoid loading all file paths into memory
+        # Stop after checking 50 files or finding a match
+        v8_pattern = /import\s+\w+\s+from\s+['"][^'"]*\.module\.(css|scss|sass)['"]/
+
+        Dir.glob(File.join(source_path, "**/*.{js,jsx,ts,tsx}")).lazy.take(50).each do |file|
+          # Read file and check for v8 pattern
+          content = File.read(file)
+
+          # Check for v8 default import pattern with .module.css
+          if v8_pattern.match?(content)
+            @warnings << "Potential v8-style CSS module imports detected (using default import)"
+            @warnings << "  v9 uses named exports. Update to: import { className } from './styles.module.css'"
+            @warnings << "  Or use: import * as styles from './styles.module.css' (TypeScript)"
+            @warnings << "  See docs/v9_upgrade.md for migration guide"
+            break  # Stop after finding first occurrence
+          end
+        end
+      rescue => e
+        # Don't fail doctor if import pattern check has issues
+      end
+
       def check_bundler_dependencies
         bundler = config.assets_bundler
         case bundler