feat: support enable lightningcssLoader (#6614)

web-infra-dev · Dec 9, 2024 · e6980aa · e6980aa
1 parent 80d8f23
commit e6980aa
Show file tree

Hide file tree

Showing 15 changed files with 285 additions and 21 deletions.
diff --git a/.changeset/modern-wolves-poke.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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": "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/core/dist/cssExtractLoader.js",
+      },
+      {
+        "loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/@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": "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/core/dist/cssExtractLoader.js",
+      },
+      {
+        "loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/@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": "<WORKSPACE>/node_modules/<PNPM_INNER>/@rsbuild/core/compiled/postcss-loader/index.js",
+        "options": {
+          "implementation": "<WORKSPACE>/node_modules/<PNPM_INNER>/@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
@@ -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
@@ -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';
+
+<RsbuildConig />
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
@@ -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';
 
 <RsbuildConig />
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
@@ -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
@@ -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