Skip to content

Commit

Permalink
feat: support enable lightningcssLoader
Browse files Browse the repository at this point in the history
  • Loading branch information
9aoy committed Dec 6, 2024
1 parent 3d2bf55 commit d3d7106
Show file tree
Hide file tree
Showing 15 changed files with 324 additions and 58 deletions.
5 changes: 5 additions & 0 deletions .changeset/modern-wolves-poke.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@modern-js/uni-builder': patch
---

feat: support enable lightningcssLoader
9 changes: 9 additions & 0 deletions packages/cli/uni-builder/src/rspack/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,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,
}),
);
}

if (uniBuilderConfig.tools?.babel) {
const { pluginBabel } = await import('@rsbuild/plugin-babel');
const { pluginBabelPost } = await import('./plugins/babel-post');
Expand Down
7 changes: 0 additions & 7 deletions packages/cli/uni-builder/src/shared/parseCommonConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -452,12 +451,6 @@ export async function parseCommonConfig(
}),
);

rsbuildPlugins.push(
pluginPostcss({
autoprefixer,
}),
);

if (enableAssetManifest) {
const { pluginManifest } = await import('./plugins/manifest');
rsbuildPlugins.push(pluginManifest());
Expand Down
19 changes: 8 additions & 11 deletions packages/cli/uni-builder/src/shared/plugins/postcss.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand All @@ -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(
Expand Down
7 changes: 7 additions & 0 deletions packages/cli/uni-builder/src/webpack/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
} from '@rsbuild/core';
import { compatLegacyPlugin } from '../shared/compatLegacyPlugin';
import { parseCommonConfig } from '../shared/parseCommonConfig';
import { pluginPostcss } from '../shared/plugins/postcss';
import { SERVICE_WORKER_ENVIRONMENT_NAME } from '../shared/utils';
import type {
CreateBuilderCommonOptions,
Expand All @@ -29,6 +30,12 @@ export async function parseConfig(
options,
);

rsbuildPlugins.push(
pluginPostcss({
autoprefixer: uniBuilderConfig.tools?.autoprefixer,
}),
);

rsbuildPlugins.push(
pluginBabel(
{
Expand Down
Original file line number Diff line number Diff line change
@@ -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`] = `
[
{
Expand Down
44 changes: 44 additions & 0 deletions packages/cli/uni-builder/tests/postcssLegacy.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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 />
44 changes: 24 additions & 20 deletions packages/document/main-doc/docs/en/configure/app/tools/postcss.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,31 @@ configName: tools.postcss
- **Default:**

```js
const defaultOptions = {
postcssOptions: {
plugins: [
// 以下插件默认启用
require('postcss-nesting'),
require('postcss-media-minmax'),
require('postcss-flexbugs-fixes'),
require('autoprefixer')({
flexbox: 'no-2009',
}),
// 以下插件仅在需要兼容低版本浏览器时启用
require('postcss-custom-properties'),
require('postcss-initial'),
require('postcss-page-break'),
require('postcss-font-variant'),
],
// 默认在开发环境下启用 CSS 的 Source Map
sourceMap: isDev,
},
};
const defaultOptions =
tools.lightningcssLoader === false
? {
postcssOptions: {
plugins: [
// 以下插件默认启用
require('postcss-nesting'),
require('postcss-media-minmax'),
require('postcss-flexbugs-fixes'),
require('autoprefixer')({
flexbox: 'no-2009',
}),
// 以下插件仅在需要兼容低版本浏览器时启用
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`.

import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit d3d7106

Please sign in to comment.