fix: remove experiments.css

chenjiahan · chenjiahan · commit 645c27fd368d · 2026-02-24T17:07:33.000+08:00
diff --git a/rspack/builtin-swc-loader/rspack.config.mjs b/rspack/builtin-swc-loader/rspack.config.mjs
@@ -14,9 +14,6 @@ export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.jsx'],
     alias: {
@@ -25,6 +22,10 @@ export default defineConfig({
   },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.(jsx|js)$/,
         use: {
diff --git a/rspack/cra-ts/rspack.config.js b/rspack/cra-ts/rspack.config.js
@@ -5,14 +5,15 @@ const config = {
   entry: {
     main: './src/index.tsx',
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.tsx$/,
         use: {
diff --git a/rspack/cra/rspack.config.js b/rspack/cra/rspack.config.js
@@ -5,14 +5,15 @@ const config = {
   entry: {
     main: './src/index.jsx',
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.jsx$/,
         use: {
diff --git a/rspack/css-chunking-plugin/rspack.config.js b/rspack/css-chunking-plugin/rspack.config.js
@@ -3,25 +3,30 @@ const { rspack } = require('@rspack/core');
 /** @type {import('@rspack/cli').Configuration} */
 const config = {
   entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
+    ],
+  },
   plugins: [
     new rspack.HtmlRspackPlugin({
       template: './index.html',
     }),
     // Without using CssChunkingPlugin, the current splitChunks configuration will split CSS modules into multiple chunks, causing CSS style errors
     new rspack.experiments.CssChunkingPlugin({
-        // options
+      // options
     }),
   ],
-  experiments: {
-    css: true,
-  },
   optimization: {
     minimize: false,
     splitChunks: {
-        maxSize: 100,
-        minSize: 0,
-    }
-  }
+      maxSize: 100,
+      minSize: 0,
+    },
+  },
 };
 
 module.exports = config;
diff --git a/rspack/css-parser-generator-options/rspack.config.js b/rspack/css-parser-generator-options/rspack.config.js
@@ -17,6 +17,11 @@ const config = {
       },
     },
     rules: [
+      {
+        test: /\.css$/,
+        exclude: path.resolve(__dirname, 'src/legacy'),
+        type: 'css/auto',
+      },
       {
         // files in src/legacy and ends with .css will be CSS Modules
         include: path.resolve(__dirname, 'src/legacy'),
@@ -42,9 +47,6 @@ const config = {
       template: './index.html',
     }),
   ],
-  experiments: {
-    css: true,
-  },
 };
 
 module.exports = config;
diff --git a/rspack/lightingcss-loader/rspack.config.js b/rspack/lightingcss-loader/rspack.config.js
@@ -24,8 +24,5 @@ const config = {
       template: './index.html',
     }),
   ],
-  experiments: {
-    css: true,
-  },
 };
 module.exports = config;
