Skip to content

Commit e6980aa

Browse files
9aoy9aoy
authored
feat: support enable lightningcssLoader (#6614)
1 parent 80d8f23 commit e6980aa

File tree

15 files changed

+285
-21
lines changed

15 files changed

+285
-21
lines changed

‎.changeset/modern-wolves-poke.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@modern-js/uni-builder': patch
3+
---
4+
5+
feat: support enable lightningcssLoader

‎packages/cli/uni-builder/src/rspack/index.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,15 @@ export async function parseConfig(
5050
}
5151
}
5252

53+
if (Boolean(rsbuildConfig.tools!.lightningcssLoader) === false) {
54+
const { pluginPostcss } = await import('../shared/plugins/postcss');
55+
rsbuildPlugins.push(
56+
pluginPostcss({
57+
autoprefixer: uniBuilderConfig.tools?.autoprefixer,
58+
}),
59+
);
60+
}
61+
5362
const hasEnvironmentBabelConfig = Object.values(
5463
uniBuilderConfig.environments || {},
5564
).some(c => c.tools?.babel !== undefined);
@@ -65,6 +74,7 @@ export async function parseConfig(
6574
}
6675
return config;
6776
};
77+
6878
const { pluginBabel } = await import('@rsbuild/plugin-babel');
6979
const { pluginBabelPost } = await import('./plugins/babel-post');
7080
Object.entries(uniBuilderConfig.environments!).forEach(([name, config]) => {

‎packages/cli/uni-builder/src/shared/parseCommonConfig.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import { pluginEnvironmentDefaults } from './plugins/environmentDefaults';
2727
import { pluginFrameworkConfig } from './plugins/frameworkConfig';
2828
import { pluginGlobalVars } from './plugins/globalVars';
2929
import { pluginHtmlMinifierTerser } from './plugins/htmlMinify';
30-
import { pluginPostcss } from './plugins/postcss';
3130
import { pluginRuntimeChunk } from './plugins/runtimeChunk';
3231
import { pluginSplitChunks } from './plugins/splitChunk';
3332
import { NODE_MODULES_REGEX, castArray } from './utils';
@@ -452,12 +451,6 @@ export async function parseCommonConfig(
452451
}),
453452
);
454453

