diff --git a/e2e/cases/css/enable-experiments-css/index.test.ts b/e2e/cases/css/enable-experiments-css/index.test.ts
new file mode 100644
index 0000000000..c236d420ab
--- /dev/null
+++ b/e2e/cases/css/enable-experiments-css/index.test.ts
@@ -0,0 +1,45 @@
+import { build, proxyConsole, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest('should allow to enable Rspack experiments.css', async () => {
+  const { logs, restore } = proxyConsole();
+
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+  const files = await rsbuild.unwrapOutputJSON();
+  const content =
+    files[Object.keys(files).find((file) => file.endsWith('index.css'))!];
+
+  expect(content).toEqual('body{color:red}');
+  // should have no warnings
+  expect(logs.some((log) => log.includes('Compile Warning'))).toBeFalsy();
+
+  restore();
+});
+
+rspackOnlyTest(
+  'should allow to enable Rspack experiments.css with style-loader',
+  async () => {
+    const { logs, restore } = proxyConsole();
+
+    const rsbuild = await build({
+      cwd: __dirname,
+      rsbuildConfig: {
+        output: {
+          injectStyles: true,
+        },
+      },
+    });
+
+    const files = await rsbuild.unwrapOutputJSON();
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('index.js'))!];
+    expect(content).toContain('color: red;');
+
+    // should have no warnings
+    expect(logs.some((log) => log.includes('Compile Warning'))).toBeFalsy();
+
+    restore();
+  },
+);
diff --git a/e2e/cases/css/enable-experiments-css/rsbuild.config.ts b/e2e/cases/css/enable-experiments-css/rsbuild.config.ts
new file mode 100644
index 0000000000..891db3f17d
--- /dev/null
+++ b/e2e/cases/css/enable-experiments-css/rsbuild.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  tools: {
+    rspack: {
+      experiments: {
+        css: true,
+      },
+    },
+  },
+  output: {
+    filenameHash: false,
+  },
+});
diff --git a/e2e/cases/css/enable-experiments-css/src/index.css b/e2e/cases/css/enable-experiments-css/src/index.css
new file mode 100644
index 0000000000..60f1eab971
--- /dev/null
+++ b/e2e/cases/css/enable-experiments-css/src/index.css
@@ -0,0 +1,3 @@
+body {
+  color: red;
+}
diff --git a/e2e/cases/css/enable-experiments-css/src/index.js b/e2e/cases/css/enable-experiments-css/src/index.js
new file mode 100644
index 0000000000..6a9a4b1328
--- /dev/null
+++ b/e2e/cases/css/enable-experiments-css/src/index.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap b/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap
index ab370cb20f..a08d27a24d 100644
--- a/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap
+++ b/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap
@@ -48,6 +48,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/mini-css-extract-plugin/dist/loader.js",
@@ -412,6 +413,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/mini-css-extract-plugin/dist/loader.js",
@@ -772,6 +774,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/dist/ignoreCssLoader.cjs",
@@ -1074,6 +1077,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/dist/ignoreCssLoader.cjs",
diff --git a/packages/core/src/plugins/css.ts b/packages/core/src/plugins/css.ts
index e37aed4bb5..b1ca331cfd 100644
--- a/packages/core/src/plugins/css.ts
+++ b/packages/core/src/plugins/css.ts
@@ -340,7 +340,12 @@ export const pluginCss = (): RsbuildPlugin => ({
       handler: async (chain, utils) => {
         const rule = chain.module.rule(utils.CHAIN_ID.RULE.CSS);
         const { config } = utils.environment;
-        rule.test(CSS_REGEX);
+
+        rule
+          .test(CSS_REGEX)
+          // specify type to allow enabling Rspack `experiments.css`
+          .type('javascript/auto');
+
         await applyCSSRule({
           rule,
           utils,
diff --git a/packages/core/tests/__snapshots__/builder.test.ts.snap b/packages/core/tests/__snapshots__/builder.test.ts.snap
index 8c85ed94b4..a7a59e228c 100644
--- a/packages/core/tests/__snapshots__/builder.test.ts.snap
+++ b/packages/core/tests/__snapshots__/builder.test.ts.snap
@@ -35,6 +35,7 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
diff --git a/packages/core/tests/__snapshots__/css.test.ts.snap b/packages/core/tests/__snapshots__/css.test.ts.snap
index 210262da74..10ed8d07e8 100644
--- a/packages/core/tests/__snapshots__/css.test.ts.snap
+++ b/packages/core/tests/__snapshots__/css.test.ts.snap
@@ -10,6 +10,7 @@ exports[`plugin-css > should use custom cssModules rule when using output.cssMod
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -59,6 +60,7 @@ exports[`plugin-css injectStyles > should apply ignoreCssLoader when injectStyle
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/src/ignoreCssLoader.cjs",
@@ -98,6 +100,7 @@ exports[`plugin-css injectStyles > should use css-loader + style-loader when inj
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/compiled/style-loader",
diff --git a/packages/core/tests/__snapshots__/default.test.ts.snap b/packages/core/tests/__snapshots__/default.test.ts.snap
index 3bdcc30263..845db44672 100644
--- a/packages/core/tests/__snapshots__/default.test.ts.snap
+++ b/packages/core/tests/__snapshots__/default.test.ts.snap
@@ -35,6 +35,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -432,6 +433,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -862,6 +864,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/dist/ignoreCssLoader.cjs",
@@ -1193,6 +1196,7 @@ exports[`tools.rspack > should match snapshot 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
diff --git a/packages/core/tests/__snapshots__/environments.test.ts.snap b/packages/core/tests/__snapshots__/environments.test.ts.snap
index 06b4e14b7b..c8c8a8ae49 100644
--- a/packages/core/tests/__snapshots__/environments.test.ts.snap
+++ b/packages/core/tests/__snapshots__/environments.test.ts.snap
@@ -1385,6 +1385,7 @@ exports[`environment config > tools.rspack / bundlerChain can be used in environ
           },
           "sideEffects": true,
           "test": /\\\\\\.css\\$/,
+          "type": "javascript/auto",
           "use": [
             {
               "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -1729,6 +1730,7 @@ exports[`environment config > tools.rspack / bundlerChain can be used in environ
           },
           "sideEffects": true,
           "test": /\\\\\\.css\\$/,
+          "type": "javascript/auto",
           "use": [
             {
               "loader": "<ROOT>/packages/core/src/ignoreCssLoader.cjs",
diff --git a/packages/plugin-react/tests/__snapshots__/index.test.ts.snap b/packages/plugin-react/tests/__snapshots__/index.test.ts.snap
index 471888ce88..7cc4a13a86 100644
--- a/packages/plugin-react/tests/__snapshots__/index.test.ts.snap
+++ b/packages/plugin-react/tests/__snapshots__/index.test.ts.snap
@@ -51,6 +51,7 @@ exports[`plugins/react > should work with swc-loader 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
diff --git a/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap b/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap
index ecaadc9a49..72a8796abf 100644
--- a/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap
+++ b/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap
@@ -8,6 +8,7 @@ exports[`plugin-rem > should not run htmlPlugin with enableRuntime is false 1`]
     },
     "sideEffects": true,
     "test": /\\\\\\.css\\$/,
+    "type": "javascript/auto",
     "use": [
       {
         "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -73,6 +74,7 @@ exports[`plugin-rem > should run rem plugin with custom config 1`] = `
     },
     "sideEffects": true,
     "test": /\\\\\\.css\\$/,
+    "type": "javascript/auto",
     "use": [
       {
         "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -144,6 +146,7 @@ exports[`plugin-rem > should run rem plugin with default config 1`] = `
     },
     "sideEffects": true,
     "test": /\\\\\\.css\\$/,
+    "type": "javascript/auto",
     "use": [
       {
         "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",