diff --git a/rspack/loader-compat/rspack.config.js b/rspack/loader-compat/rspack.config.js
@@ -9,9 +9,6 @@ const config = {
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
-  experiments: {
-    css: true,
-  },
   module: {
     rules: [
       {
diff --git a/rspack/monaco-editor-js/rspack.config.js b/rspack/monaco-editor-js/rspack.config.js
@@ -10,11 +10,12 @@ module.exports = {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
-  experiments: {
-    css: true,
-  },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.ttf$/,
         type: 'asset/resource',
diff --git a/rspack/monaco-editor-ts-react/rspack.config.js b/rspack/monaco-editor-ts-react/rspack.config.js
@@ -17,11 +17,12 @@ module.exports = {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
-  experiments: {
-    css: true,
-  },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.ttf$/,
         type: 'asset/resource',
@@ -72,5 +73,5 @@ module.exports = {
     new rspack.HtmlRspackPlugin({
       template: './src/index.html',
     }),
-  ]
+  ],
 };
diff --git a/rspack/monaco-editor-webpack-plugin/rspack.config.js b/rspack/monaco-editor-webpack-plugin/rspack.config.js
@@ -11,11 +11,12 @@ module.exports = {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
-  experiments: {
-    css: true,
-  },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.ttf$/,
         type: 'asset/resource',
diff --git a/rspack/postcss-loader/rspack.config.js b/rspack/postcss-loader/rspack.config.js
@@ -5,9 +5,6 @@ const config = {
   entry: {
     main: './src/index.js',
   },
-  experiments: {
-    css: true,
-  },
   module: {
     rules: [
       {
@@ -39,6 +36,7 @@ const config = {
             },
           },
         ],
+        type: 'css',
       },
     ],
   },
diff --git a/rspack/preact-refresh/rspack.config.js b/rspack/preact-refresh/rspack.config.js
@@ -6,9 +6,6 @@ const config = {
   entry: {
     main: './src/index.jsx',
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
     alias: {
@@ -20,6 +17,10 @@ const config = {
   },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.jsx$/,
         use: {
diff --git a/rspack/preact/rspack.config.js b/rspack/preact/rspack.config.js
@@ -5,9 +5,6 @@ const config = {
   entry: {
     main: './src/index.jsx',
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
     alias: {
@@ -19,6 +16,10 @@ const config = {
   },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.jsx$/,
         use: {
diff --git a/rspack/react-compiler-babel-ts/rspack.config.js b/rspack/react-compiler-babel-ts/rspack.config.js
@@ -4,14 +4,15 @@ const config = {
   entry: {
     main: './src/index.tsx',
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.jsx', '.tsx', '.ts'],
   },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.(js|ts)$/,
         exclude: [/[\\/]node_modules[\\/]/],
diff --git a/rspack/react-compiler-babel/rspack.config.js b/rspack/react-compiler-babel/rspack.config.js
@@ -4,14 +4,15 @@ const config = {
   entry: {
     main: './src/index.jsx',
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.jsx'],
   },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.js$/,
         exclude: [/[\\/]node_modules[\\/]/],
diff --git a/rspack/react-refresh-esm/rspack.config.js b/rspack/react-refresh-esm/rspack.config.js
@@ -17,11 +17,14 @@ const config = {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
   experiments: {
-    css: true,
     outputModule: true,
   },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.tsx$/,
         use: {
@@ -46,7 +49,7 @@ const config = {
     ],
   },
   plugins: [
-    new rspack.HtmlRspackPlugin({ template: './index.html', scriptLoading: "module" }),
+    new rspack.HtmlRspackPlugin({ template: './index.html', scriptLoading: 'module' }),
     !isProduction && new ReactRefreshPlugin(),
   ].filter(Boolean),
 };
diff --git a/rspack/react-refresh/rspack.config.js b/rspack/react-refresh/rspack.config.js
@@ -10,11 +10,12 @@ const config = {
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
-  experiments: {
-    css: true,
-  },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.tsx$/,
         use: {
diff --git a/rspack/react-with-less/rspack.config.js b/rspack/react-with-less/rspack.config.js
@@ -6,9 +6,6 @@ const config = {
   entry: {
     main: ['./src/index.jsx'],
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
diff --git a/rspack/react-with-sass/rspack.config.js b/rspack/react-with-sass/rspack.config.js
@@ -4,9 +4,6 @@ const config = {
   entry: {
     main: ['./src/index.jsx'],
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
diff --git a/rspack/react/rspack.config.js b/rspack/react/rspack.config.js
@@ -7,11 +7,12 @@ const config = {
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
-  experiments: {
-    css: true,
-  },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.jsx$/,
         use: {
diff --git a/rspack/solid/rspack.config.js b/rspack/solid/rspack.config.js
@@ -5,9 +5,6 @@ const config = {
   entry: {
     main: './src/index.jsx',
   },
-  experiments: {
-    css: true,
-  },
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
diff --git a/rspack/svelte/rspack.config.js b/rspack/svelte/rspack.config.js
@@ -41,11 +41,12 @@ export default defineConfig({
     extensions: ['.mjs', '.js', '.ts', '.svelte'],
     mainFields: ['svelte', 'browser', 'module', 'main'],
   },
-  experiments: {
-    css: true,
-  },
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
       {
         test: /\.(?:js|ts)$/,
         use: [swcLoaderConfig],
diff --git a/rspack/tailwindcss-postcss/rspack.config.js b/rspack/tailwindcss-postcss/rspack.config.js
diff --git a/rspack/tailwindcss-with-type-css/rspack.config.js b/rspack/tailwindcss-with-type-css/rspack.config.js
diff --git a/rspack/treeshaking-transform-imports/rspack.config.js b/rspack/treeshaking-transform-imports/rspack.config.js
diff --git a/rspack/unplugin-auto-import/rspack.config.js b/rspack/unplugin-auto-import/rspack.config.js
diff --git a/rspack/vanilla-extract-css/rspack.config.js b/rspack/vanilla-extract-css/rspack.config.js
diff --git a/rspack/vue-jsx/rspack.config.js b/rspack/vue-jsx/rspack.config.js
diff --git a/rspack/vue-tsx/rspack.config.js b/rspack/vue-tsx/rspack.config.js
diff --git a/rspack/vue/rspack.config.js b/rspack/vue/rspack.config.js
