diff --git a/crates/node_binding/binding.d.ts b/crates/node_binding/binding.d.ts index 5b6482aef81..883f67afbaf 100644 --- a/crates/node_binding/binding.d.ts +++ b/crates/node_binding/binding.d.ts @@ -1313,7 +1313,7 @@ export interface RawLightningCssBrowsers { export interface RawLightningCssMinimizerOptions { errorRecovery: boolean - targets?: RawLightningCssBrowsers + targets?: Array include?: number exclude?: number draft?: RawDraft diff --git a/crates/rspack_binding_options/src/options/raw_builtins/raw_lightning_css_minimizer.rs b/crates/rspack_binding_options/src/options/raw_builtins/raw_lightning_css_minimizer.rs index 052e5ea7315..3fa4058b3d4 100644 --- a/crates/rspack_binding_options/src/options/raw_builtins/raw_lightning_css_minimizer.rs +++ b/crates/rspack_binding_options/src/options/raw_builtins/raw_lightning_css_minimizer.rs @@ -2,7 +2,7 @@ use napi_derive::napi; use rspack_binding_values::{into_asset_conditions, RawAssetConditions}; use rspack_error::Result; use rspack_plugin_lightning_css_minimizer::{ - Browsers, Draft, MinimizerOptions, NonStandard, PluginOptions, PseudoClasses, + Draft, MinimizerOptions, NonStandard, PluginOptions, PseudoClasses, }; #[derive(Debug)] @@ -22,7 +22,7 @@ pub struct RawLightningCssMinimizerRspackPluginOptions { #[napi(object)] pub struct RawLightningCssMinimizerOptions { pub error_recovery: bool, - pub targets: Option, + pub targets: Option>, pub include: Option, pub exclude: Option, pub draft: Option, @@ -79,17 +79,15 @@ impl TryFrom for PluginOptions { remove_unused_local_idents: value.remove_unused_local_idents, minimizer_options: MinimizerOptions { error_recovery: value.minimizer_options.error_recovery, - targets: value.minimizer_options.targets.map(|t| Browsers { - android: t.android, - chrome: t.chrome, - edge: t.edge, - firefox: t.firefox, - ie: t.ie, - ios_saf: t.ios_saf, - opera: t.opera, - safari: t.safari, - samsung: t.samsung, - }), + targets: value + .minimizer_options + .targets + .map(|t| { + rspack_loader_lightningcss::lightningcss::targets::Browsers::from_browserslist(t) + }) + .transpose() + .map_err(|e| rspack_error::error!("Failed to parse browserslist: {}", e))? + .flatten(), include: value.minimizer_options.include, exclude: value.minimizer_options.exclude, draft: value.minimizer_options.draft.map(|d| Draft { diff --git a/crates/rspack_binding_options/src/plugins/js_loader/resolver.rs b/crates/rspack_binding_options/src/plugins/js_loader/resolver.rs index 91b744f5023..987ce00b92f 100644 --- a/crates/rspack_binding_options/src/plugins/js_loader/resolver.rs +++ b/crates/rspack_binding_options/src/plugins/js_loader/resolver.rs @@ -38,12 +38,17 @@ pub fn get_builtin_loader(builtin: &str, options: Option<&str>) -> BoxLoader { } if builtin.starts_with(LIGHTNINGCSS_LOADER_IDENTIFIER) { - let config = serde_json::from_str(options.unwrap_or("{}")).unwrap_or_else(|e| { - panic!("Could not parse builtin:lightningcss-loader options:{options:?},error: {e:?}") - }); + let config: rspack_loader_lightningcss::config::RawConfig = + serde_json::from_str(options.unwrap_or("{}")).unwrap_or_else(|e| { + panic!("Could not parse builtin:lightningcss-loader options:{options:?},error: {e:?}") + }); // TODO: builtin-loader supports function return Arc::new(rspack_loader_lightningcss::LightningCssLoader::new( - None, config, builtin, + None, + config.try_into().unwrap_or_else(|e| { + panic!("Could not parse builtin:lightningcss-loader options:{options:?},error: {e:?}") + }), + builtin, )); } diff --git a/crates/rspack_loader_lightningcss/src/config.rs b/crates/rspack_loader_lightningcss/src/config.rs index 13a13055cd0..7b892453724 100644 --- a/crates/rspack_loader_lightningcss/src/config.rs +++ b/crates/rspack_loader_lightningcss/src/config.rs @@ -23,8 +23,7 @@ pub struct PseudoClasses { pub focus_within: Option, } -#[derive(Debug, Deserialize, Default)] -#[serde(rename_all = "camelCase", default)] +#[derive(Debug, Default)] pub struct Config { pub error_recovery: Option, pub targets: Option, @@ -35,3 +34,37 @@ pub struct Config { pub pseudo_classes: Option, pub unused_symbols: Option>, } + +#[derive(Debug, Default, Deserialize)] +#[serde(rename_all = "camelCase", default)] +pub struct RawConfig { + pub error_recovery: Option, + pub targets: Option>, + pub include: Option, + pub exclude: Option, + pub draft: Option, + pub non_standard: Option, + pub pseudo_classes: Option, + pub unused_symbols: Option>, +} + +impl TryFrom for Config { + type Error = rspack_error::Error; + fn try_from(value: RawConfig) -> Result { + Ok(Self { + error_recovery: value.error_recovery, + targets: value + .targets + .map(lightningcss::targets::Browsers::from_browserslist) + .transpose() + .map_err(|err| rspack_error::error!("Failed to parse browserslist: {}", err))? + .flatten(), + include: value.include, + exclude: value.exclude, + draft: value.draft, + non_standard: value.non_standard, + pseudo_classes: value.pseudo_classes, + unused_symbols: value.unused_symbols, + }) + } +} diff --git a/crates/rspack_loader_lightningcss/src/lib.rs b/crates/rspack_loader_lightningcss/src/lib.rs index cc1f5c8caa5..b0c409c7506 100644 --- a/crates/rspack_loader_lightningcss/src/lib.rs +++ b/crates/rspack_loader_lightningcss/src/lib.rs @@ -2,6 +2,7 @@ use std::borrow::Cow; use config::Config; use derivative::Derivative; +pub use lightningcss; use lightningcss::{ printer::{PrinterOptions, PseudoClasses}, stylesheet::{MinifyOptions, ParserFlags, ParserOptions, StyleSheet}, @@ -13,7 +14,7 @@ use rspack_error::Result; use rspack_loader_runner::{Identifiable, Identifier}; use tokio::sync::Mutex; -mod config; +pub mod config; pub const LIGHTNINGCSS_LOADER_IDENTIFIER: &str = "builtin:lightningcss-loader"; diff --git a/packages/rspack-test-tools/tests/__snapshots__/StatsAPI.test.js.snap b/packages/rspack-test-tools/tests/__snapshots__/StatsAPI.test.js.snap index d6393004457..94d5499bd92 100644 --- a/packages/rspack-test-tools/tests/__snapshots__/StatsAPI.test.js.snap +++ b/packages/rspack-test-tools/tests/__snapshots__/StatsAPI.test.js.snap @@ -52,7 +52,7 @@ Object { "main.js", ], "filteredModules": undefined, - "hash": "6264df4ebe23175182cf", + "hash": "333e59d94047c9b4ec6c", "id": "909", "idHints": Array [], "initial": true, @@ -176,7 +176,7 @@ Object { "errorsCount": 0, "filteredAssets": undefined, "filteredModules": undefined, - "hash": "614628b5932899e281aa", + "hash": "a156b269cd7b4340da9d", "modules": Array [ Object { "assets": Array [], @@ -324,7 +324,7 @@ Object { "main.js", ], "filteredModules": undefined, - "hash": "74703a42d091bf923302", + "hash": "a2024ddd80c1dac51782", "id": "909", "idHints": Array [], "initial": true, @@ -691,7 +691,7 @@ Object { "errorsCount": 0, "filteredAssets": undefined, "filteredModules": undefined, - "hash": "500785fc8e6b099fa5e6", + "hash": "959ba20161293349edf3", "modules": Array [ Object { "assets": Array [], @@ -1458,7 +1458,7 @@ Object { "files": Array [ "main.js", ], - "hash": "6264df4ebe23175182cf", + "hash": "333e59d94047c9b4ec6c", "id": "909", "idHints": Array [], "initial": true, @@ -1714,7 +1714,7 @@ Object { "main.js", ], "filteredModules": undefined, - "hash": "507b35a9bc223de6c9b0", + "hash": "add6ca394a084131cdb7", "id": "909", "idHints": Array [], "initial": true, @@ -2063,7 +2063,7 @@ exports.c = require(\\"./c?c=3\\"); "errorsCount": 0, "filteredAssets": undefined, "filteredModules": undefined, - "hash": "f155d1e27c19baefa4cc", + "hash": "0e205cc26142ad8eade1", "modules": Array [ Object { "assets": Array [], diff --git a/packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/basic/rspack.config.js b/packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/basic/rspack.config.js index 0ea8d1a4ffe..c1e7fe2fc0e 100644 --- a/packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/basic/rspack.config.js +++ b/packages/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/basic/rspack.config.js @@ -1,6 +1,3 @@ -const rspack = require('@rspack/core') -const browserslist = require('browserslist') - /** @type {import("@rspack/core").Configuration} */ module.exports = { module: { @@ -18,7 +15,7 @@ module.exports = { /** @type {import("@rspack/core").LightningcssLoaderOptions} */ options: { unusedSymbols: ['unused'], - targets: browserslist('> 0.2%') + targets: '> 0.2%' } } ], diff --git a/packages/rspack-test-tools/tests/statsAPICases/basic.js b/packages/rspack-test-tools/tests/statsAPICases/basic.js index 498549bc177..b602a395f1d 100644 --- a/packages/rspack-test-tools/tests/statsAPICases/basic.js +++ b/packages/rspack-test-tools/tests/statsAPICases/basic.js @@ -39,7 +39,7 @@ module.exports = { entry ./fixtures/a cjs self exports reference self [585] ./fixtures/a.js - Rspack compiled successfully (614628b5932899e281aa)" + Rspack compiled successfully (a156b269cd7b4340da9d)" `); } }; diff --git a/packages/rspack-test-tools/tests/statsAPICases/chunks.js b/packages/rspack-test-tools/tests/statsAPICases/chunks.js index f613cd76d1b..803aceb173c 100644 --- a/packages/rspack-test-tools/tests/statsAPICases/chunks.js +++ b/packages/rspack-test-tools/tests/statsAPICases/chunks.js @@ -27,7 +27,7 @@ module.exports = { "chunkB.js", ], "filteredModules": undefined, - "hash": "3cd21283efb6761456db", + "hash": "9aa837bfaefd1fd4ec18", "id": "250", "idHints": Array [], "initial": false, @@ -144,7 +144,7 @@ module.exports = { "main.js", ], "filteredModules": undefined, - "hash": "a18b3c5199301c15e563", + "hash": "0e471e878e0dbdf0ba5a", "id": "909", "idHints": Array [], "initial": true, diff --git a/packages/rspack/etc/api.md b/packages/rspack/etc/api.md index 8044810d951..968b1dae8bf 100644 --- a/packages/rspack/etc/api.md +++ b/packages/rspack/etc/api.md @@ -5706,7 +5706,7 @@ export type LightningCssMinimizerRspackPluginOptions = { removeUnusedLocalIdents?: boolean; minimizerOptions?: { errorRecovery?: boolean; - targets?: Targets | string[] | string; + targets?: string[] | string; include?: LightningcssFeatureOptions; exclude?: LightningcssFeatureOptions; draft?: Drafts; diff --git a/packages/rspack/src/builtin-plugin/LightningCssMiminizerRspackPlugin.ts b/packages/rspack/src/builtin-plugin/LightningCssMiminizerRspackPlugin.ts index 311a84d4a95..7416d0b8391 100644 --- a/packages/rspack/src/builtin-plugin/LightningCssMiminizerRspackPlugin.ts +++ b/packages/rspack/src/builtin-plugin/LightningCssMiminizerRspackPlugin.ts @@ -1,17 +1,13 @@ import { BuiltinPluginName, - type RawLightningCssBrowsers, type RawLightningCssMinimizerRspackPluginOptions } from "@rspack/binding"; -import browserslist from "browserslist"; import { type Drafts, type FeatureOptions, type NonStandard, type PseudoClasses, - type Targets, - browserslistToTargets, toFeatures } from "../builtin-loader/lightningcss"; import type { AssetConditions } from "../util/assetCondition"; @@ -24,7 +20,7 @@ export type LightningCssMinimizerRspackPluginOptions = { removeUnusedLocalIdents?: boolean; minimizerOptions?: { errorRecovery?: boolean; - targets?: Targets | string[] | string; + targets?: string[] | string; include?: FeatureOptions; exclude?: FeatureOptions; draft?: Drafts; @@ -56,12 +52,7 @@ export const LightningCssMinimizerRspackPlugin = create( : // exclude all features, avoid downgrade css syntax when minimize // 1048575 = Features.Empty | Features.Nesting | ... | Features.LogicalProperties 1048575, - targets: - typeof targets === "string" || Array.isArray(targets) - ? (browserslistToTargets( - browserslist(targets) - ) as RawLightningCssBrowsers) - : targets, + targets: typeof targets === "string" ? [targets] : targets, draft: draft ? { customMedia: draft.customMedia ?? false } : undefined, nonStandard: nonStandard ? { diff --git a/packages/rspack/src/config/adapterRuleUse.ts b/packages/rspack/src/config/adapterRuleUse.ts index fc838cdd92c..37cdf069329 100644 --- a/packages/rspack/src/config/adapterRuleUse.ts +++ b/packages/rspack/src/config/adapterRuleUse.ts @@ -11,7 +11,6 @@ import type { Module } from "../Module"; import { resolvePluginImport } from "../builtin-loader"; import { type FeatureOptions, - browserslistToTargets, toFeatures } from "../builtin-loader/lightningcss"; import { type LoaderObject, parsePathQueryFragment } from "../loader-runner"; @@ -26,7 +25,6 @@ import type { RuleSetUseItem, Target } from "./zod"; -import browserslist = require("browserslist"); export const BUILTIN_LOADER_PREFIX = "builtin:"; @@ -213,12 +211,8 @@ const getSwcLoaderOptions: GetLoaderOptions = (o, _) => { const getLightningcssLoaderOptions: GetLoaderOptions = (o, _) => { if (o && typeof o === "object") { - if (o.targets && typeof o.targets === "string") { - o.targets = browserslistToTargets(browserslist(o.targets)); - } - - if (o.targets && Array.isArray(o.targets)) { - o.targets = browserslistToTargets(browserslist(o.targets)); + if (typeof o.targets === "string") { + o.targets = [o.targets]; } if (o.include && typeof o.include === "object") { diff --git a/website/docs/en/guide/features/builtin-lightningcss-loader.mdx b/website/docs/en/guide/features/builtin-lightningcss-loader.mdx index f42c0a57600..23f9a6c58a3 100644 --- a/website/docs/en/guide/features/builtin-lightningcss-loader.mdx +++ b/website/docs/en/guide/features/builtin-lightningcss-loader.mdx @@ -94,7 +94,7 @@ type LightningcssFeatureOptions = { type LightningcssLoaderOptions = { errorRecovery?: boolean; - targets?: Targets | string[] | string; + targets?: string[] | string; include?: LightningcssFeatureOptions; exclude?: LightningcssFeatureOptions; draft?: Drafts; @@ -106,7 +106,7 @@ type LightningcssLoaderOptions = { ### 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. +browserslist query string. Here are some examples of setting targets. @@ -133,32 +133,3 @@ const loader = { }, }; ``` - -- Setting the browserslist query result: - -```js -const browserslist = require('browserslist'); - -const loader = { - loader: 'builtin:lightningcss-loader', - /** @type {import('@rspack/core').LightningcssLoaderOptions} */ - options: { - targets: browserslist('> 0.2%'), - }, -}; -``` - -- 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'); - -const loader = { - loader: 'builtin:lightningcss-loader', - /** @type {import('@rspack/core').LightningcssLoaderOptions} */ - options: { - targets: lightningcss.browserslistToTargets(browserslist('> 0.2%')), - }, -}; -``` diff --git a/website/docs/en/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx b/website/docs/en/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx index 804562a0ef6..f0515b9c49c 100644 --- a/website/docs/en/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx +++ b/website/docs/en/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx @@ -73,7 +73,7 @@ At this point, the information that class name b is unused will be obtained via Configuration passed to Lightning CSS for minification. -Below are the configurations supported. For detailed usage, please refer to [Lightning CSS documentation](https://lightningcss.dev/transpilation.html) +Below are the configurations supported, `targets` configuration is plain browserslist query, for other detailed usage, please refer to [Lightning CSS documentation](https://lightningcss.dev/transpilation.html) :::info @@ -86,7 +86,7 @@ We recommend and encourage users to configure their own `targets` to achieve the ```ts type LightningCssMinimizerOptions = { errorRecovery?: boolean; - targets?: Targets | string[] | string; + targets?: string[] | string; include?: LightningcssFeatureOptions; exclude?: LightningcssFeatureOptions; draft?: Drafts; diff --git a/website/docs/zh/guide/features/builtin-lightningcss-loader.mdx b/website/docs/zh/guide/features/builtin-lightningcss-loader.mdx index c55cac7141c..80e8346c236 100644 --- a/website/docs/zh/guide/features/builtin-lightningcss-loader.mdx +++ b/website/docs/zh/guide/features/builtin-lightningcss-loader.mdx @@ -94,7 +94,7 @@ type LightningcssFeatureOptions = { type LightningcssLoaderOptions = { errorRecovery?: boolean; - targets?: Targets | string[] | string; + targets?: string[] | string; include?: LightningcssFeatureOptions; exclude?: LightningcssFeatureOptions; draft?: Drafts; @@ -106,7 +106,7 @@ type LightningcssLoaderOptions = { ### targets -`targets` 选项支持多种写法,它可以设置为 browserslist 查询字符串、browserslist 查询结果,或是 lightningcss 原生的 `targets`。 +browserslist 查询字符串。 下面是一些 targets 的用法示例。 @@ -133,32 +133,3 @@ const loader = { }, }; ``` - -- 设置 browserslist 查询结果: - -```js -const browserslist = require('browserslist'); - -const loader = { - loader: 'builtin:lightningcss-loader', - /** @type {import('@rspack/core').LightningcssLoaderOptions} */ - options: { - targets: browserslist('> 0.2%'), - }, -}; -``` - -- 设置为 lightningcss 原生的 `targets`,这依赖 lightningcss 内部的 `browserslistToTargets` 方法,它会将 `browserslist` 查询结果转换为 lightningcss 的 `targets` 格式: - -```js -const browserslist = require('browserslist'); -const lightningcss = require('lightningcss'); - -const loader = { - loader: 'builtin:lightningcss-loader', - /** @type {import('@rspack/core').LightningcssLoaderOptions} */ - options: { - targets: lightningcss.browserslistToTargets(browserslist('> 0.2%')), - }, -}; -``` diff --git a/website/docs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx b/website/docs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx index 788abf4b939..98705a513e7 100644 --- a/website/docs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx +++ b/website/docs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx @@ -73,7 +73,7 @@ document.body.className = styles.a; 传给 Lightning CSS 进行压缩的配置。 -以下是支持的配置。详细的解释请查看 [lightningcss 文档](https://lightningcss.dev/transpilation.html) +以下是支持的配置,其中 `targets` 配置为 browserslist 查询字符串,其他配置的详细解释请查看 [lightningcss 文档](https://lightningcss.dev/transpilation.html) :::info @@ -86,7 +86,7 @@ document.body.className = styles.a; ```ts type LightningCssMinimizerOptions = { errorRecovery?: boolean; - targets?: Targets | string[] | string; + targets?: string[] | string; include?: LightningcssFeatureOptions; exclude?: LightningcssFeatureOptions; draft?: Drafts;