diff --git a/.changeset/modern-wolves-poke.md b/.changeset/modern-wolves-poke.md new file mode 100644 index 000000000000..804d3ded2da9 --- /dev/null +++ b/.changeset/modern-wolves-poke.md @@ -0,0 +1,5 @@ +--- +'@modern-js/uni-builder': patch +--- + +feat: support enable lightningcssLoader diff --git a/packages/cli/uni-builder/src/rspack/index.ts b/packages/cli/uni-builder/src/rspack/index.ts index 64a3d359493b..13338fd0d505 100644 --- a/packages/cli/uni-builder/src/rspack/index.ts +++ b/packages/cli/uni-builder/src/rspack/index.ts @@ -50,6 +50,15 @@ export async function parseConfig( } } + if (Boolean(rsbuildConfig.tools!.lightningcssLoader) === false) { + const { pluginPostcss } = await import('../shared/plugins/postcss'); + rsbuildPlugins.push( + pluginPostcss({ + autoprefixer: uniBuilderConfig.tools?.autoprefixer, + }), + ); + } + const hasEnvironmentBabelConfig = Object.values( uniBuilderConfig.environments || {}, ).some(c => c.tools?.babel !== undefined); @@ -65,6 +74,7 @@ export async function parseConfig( } return config; }; + const { pluginBabel } = await import('@rsbuild/plugin-babel'); const { pluginBabelPost } = await import('./plugins/babel-post'); Object.entries(uniBuilderConfig.environments!).forEach(([name, config]) => { diff --git a/packages/cli/uni-builder/src/shared/parseCommonConfig.ts b/packages/cli/uni-builder/src/shared/parseCommonConfig.ts index adc490c0ef2c..3eec1dc43922 100644 --- a/packages/cli/uni-builder/src/shared/parseCommonConfig.ts +++ b/packages/cli/uni-builder/src/shared/parseCommonConfig.ts @@ -27,7 +27,6 @@ import { pluginEnvironmentDefaults } from './plugins/environmentDefaults'; import { pluginFrameworkConfig } from './plugins/frameworkConfig'; import { pluginGlobalVars } from './plugins/globalVars'; import { pluginHtmlMinifierTerser } from './plugins/htmlMinify'; -import { pluginPostcss } from './plugins/postcss'; import { pluginRuntimeChunk } from './plugins/runtimeChunk'; import { pluginSplitChunks } from './plugins/splitChunk'; import { NODE_MODULES_REGEX, castArray } from './utils'; @@ -452,12 +451,6 @@ export async function parseCommonConfig( }), ); - rsbuildPlugins.push( - pluginPostcss({ - autoprefixer, - }), - ); - if (enableAssetManifest) { const { pluginManifest } = await import('./plugins/manifest'); rsbuildPlugins.push(pluginManifest()); diff --git a/packages/cli/uni-builder/src/shared/plugins/postcss.ts b/packages/cli/uni-builder/src/shared/plugins/postcss.ts index c1b10b634366..1368d771d41a 100644 --- a/packages/cli/uni-builder/src/shared/plugins/postcss.ts +++ b/packages/cli/uni-builder/src/shared/plugins/postcss.ts @@ -25,8 +25,6 @@ export const pluginPostcss = ({ const enableCssMinify = !enableExtractCSS && isProd; - const enableAutoprefixer = config.tools.lightningcssLoader === false; - const plugins = [ require('postcss-flexbugs-fixes'), !cssSupport.customProperties && require('postcss-custom-properties'), @@ -49,16 +47,15 @@ export const pluginPostcss = ({ }) : false, // The last insert autoprefixer - enableAutoprefixer && - require('autoprefixer')( - applyOptionsChain( - { - flexbox: 'no-2009', - overrideBrowserslist: config.output.overrideBrowserslist!, - }, - autoprefixer, - ), + require('autoprefixer')( + applyOptionsChain( + { + flexbox: 'no-2009', + overrideBrowserslist: config.output.overrideBrowserslist!, + }, + autoprefixer, ), + ), ].filter(Boolean); return mergeEnvironmentConfig( diff --git a/packages/cli/uni-builder/src/webpack/index.ts b/packages/cli/uni-builder/src/webpack/index.ts index 9f5d06a5718c..8dad6e58d902 100644 --- a/packages/cli/uni-builder/src/webpack/index.ts +++ b/packages/cli/uni-builder/src/webpack/index.ts @@ -7,6 +7,7 @@ import { import type { PluginBabelOptions } from '@rsbuild/plugin-babel'; import { compatLegacyPlugin } from '../shared/compatLegacyPlugin'; import { parseCommonConfig } from '../shared/parseCommonConfig'; +import { pluginPostcss } from '../shared/plugins/postcss'; import { SERVICE_WORKER_ENVIRONMENT_NAME, castArray } from '../shared/utils'; import type { CreateBuilderCommonOptions, @@ -30,6 +31,12 @@ export async function parseConfig( options, ); + rsbuildPlugins.push( + pluginPostcss({ + autoprefixer: uniBuilderConfig.tools?.autoprefixer, + }), + ); + const hasEnvironmentBabelConfig = Object.values( uniBuilderConfig.environments || {}, ).some(c => c.tools?.babel !== undefined); diff --git a/packages/cli/uni-builder/tests/__snapshots__/postcssLegacy.test.ts.snap b/packages/cli/uni-builder/tests/__snapshots__/postcssLegacy.test.ts.snap index 81d8ce38c678..8f11de029a73 100644 --- a/packages/cli/uni-builder/tests/__snapshots__/postcssLegacy.test.ts.snap +++ b/packages/cli/uni-builder/tests/__snapshots__/postcssLegacy.test.ts.snap @@ -1,5 +1,111 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`lightningcss-loader > should register lightningcss-loader and disable postcss-loader when lightningcssLoader enabled 1`] = ` +[ + { + "dependency": { + "not": "url", + }, + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/cssExtractLoader.js", + }, + { + "loader": "/node_modules//@rsbuild/core/compiled/css-loader/index.js", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportGlobals": false, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": true, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "> 0.01%", + "not dead", + "not op_mini all", + ], + }, + }, + ], + }, +] +`; + +exports[`lightningcss-loader > should register lightningcss-loader and postcss-loader both 1`] = ` +[ + { + "dependency": { + "not": "url", + }, + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/cssExtractLoader.js", + }, + { + "loader": "/node_modules//@rsbuild/core/compiled/css-loader/index.js", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportGlobals": false, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": true, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "> 0.01%", + "not dead", + "not op_mini all", + ], + }, + }, + { + "loader": "/node_modules//@rsbuild/core/compiled/postcss-loader/index.js", + "options": { + "implementation": "/node_modules//@rsbuild/core/compiled/postcss/index.js", + "postcssOptions": { + "config": false, + "plugins": [ + { + "AtRule": {}, + "postcssPlugin": "postcss-plugin-test", + }, + ], + }, + "sourceMap": true, + }, + }, + ], + }, +] +`; + exports[`plugin-postcssLegacy > should allow tools.postcss to override the plugins 1`] = ` [ { diff --git a/packages/cli/uni-builder/tests/postcssLegacy.test.ts b/packages/cli/uni-builder/tests/postcssLegacy.test.ts index 63f873cb0f62..75bff34e376f 100644 --- a/packages/cli/uni-builder/tests/postcssLegacy.test.ts +++ b/packages/cli/uni-builder/tests/postcssLegacy.test.ts @@ -48,3 +48,47 @@ describe('plugin-postcssLegacy', () => { expect(matchRules({ config, testFile: 'a.less' })).toMatchSnapshot(); }); }); + +describe('lightningcss-loader', () => { + it('should register lightningcss-loader and disable postcss-loader when lightningcssLoader enabled', async () => { + const rsbuild = await createUniBuilder({ + bundlerType: 'rspack', + config: { + tools: { + lightningcssLoader: true, + }, + }, + cwd: '', + }); + + const config = await unwrapConfig(rsbuild); + + expect(matchRules({ config, testFile: 'a.css' })).toMatchSnapshot(); + }); + + it('should register lightningcss-loader and postcss-loader both', async () => { + const rsbuild = await createUniBuilder({ + bundlerType: 'rspack', + config: { + tools: { + lightningcssLoader: true, + postcss: { + postcssOptions: { + plugins: [ + { + postcssPlugin: 'postcss-plugin-test', + AtRule: {}, + }, + ], + }, + }, + }, + }, + cwd: '', + }); + + const config = await unwrapConfig(rsbuild); + + expect(matchRules({ config, testFile: 'a.css' })).toMatchSnapshot(); + }); +}); diff --git a/packages/document/main-doc/docs/en/configure/app/tools/lightningcss-loader.mdx b/packages/document/main-doc/docs/en/configure/app/tools/lightningcss-loader.mdx new file mode 100644 index 000000000000..5417880c971b --- /dev/null +++ b/packages/document/main-doc/docs/en/configure/app/tools/lightningcss-loader.mdx @@ -0,0 +1,41 @@ +--- +title: lightningcssLoader +configName: tools.lightningcssLoader +--- + +# tools.lightningcssLoader + +- **Type:** `Rspack.LightningcssLoaderOptions | Function | boolean` +- **Default:** `Rspack.LightningcssLoaderOptions | Function | boolean` +- **Bundler:** `only support rspack` + +You can configure [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`. + +## Enable loader + +Set `tools.lightningcssLoader` to `true` to enable Rsbuild's built-in `lightningcss-loader`: + +```js +export default { + tools: { + lightningcssLoader: true, + }, +}; +``` + +At this time, the default configuration is as follows: + +```js +const defaultOptions = { + // use current browserslist config + targets: browserslist, + // minify is enabled when output.injectStyles is true and in production mode + minify: config.mode === 'production' && config.output.injectStyles, +}; +``` + +It should be noted that when `lightningcss-loader` is turned on, `postcss-loader` will be turned off by default. + +import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip'; + + diff --git a/packages/document/main-doc/docs/en/configure/app/tools/postcss.mdx b/packages/document/main-doc/docs/en/configure/app/tools/postcss.mdx index fa17ccf8c5f1..223314f9d92a 100644 --- a/packages/document/main-doc/docs/en/configure/app/tools/postcss.mdx +++ b/packages/document/main-doc/docs/en/configure/app/tools/postcss.mdx @@ -12,26 +12,28 @@ configName: tools.postcss const defaultOptions = { postcssOptions: { plugins: [ - // 以下插件默认启用 + // The following plugins are enabled by default require('postcss-nesting'), require('postcss-media-minmax'), require('postcss-flexbugs-fixes'), require('autoprefixer')({ flexbox: 'no-2009', }), - // 以下插件仅在需要兼容低版本浏览器时启用 + // The following plugins are only enabled when compatible with legacy browsers require('postcss-custom-properties'), require('postcss-initial'), require('postcss-page-break'), require('postcss-font-variant'), ], - // 默认在开发环境下启用 CSS 的 Source Map sourceMap: isDev, }, }; ``` + Modern.js integrates PostCSS by default, you can configure [postcss-loader](https://github.com/webpack-contrib/postcss-loader) through `tools.postcss`. +It should be noted that when you enable the `tools.lightningcss` configuration, PostCSS will be disabled by default, including `postcss-loader` and its default plugins. + import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip'; diff --git a/packages/document/main-doc/docs/en/guides/basic-features/css/css.mdx b/packages/document/main-doc/docs/en/guides/basic-features/css/css.mdx index 5cc5b59db073..aaf4d291f108 100644 --- a/packages/document/main-doc/docs/en/guides/basic-features/css/css.mdx +++ b/packages/document/main-doc/docs/en/guides/basic-features/css/css.mdx @@ -20,6 +20,12 @@ Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code. Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage. +## Using Lightning CSS + +Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader). + +Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.dev/guide/basic/css-usage#lightning-css) for detailed usage. + ## Using Uno CSS Please read the [Rsbuild - Using UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) for detailed usage. diff --git a/packages/document/main-doc/docs/en/guides/get-started/tech-stack.mdx b/packages/document/main-doc/docs/en/guides/get-started/tech-stack.mdx index 6736652b8cc3..57b0d4910eb8 100644 --- a/packages/document/main-doc/docs/en/guides/get-started/tech-stack.mdx +++ b/packages/document/main-doc/docs/en/guides/get-started/tech-stack.mdx @@ -60,6 +60,8 @@ During production builds, Modern.js uses [Terser](https://github.com/terser/ters Modern.js uses [PostCSS](https://postcss.org/) to transform CSS code and enables [autoprefixer](https://github.com/postcss/autoprefixer) by default to add CSS prefixes. +Modern.js supports enabling ["Lightning CSS"](/configure/app/tools/lightningcss-loader), which uses Lightning CSS to downgrade CSS syntax. + Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwindcss) and is compatible with both Tailwind CSS v2 and v3. ## CSS Preprocessors diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/lightningcss-loader.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/lightningcss-loader.mdx new file mode 100644 index 000000000000..a65f7e0a7cfb --- /dev/null +++ b/packages/document/main-doc/docs/zh/configure/app/tools/lightningcss-loader.mdx @@ -0,0 +1,41 @@ +--- +title: lightningcssLoader +configName: tools.lightningcssLoader +--- + +# tools.lightningcssLoader + +- **类型：** `Rspack.LightningcssLoaderOptions | Function | boolean` +- **默认值：** `false` +- **打包工具：** `仅支持 rspack` + +通过 `tools.lightningcssLoader` 可以设置 [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) 的选项。 + +## 开启 loader + +将 `tools.lightningcssLoader` 设置为 `true`，可以开启 Rsbuild 内置的 `lightningcss-loader`： + +```js +export default { + tools: { + lightningcssLoader: true, + }, +}; +``` + +此时，默认生效的配置如下： + +```js +const defaultOptions = { + // use current browserslist config + targets: browserslist, + // minify is enabled when output.injectStyles is true and in production mode + minify: config.mode === 'production' && config.output.injectStyles, +}; +``` + +需要注意的是，开启 `lightningcss-loader` 时，将会默认关闭 `postcss-loader`。 + +import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip'; + + diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/postcss.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/postcss.mdx index c377514d10f6..927ecfd3feba 100644 --- a/packages/document/main-doc/docs/zh/configure/app/tools/postcss.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/tools/postcss.mdx @@ -33,6 +33,8 @@ const defaultOptions = { Modern.js 默认集成 PostCSS，你可以通过 `tools.postcss` 对 [postcss-loader](https://github.com/webpack-contrib/postcss-loader) 进行配置。 +需要注意的是，当你开启 `tools.lightningcss` 配置时，PostCSS 将会被默认禁用，包括 `postcss-loader` 及其默认插件。 + import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip'; diff --git a/packages/document/main-doc/docs/zh/guides/basic-features/css/css.mdx b/packages/document/main-doc/docs/zh/guides/basic-features/css/css.mdx index bf7f90f1dd14..4f111efa9b4f 100644 --- a/packages/document/main-doc/docs/zh/guides/basic-features/css/css.mdx +++ b/packages/document/main-doc/docs/zh/guides/basic-features/css/css.mdx @@ -20,6 +20,12 @@ Modern.js 内置了 [PostCSS](https://postcss.org/) 来转换 CSS 代码。 请阅读 [Rsbuild - 使用 PostCSS](https://rsbuild.dev/zh/guide/basic/css-usage#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。 +## 使用 Lightning CSS + +Modern.js 支持使用 [Lightning CSS](https://lightningcss.dev/) 来转换 CSS 代码，可以通过配置 [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader) 来开启此功能。 + +请阅读 [Rsbuild - 使用 Lightning CSS](https://rsbuild.dev/zh/guide/basic/css-usage#lightning-css) 了解更多用法。 + ## 使用 Uno CSS 请阅读 [Rsbuild - 使用 UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) 了解更多用法。 diff --git a/packages/document/main-doc/docs/zh/guides/get-started/tech-stack.mdx b/packages/document/main-doc/docs/zh/guides/get-started/tech-stack.mdx index 77a827ef0872..b028875b1034 100644 --- a/packages/document/main-doc/docs/zh/guides/get-started/tech-stack.mdx +++ b/packages/document/main-doc/docs/zh/guides/get-started/tech-stack.mdx @@ -60,6 +60,8 @@ Modern.js 使用 [Babel](https://babeljs.io/)、[SWC](https://swc.rs/) 或 [esbu Modern.js 使用 [PostCSS](https://postcss.org/) 来转换 CSS 代码，并默认开启 [autoprefixer](https://github.com/postcss/autoprefixer) 来补全 CSS 前缀。 +Modern.js 支持 [启用 Lightning CSS](/configure/app/tools/lightningcss-loader)，使用 Lightning CSS 降级 CSS 语法。 + Modern.js 支持 [启用 Tailwind CSS](/guides/basic-features/css/tailwindcss)，并同时兼容 Tailwind CSS v2 和 v3 版本。 ## CSS 预处理器