feat: compat with Rspack 0.6 CSS modules

e2e/cases/check-syntax/index.test.ts

@@ -16,12 +16,6 @@ function getCommonBuildConfig(cwd: string): RsbuildConfig {
       },
       overrideBrowserslist: ['ie 11'],
     },
-    tools: {
-      rspack: (config) => {
-        config.target = ['web'];
-        config.builtins!.presetEnv = undefined;
-      },
-    },
   };
 }
 

e2e/cases/stats/stats-options/src/index.tsx

@@ -1,2 +1 @@
 import './App.scss';
-

packages/compat/webpack/src/core/createCompiler.ts

@@ -39,7 +39,10 @@ export async function createCompiler({
     | Rspack.MultiCompiler;
 
   const done = async (stats: unknown) => {
-    const { message, level } = formatStats(stats as Stats, getStatsOptions(compiler));
+    const { message, level } = formatStats(
+      stats as Stats,
+      getStatsOptions(compiler),
+    );
 
     if (level === 'error') {
       logger.error(message);

packages/core/package.json

@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@rsbuild/shared": "workspace:*",
-    "@rspack/core": "0.5.9-canary-8778e17-20240403045016",
+    "@rspack/core": "0.5.9-canary-5be4c34-20240403005129",
     "@swc/helpers": "0.5.3",
     "core-js": "~3.36.0",
     "html-webpack-plugin": "npm:[email protected]",

packages/core/src/provider/plugins/css.ts

@@ -1,6 +1,7 @@
 import path from 'node:path';
 import {
   logger,
+  kebabCase,
   getBrowserslistWithDefault,
   isUseCssExtract,
   CSS_REGEX,
@@ -239,14 +240,20 @@ export const pluginCss = (): RsbuildPlugin => {
             localIdentName = localIdentName.replace(':base64', '');
           }
 
-          // need use type: "css/module" rule instead of modules.auto config
-          rspackConfig.builtins ||= {};
-          rspackConfig.builtins.css ||= {};
-          rspackConfig.builtins.css.modules = {
-            localsConvention: config.output.cssModules.exportLocalsConvention,
+          // need use "css/module" generator instead of modules.auto config
+          rspackConfig.module ||= {};
+          rspackConfig.module.generator ||= {};
+          rspackConfig.module.generator['css/module'] = {
+            exportsConvention: kebabCase(
+              config.output.cssModules.exportLocalsConvention,
+            ),
             localIdentName,
             exportsOnly: isServer || isWebWorker,
           };
+          rspackConfig.module.parser ||= {};
+          rspackConfig.module.parser['css/module'] = {
+            namedExports: false,
+          };
 
           const rules = rspackConfig.module?.rules;
 

packages/core/src/provider/shared.ts

@@ -223,7 +223,7 @@ export function getStatsOptions(
     } as unknown as StatsValue;
   }
 
-  return compiler.options ? compiler.options.stats as StatsValue : undefined;
+  return compiler.options ? (compiler.options.stats as StatsValue) : undefined;
 }
 
 export function formatStats(

packages/core/tests/__snapshots__/builder.test.ts.snap

@@ -2,15 +2,6 @@
 
 exports[`should use rspack as default bundler > apply rspack correctly 1`] = `
 {
-  "builtins": {
-    "css": {
-      "modules": {
-        "exportsOnly": false,
-        "localIdentName": "[path][name]__[local]-[hash:6]",
-        "localsConvention": "camelCase",
-      },
-    },
-  },
   "context": "<ROOT>",
   "devtool": "cheap-module-source-map",
   "entry": {
@@ -26,7 +17,17 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = `
   },
   "mode": "development",
   "module": {
+    "generator": {
+      "css/module": {
+        "exportsConvention": "camel-case",
+        "exportsOnly": false,
+        "localIdentName": "[path][name]__[local]-[hash:6]",
+      },
+    },
     "parser": {
+      "css/module": {
+        "namedExports": false,
+      },
       "javascript": {
         "exportsPresence": "error",
       },

packages/core/tests/__snapshots__/css.test.ts.snap

@@ -2,16 +2,19 @@
 
 exports[`plugin-css > should apply custom css-modules-typescript-loader when enableCssModuleTSDeclaration 1`] = `
 {
-  "builtins": {
-    "css": {
-      "modules": {
+  "module": {
+    "generator": {
+      "css/module": {
+        "exportsConvention": "camel-case",
         "exportsOnly": false,
         "localIdentName": "[path][name]__[local]-[hash:6]",
-        "localsConvention": "camelCase",
       },
     },
-  },
-  "module": {
+    "parser": {
+      "css/module": {
+        "namedExports": false,
+      },
+    },
     "rules": [
       {
         "oneOf": [
@@ -129,16 +132,19 @@ exports[`plugin-css > should apply custom css-modules-typescript-loader when ena
 
 exports[`plugin-css > should override browserslist of autoprefixer when using output.overrideBrowserslist config 1`] = `
 {
-  "builtins": {
-    "css": {
-      "modules": {
+  "module": {
+    "generator": {
+      "css/module": {
+        "exportsConvention": "camel-case",
         "exportsOnly": false,
         "localIdentName": "[path][name]__[local]-[hash:6]",
-        "localsConvention": "camelCase",
       },
     },
-  },
-  "module": {
+    "parser": {
+      "css/module": {
+        "namedExports": false,
+      },
+    },
     "rules": [
       {
         "oneOf": [
@@ -226,16 +232,19 @@ exports[`plugin-css > should override browserslist of autoprefixer when using ou
 
 exports[`plugin-css > should use custom cssModules rule when using output.cssModules config 1`] = `
 {
-  "builtins": {
-    "css": {
-      "modules": {
+  "module": {
+    "generator": {
+      "css/module": {
+        "exportsConvention": "camel-case",
         "exportsOnly": false,
         "localIdentName": "[path][name]__[local]-[hash:6]",
-        "localsConvention": "camelCase",
       },
     },
-  },
-  "module": {
+    "parser": {
+      "css/module": {
+        "namedExports": false,
+      },
+    },
     "rules": [
       {
         "oneOf": [

packages/core/tests/__snapshots__/default.test.ts.snap

@@ -2,15 +2,6 @@
 
 exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
 {
-  "builtins": {
-    "css": {
-      "modules": {
-        "exportsOnly": false,
-        "localIdentName": "[path][name]__[local]-[hash:6]",
-        "localsConvention": "camelCase",
-      },
-    },
-  },
   "context": "<ROOT>/packages/core/tests",
   "devtool": "cheap-module-source-map",
   "entry": {
@@ -26,7 +17,17 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
   },
   "mode": "development",
   "module": {
+    "generator": {
+      "css/module": {
+        "exportsConvention": "camel-case",
+        "exportsOnly": false,
+        "localIdentName": "[path][name]__[local]-[hash:6]",
+      },
+    },
     "parser": {
+      "css/module": {
+        "namedExports": false,
+      },
       "javascript": {
         "exportsPresence": "error",
       },
@@ -703,15 +704,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
 
 exports[`applyDefaultPlugins > should apply default plugins correctly when prod 1`] = `
 {
-  "builtins": {
-    "css": {
-      "modules": {
-        "exportsOnly": false,
-        "localIdentName": "[local]-[hash:6]",
-        "localsConvention": "camelCase",
-      },
-    },
-  },
   "context": "<ROOT>/packages/core/tests",
   "devtool": false,
   "entry": {
@@ -727,7 +719,17 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
   },
   "mode": "production",
   "module": {
+    "generator": {
+      "css/module": {
+        "exportsConvention": "camel-case",
+        "exportsOnly": false,
+        "localIdentName": "[local]-[hash:6]",
+      },
+    },
     "parser": {
+      "css/module": {
+        "namedExports": false,
+      },
       "javascript": {
         "exportsPresence": "error",
       },
@@ -1469,15 +1471,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
 
 exports[`applyDefaultPlugins > should apply default plugins correctly when target = node 1`] = `
 {
-  "builtins": {
-    "css": {
-      "modules": {
-        "exportsOnly": true,
-        "localIdentName": "[path][name]__[local]-[hash:6]",
-        "localsConvention": "camelCase",
-      },
-    },
-  },
   "context": "<ROOT>/packages/core/tests",
   "devtool": "cheap-module-source-map",
   "entry": {
@@ -1493,7 +1486,17 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
   },
   "mode": "development",
   "module": {
+    "generator": {
+      "css/module": {
+        "exportsConvention": "camel-case",
+        "exportsOnly": true,
+        "localIdentName": "[path][name]__[local]-[hash:6]",
+      },
+    },
     "parser": {
+      "css/module": {
+        "namedExports": false,
+      },
       "javascript": {
         "exportsPresence": "error",
       },
@@ -1885,15 +1888,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
 
 exports[`tools.rspack > should match snapshot 1`] = `
 {
-  "builtins": {
-    "css": {
-      "modules": {
-        "exportsOnly": false,
-        "localIdentName": "[path][name]__[local]-[hash:6]",
-        "localsConvention": "camelCase",
-      },
-    },
-  },
   "context": "<ROOT>/packages/core/tests",
   "devtool": "cheap-module-source-map",
   "entry": {
@@ -1909,7 +1903,17 @@ exports[`tools.rspack > should match snapshot 1`] = `
   },
   "mode": "development",
   "module": {
+    "generator": {
+      "css/module": {
+        "exportsConvention": "camel-case",
+        "exportsOnly": false,
+        "localIdentName": "[path][name]__[local]-[hash:6]",
+      },
+    },
     "parser": {
+      "css/module": {
+        "namedExports": false,
+      },
       "javascript": {
         "exportsPresence": "error",
       },

packages/document/docs/en/index.md

@@ -1,7 +1,7 @@
 ---
 pageType: home
 
-link-rss: 
+link-rss:
   - releases-rss
   - releases-atom
 

packages/plugin-lightningcss/package.json

@@ -30,7 +30,7 @@
     "lightningcss": "^1.24.1"
   },
   "devDependencies": {
-    "@rspack/core": "0.5.9-canary-8778e17-20240403045016",
+    "@rspack/core": "0.5.9-canary-5be4c34-20240403005129",
     "@rsbuild/core": "workspace:*",
     "@scripts/test-helper": "workspace:*",
     "@types/node": "16.x",

packages/plugin-react/package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@rsbuild/shared": "workspace:*",
-    "@rspack/plugin-react-refresh": "0.5.9-canary-8778e17-20240403045016",
+    "@rspack/plugin-react-refresh": "0.5.9-canary-5be4c34-20240403005129",
     "react-refresh": "^0.14.0"
   },
   "devDependencies": {

packages/plugin-react/tests/__snapshots__/index.test.ts.snap

@@ -19,15 +19,6 @@ exports[`plugins/react > should not apply splitChunks rule when strategy is not
 
 exports[`plugins/react > should work with swc-loader 1`] = `
 {
-  "builtins": {
-    "css": {
-      "modules": {
-        "exportsOnly": false,
-        "localIdentName": "[path][name]__[local]-[hash:6]",
-        "localsConvention": "camelCase",
-      },
-    },
-  },
   "context": "<ROOT>/packages/plugin-react/tests",
   "devtool": "cheap-module-source-map",
   "entry": {
@@ -43,7 +34,17 @@ exports[`plugins/react > should work with swc-loader 1`] = `
   },
   "mode": "development",
   "module": {
+    "generator": {
+      "css/module": {
+        "exportsConvention": "camel-case",
+        "exportsOnly": false,
+        "localIdentName": "[path][name]__[local]-[hash:6]",
+      },
+    },
     "parser": {
+      "css/module": {
+        "namedExports": false,
+      },
       "javascript": {
         "exportsPresence": "error",
       },