455-
rsbuildPlugins.push(
456-
pluginPostcss({
457-
autoprefixer,
458-
}),
459-
);
460-
461454
if (enableAssetManifest) {
462455
const { pluginManifest } = await import('./plugins/manifest');
463456
rsbuildPlugins.push(pluginManifest());

‎packages/cli/uni-builder/src/shared/plugins/postcss.ts

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ export const pluginPostcss = ({
2525

2626
const enableCssMinify = !enableExtractCSS && isProd;
2727

28-
const enableAutoprefixer = config.tools.lightningcssLoader === false;
29-
3028
const plugins = [
3129
require('postcss-flexbugs-fixes'),
3230
!cssSupport.customProperties && require('postcss-custom-properties'),
@@ -49,16 +47,15 @@ export const pluginPostcss = ({
4947
})
5048
: false,
5149
// The last insert autoprefixer
52-
enableAutoprefixer &&
53-
require('autoprefixer')(
54-
applyOptionsChain(
55-
{
56-
flexbox: 'no-2009',
57-
overrideBrowserslist: config.output.overrideBrowserslist!,
58-
},
59-
autoprefixer,
60-
),
50+
require('autoprefixer')(
51+
applyOptionsChain(
52+
{
53+
flexbox: 'no-2009',
54+
overrideBrowserslist: config.output.overrideBrowserslist!,
55+
},
56+
autoprefixer,
6157
),
58+
),
6259
].filter(Boolean);
6360

6461
return mergeEnvironmentConfig(

‎packages/cli/uni-builder/src/webpack/index.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
import type { PluginBabelOptions } from '@rsbuild/plugin-babel';
88
import { compatLegacyPlugin } from '../shared/compatLegacyPlugin';
99
import { parseCommonConfig } from '../shared/parseCommonConfig';
10+
import { pluginPostcss } from '../shared/plugins/postcss';
1011
import { SERVICE_WORKER_ENVIRONMENT_NAME, castArray } from '../shared/utils';
1112
import type {
1213
CreateBuilderCommonOptions,
@@ -30,6 +31,12 @@ export async function parseConfig(
3031
options,
3132
);
3233

34+
rsbuildPlugins.push(
35+
pluginPostcss({
36+
autoprefixer: uniBuilderConfig.tools?.autoprefixer,
37+
}),
38+
);
39+
3340
const hasEnvironmentBabelConfig = Object.values(
3441
uniBuilderConfig.environments || {},
3542
).some(c => c.tools?.babel !== undefined);

‎packages/cli/uni-builder/tests/__snapshots__/postcssLegacy.test.ts.snap

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,111 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
exports[`lightningcss-loader > should register lightningcss-loader and disable postcss-loader when lightningcssLoader enabled 1`] = `
4+
[
5+
{
6+
"dependency": {
7+
"not": "url",
8+
},
9+
"resolve": {
10+
"preferRelative": true,
11+
},
12+
"sideEffects": true,
13+
"test": /\\\\\\.css\\$/,
14+
"type": "javascript/auto",
15+
"use": [
16+
{
17+
"loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/core/dist/cssExtractLoader.js",
18+
},
19+
{
20+
"loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/@rsbuild/core/compiled/css-loader/index.js",
21+
"options": {
22+
"importLoaders": 1,
23+
"modules": {
24+
"auto": true,
25+
"exportGlobals": false,
26+
"exportLocalsConvention": "camelCase",
27+
"localIdentName": "[path][name]__[local]-[hash:base64:6]",
28+
"namedExport": false,
29+
},
30+
"sourceMap": true,
31+
},
32+
},
33+
{
34+
"loader": "builtin:lightningcss-loader",
35+
"options": {
36+
"targets": [
37+
"> 0.01%",
38+
"not dead",
39+
"not op_mini all",
40+
],
41+
},
42+
},
43+
],
44+
},
45+
]
46+
`;
47+
48+
exports[`lightningcss-loader > should register lightningcss-loader and postcss-loader both 1`] = `
49+
[
50+
{
51+
"dependency": {
52+
"not": "url",
53+
},
54+
"resolve": {
55+
"preferRelative": true,
56+
},
57+
"sideEffects": true,
58+
"test": /\\\\\\.css\\$/,
59+
"type": "javascript/auto",
60+
"use": [
61+
{
62+
"loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/core/dist/cssExtractLoader.js",
63+
},
64+
{
65+
"loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/@rsbuild/core/compiled/css-loader/index.js",
66+
"options": {
67+
"importLoaders": 2,
68+
"modules": {
69+
"auto": true,
70+
"exportGlobals": false,
71+
"exportLocalsConvention": "camelCase",
72+
"localIdentName": "[path][name]__[local]-[hash:base64:6]",
73+
"namedExport": false,
74+
},
75+
"sourceMap": true,
76+
},
77+
},
78+
{
79+
"loader": "builtin:lightningcss-loader",
80+
"options": {
81+
"targets": [
82+
"> 0.01%",
83+
"not dead",
84+
"not op_mini all",
85+
],
86+
},
87+
},
88+
{
89+
"loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/@rsbuild/core/compiled/postcss-loader/index.js",
90+
"options": {
91+
"implementation": "<WORKSPACE>/node_modules/<PNPM_INNER>/@rsbuild/core/compiled/postcss/index.js",
92+
"postcssOptions": {
93+
"config": false,
94+
"plugins": [
95+
{
96+
"AtRule": {},
97+
"postcssPlugin": "postcss-plugin-test",
98+
},
99+
],
100+
},
101+
"sourceMap": true,
102+
},
103+
},
104+
],
105+
},
106+
]
107+
`;
108+
3109
exports[`plugin-postcssLegacy > should allow tools.postcss to override the plugins 1`] = `
4110
[
5111
{

‎packages/cli/uni-builder/tests/postcssLegacy.test.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,47 @@ describe('plugin-postcssLegacy', () => {
4848
expect(matchRules({ config, testFile: 'a.less' })).toMatchSnapshot();
4949
});
5050
});
51+
52+
describe('lightningcss-loader', () => {
53+
it('should register lightningcss-loader and disable postcss-loader when lightningcssLoader enabled', async () => {
54+
const rsbuild = await createUniBuilder({
55+
bundlerType: 'rspack',
56+
config: {
57+
tools: {
58+
lightningcssLoader: true,
59+
},
60+
},
61+
cwd: '',
62+
});
63+
64+
const config = await unwrapConfig(rsbuild);
65+
66+
expect(matchRules({ config, testFile: 'a.css' })).toMatchSnapshot();
67+
});
68+
69+
it('should register lightningcss-loader and postcss-loader both', async () => {
70+
const rsbuild = await createUniBuilder({
71+
bundlerType: 'rspack',
72+
config: {
73+
tools: {
74+
lightningcssLoader: true,
75+
postcss: {
76+
postcssOptions: {
77+
plugins: [
78+
{
79+
postcssPlugin: 'postcss-plugin-test',
80+
AtRule: {},
81+
},
82+
],
83+
},
84+
},
85+
},
86+
},
87+
cwd: '',
88+
});
89+
90+
const config = await unwrapConfig(rsbuild);
91+
92+
expect(matchRules({ config, testFile: 'a.css' })).toMatchSnapshot();
93+
});
94+
});

‎packages/document/main-doc/docs/en/configure/app/tools/lightningcss-loader.mdx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: lightningcssLoader
3+
configName: tools.lightningcssLoader
4+
---
5+
6+
# tools.lightningcssLoader
7+
8+
- **Type:** `Rspack.LightningcssLoaderOptions | Function | boolean`
9+
- **Default:** `Rspack.LightningcssLoaderOptions | Function | boolean`
10+
- **Bundler:** `only support rspack`
11+
12+
You can configure [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`.
13+
14+
## Enable loader
15+
16+
Set `tools.lightningcssLoader` to `true` to enable Rsbuild's built-in `lightningcss-loader`:
17+
18+
```js
19+
export default {
20+
tools: {
21+
lightningcssLoader: true,
22+
},
23+
};
24+
```
25+
26+
At this time, the default configuration is as follows:
27+
28+
```js
29+
const defaultOptions = {
30+
// use current browserslist config
31+
targets: browserslist,
32+
// minify is enabled when output.injectStyles is true and in production mode
33+
minify: config.mode === 'production' && config.output.injectStyles,
34+
};
35+
```
36+
37+
It should be noted that when `lightningcss-loader` is turned on, `postcss-loader` will be turned off by default.
38+
39+
import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
40+
41+
<RsbuildConig />

‎packages/document/main-doc/docs/en/configure/app/tools/postcss.mdx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,28 @@ configName: tools.postcss
1212
const defaultOptions = {
1313
postcssOptions: {
1414
plugins: [
15-
// 以下插件默认启用
15+
// The following plugins are enabled by default
1616
require('postcss-nesting'),
1717
require('postcss-media-minmax'),
1818
require('postcss-flexbugs-fixes'),
1919
require('autoprefixer')({
2020
flexbox: 'no-2009',
2121
}),
22-
// 以下插件仅在需要兼容低版本浏览器时启用
22+
// The following plugins are only enabled when compatible with legacy browsers
2323
require('postcss-custom-properties'),
2424
require('postcss-initial'),
2525
require('postcss-page-break'),
2626
require('postcss-font-variant'),
2727
],
28-
// 默认在开发环境下启用 CSS 的 Source Map
2928
sourceMap: isDev,
3029
},
3130
};
3231
```
32+
3333
Modern.js integrates PostCSS by default, you can configure [postcss-loader](https://github.com/webpack-contrib/postcss-loader) through `tools.postcss`.
3434

35+
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.
36+
3537
import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
3638

3739
<RsbuildConig />

‎packages/document/main-doc/docs/en/guides/basic-features/css/css.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
2020

2121
Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage.
2222

23+
## Using Lightning CSS
24+
25+
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).
26+
27+
Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.dev/guide/basic/css-usage#lightning-css) for detailed usage.
28+
2329
## Using Uno CSS
2430

2531
Please read the [Rsbuild - Using UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) for detailed usage.

0 commit comments

Comments
 (0)