feat: allow to disable buit-in lightningcss-loader

e2e/cases/css/lightningcss-disabled/.browserslistrc

@@ -0,0 +1,3 @@
+Edge >= 12
+iOS >= 8
+Android >= 4.0

e2e/cases/css/lightningcss-disabled/index.test.ts

@@ -0,0 +1,26 @@
+import { build, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest(
+  'should allow to disable the built-in lightningcss loader',
+  async () => {
+    const rsbuild = await build({
+      cwd: __dirname,
+      rsbuildConfig: {
+        tools: {
+          lightningcssLoader: false,
+        },
+        output: {
+          minify: false,
+        },
+      },
+    });
+    const files = await rsbuild.unwrapOutputJSON();
+
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+
+    expect(content).not.toContain('-webkit-');
+    expect(content).not.toContain('-ms-');
+  },
+);

e2e/cases/css/lightningcss-disabled/src/index.css

@@ -0,0 +1,7 @@
+@media (min-resolution: 2dppx) {
+  .item {
+    transition: all 0.5s;
+    user-select: none;
+    background: linear-gradient(to bottom, white, black);
+  }
+}

e2e/cases/css/lightningcss-disabled/src/index.js

@@ -0,0 +1 @@
+import './index.css';

packages/core/src/plugins/css.ts

@@ -231,14 +231,22 @@ async function applyCSSRule({
 
   if (target === 'web') {
     // `builtin:lightningcss-loader` is not supported when using webpack
-    if (context.bundlerType === 'rspack') {
+    if (
+      context.bundlerType === 'rspack' &&
+      config.tools.lightningcssLoader !== false
+    ) {
       importLoaders++;
 
+      const userOptions =
+        config.tools.lightningcssLoader === true
+          ? {}
+          : config.tools.lightningcssLoader;
+
       const loaderOptions = reduceConfigs<Rspack.LightningcssLoaderOptions>({
         initial: {
           targets: environment.browserslist,
         },
-        config: config.tools.lightningcssLoader,
+        config: userOptions,
       });
 
       rule

packages/core/src/types/config/tools.ts

@@ -106,7 +106,7 @@ export interface ToolsConfig {
   /**
    * Configure the `builtin:lightningcss-loader` of Rspack.
    */
-  lightningcssLoader?: ConfigChain<Rspack.LightningcssLoaderOptions>;
+  lightningcssLoader?: boolean | ConfigChain<Rspack.LightningcssLoaderOptions>;
   /**
    * Modify the options of [CssExtractRspackPlugin](https://rspack.dev/plugins/rspack/css-extract-rspack-plugin).
    */

website/docs/en/config/tools/lightningcss-loader.mdx

@@ -1,6 +1,6 @@
 # tools.lightningcssLoader
 
-- **Type:** `Rspack.LightningcssLoaderOptions | Function`
+- **Type:** `Rspack.LightningcssLoaderOptions | Function | boolean`
 - **Default:**
 
 ```ts
@@ -10,6 +10,8 @@ const defaultOptions = {
 };
 ```
 
+- **Version:** `>= 1.0.0`
+
 You can set the options for [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`.
 
 ## Object Type
@@ -46,3 +48,15 @@ export default {
   },
 };
 ```
+
+## Disable loader
+
+Set `tools.lightningcssLoader` to `false` to disable the built-in `lightningcss-loader` in Rsbuild:
+
+```js
+export default {
+  tools: {
+    lightningcssLoader: false,
+  },
+};
+```

website/docs/zh/config/tools/lightningcss-loader.mdx

@@ -1,6 +1,6 @@
 # tools.lightningcssLoader
 
-- **类型：** `Rspack.LightningcssLoaderOptions | Function`
+- **类型：** `Rspack.LightningcssLoaderOptions | Function | boolean`
 - **默认值：**
 
 ```ts
@@ -10,6 +10,8 @@ const defaultOptions = {
 };
 ```
 
+- **版本：** `>= 1.0.0`
+
 通过 `tools.lightningcssLoader` 可以设置 [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) 的选项。
 
 ## Object 类型
@@ -46,3 +48,15 @@ export default {
   },
 };
 ```
+
+## 禁用 loader
+
+将 `tools.lightningcssLoader` 设置为 `false`，可以禁用 Rsbuild 内置的 `lightningcss-loader`：
+
+```js
+export default {
+  tools: {
+    lightningcssLoader: false,
+  },
+};
+```