fix: lightningcss-loader targets array not work as expected (#7331)

* fix: lightningcss-loader targets array not work as expected

* docs: fix

* test: fix

* fix: folder name

packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/basic-include/rspack.config.js

@@ -1,6 +1,3 @@
-const rspack = require('@rspack/core')
-const browserslist = require('browserslist')
-
 /** @type {import("@rspack/core").Configuration} */
 module.exports = {
 	module: {

packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/prefixes-with-targets-array/index.css

@@ -0,0 +1,5 @@
+.foo {
+  transition: all .5s;
+  user-select: none;
+  background: linear-gradient(to bottom, white, black);
+}

packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/prefixes-with-targets-array/index.js

@@ -0,0 +1,19 @@
+import './index.css'
+
+const fs = require("node:fs");
+const path = require("node:path");
+
+it("should transform CSS and add prefixes correctly", () => {
+	const css = fs.readFileSync(
+		path.resolve(__dirname, "./bundle0.css"),
+		"utf-8"
+	);
+
+	expect(css.includes('-webkit-user-select: none;')).toBeTruthy();
+	expect(css.includes('-ms-user-select: none;')).toBeTruthy();
+	expect(css.includes('user-select: none;')).toBeTruthy();
+	expect(css.includes('background: -webkit-linear-gradient(#fff, #000);')).toBeTruthy();
+	expect(css.includes('background: linear-gradient(#fff, #000);')).toBeTruthy();
+	expect(css.includes('-webkit-transition: all .5s;')).toBeTruthy();
+	expect(css.includes('transition: all .5s;')).toBeTruthy();
+});

packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/prefixes-with-targets-array/rspack.config.js

@@ -0,0 +1,32 @@
+/** @type {import("@rspack/core").Configuration} */
+module.exports = {
+	module: {
+		generator: {
+			"css/auto": {
+				exportsOnly: false,
+			}
+		},
+		rules: [
+			{
+				test: /\.css$/,
+				use: [
+					{
+						loader: "builtin:lightningcss-loader",
+						/** @type {import("@rspack/core").LightningcssLoaderOptions} */
+						options: {
+							targets: [
+								'Edge >= 12',
+								'iOS >= 8',
+								'Android >= 4.0'
+							]
+						}
+					}
+				],
+				type: "css/auto"
+			}
+		]
+	},
+	experiments: {
+		css: true
+	}
+};

packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/prefixes-with-targets-string/index.css

@@ -0,0 +1,3 @@
+.foo {
+  user-select: none;
+}

packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/prefixes-with-targets-string/index.js

@@ -0,0 +1,14 @@
+import './index.css'
+
+const fs = require("node:fs");
+const path = require("node:path");
+
+it("should transform CSS and add prefixes correctly", () => {
+	const css = fs.readFileSync(
+		path.resolve(__dirname, "./bundle0.css"),
+		"utf-8"
+	);
+
+	expect(css.includes('-ms-user-select: none;')).toBeTruthy();
+	expect(css.includes('user-select: none;')).toBeTruthy();
+});

packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/prefixes-with-targets-string/rspack.config.js

@@ -0,0 +1,30 @@
+/** @type {import("@rspack/core").Configuration} */
+module.exports = {
+	module: {
+		generator: {
+			"css/auto": {
+				exportsOnly: false,
+			}
+		},
+		rules: [
+			{
+				test: /\.css$/,
+				use: [
+					{
+						loader: "builtin:lightningcss-loader",
+						/** @type {import("@rspack/core").LightningcssLoaderOptions} */
+						options: {
+							targets: [
+								'Edge >= 12'
+							]
+						}
+					}
+				],
+				type: "css/auto"
+			}
+		]
+	},
+	experiments: {
+		css: true
+	}
+};

packages/rspack/src/config/adapterRuleUse.ts

@@ -222,7 +222,7 @@ const getLightningcssLoaderOptions: GetLoaderOptions = (o, _) => {
 		}
 
 		if (o.targets && Array.isArray(o.targets)) {
-			o.targets = browserslistToTargets(o.targets);
+			o.targets = browserslistToTargets(browserslist(o.targets));
 		}
 
 		if (o.include) {

website/docs/en/guide/features/builtin-lightningcss-loader.mdx

@@ -104,26 +104,61 @@ type LightningcssLoaderOptions = {
 };
 ```
 
-The `targets` can be directly written as a `browserslist` query string, the result of a `browserslist` query, or the `targets` of lightningcss, for example:
+### targets
+
+The `targets` option supports multiple formats, it can be set as a browserslist query string, a browserslist query result, or the native `targets` of lightningcss.
+
+Here are some examples of setting targets.
+
+- Setting a browserslist query string:
 
 ```js
-/** @type {import('@rspack/core').LightningcssLoaderOptions} */
-const options = {
-  targets: '> 0.2%',
+const loader = {
+  loader: 'builtin:lightningcss-loader',
+  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
+  options: {
+    targets: 'ie 10',
+  },
 };
-// or
+```
+
+- Setting an array of browserslist query strings:
+
+```js
+const loader = {
+  loader: 'builtin:lightningcss-loader',
+  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
+  options: {
+    targets: ['chrome >= 87', 'edge >= 88', '> 0.5%'],
+  },
+};
+```
+
+- Setting the browserslist query result:
+
+```js
 const browserslist = require('browserslist');
 
-/** @type {import('@rspack/core').LightningcssLoaderOptions} */
-const options = {
-  targets: browserslist('> 0.2%'),
+const loader = {
+  loader: 'builtin:lightningcss-loader',
+  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
+  options: {
+    targets: browserslist('> 0.2%'),
+  },
 };
-// or
-const rspack = require('@rspack/core');
+```
+
+- Setting as lightningcss's native `targets`, which relies on lightningcss's internal `browserslistToTargets` method to convert a `browserslist` query result to lightningcss's `targets` format:
+
+```js
 const browserslist = require('browserslist');
+const lightningcss = require('lightningcss');
 
-/** @type {import('@rspack/core').LightningcssLoaderOptions} */
-const options = {
-  targets: rspack.lightningcss.browserslistToTargets(browserslist('> 0.2%')),
+const loader = {
+  loader: 'builtin:lightningcss-loader',
+  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
+  options: {
+    targets: lightningcss.browserslistToTargets(browserslist('> 0.2%')),
+  },
 };
 ```

website/docs/zh/guide/features/builtin-lightningcss-loader.mdx

@@ -104,26 +104,61 @@ type LightningcssLoaderOptions = {
 };
 ```
 
-其中 `targets` 可以直接写 `browserslist` 查询字符串，`browserslist` 查询结果，或是 lightningcss 的 `targets`，例如
+### targets
+
+`targets` 选项支持多种写法，它可以设置为 browserslist 查询字符串、browserslist 查询结果，或是 lightningcss 原生的 `targets`。
+
+下面是一些 targets 的用法示例。
+
+- 设置 browserslist 查询字符串：
 
 ```js
-/** @type {import('@rspack/core').LightningcssLoaderOptions} */
-const options = {
-  targets: '> 0.2%',
+const loader = {
+  loader: 'builtin:lightningcss-loader',
+  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
+  options: {
+    targets: 'ie 10',
+  },
 };
-// or
+```
+
+- 设置 browserslist 查询字符串数组：
+
+```js
+const loader = {
+  loader: 'builtin:lightningcss-loader',
+  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
+  options: {
+    targets: ['chrome >= 87', 'edge >= 88', '> 0.5%'],
+  },
+};
+```
+
+- 设置 browserslist 查询结果：
+
+```js
 const browserslist = require('browserslist');
 
-/** @type {import('@rspack/core').LightningcssLoaderOptions} */
-const options = {
-  targets: browserslist('> 0.2%'),
+const loader = {
+  loader: 'builtin:lightningcss-loader',
+  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
+  options: {
+    targets: browserslist('> 0.2%'),
+  },
 };
-// or
-const rspack = require('@rspack/core');
+```
+
+- 设置为 lightningcss 原生的 `targets`，这依赖 lightningcss 内部的 `browserslistToTargets` 方法，它会将 `browserslist` 查询结果转换为 lightningcss 的 `targets` 格式：
+
+```js
 const browserslist = require('browserslist');
+const lightningcss = require('lightningcss');
 
-/** @type {import('@rspack/core').LightningcssLoaderOptions} */
-const options = {
-  targets: rspack.lightningcss.browserslistToTargets(browserslist('> 0.2%')),
+const loader = {
+  loader: 'builtin:lightningcss-loader',
+  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
+  options: {
+    targets: lightningcss.browserslistToTargets(browserslist('> 0.2%')),
+  },
 };
 ```