diff --git a/docs/config/build-options.md b/docs/config/build-options.md index 22306a7eabcc3b..7552215ed5edfa 100644 --- a/docs/config/build-options.md +++ b/docs/config/build-options.md @@ -119,10 +119,10 @@ In this case, you need to set `build.cssTarget` to `chrome61` to prevent vite fr ## build.cssMinify -- **Type:** `boolean` +- **Type:** `boolean | 'esbuild' | 'lightningcss'` - **Default:** the same as [`build.minify`](#build-minify) -This option allows users to override CSS minification specifically instead of defaulting to `build.minify`, so you can configure minification for JS and CSS separately. Vite uses `esbuild` to minify CSS. +This option allows users to override CSS minification specifically instead of defaulting to `build.minify`, so you can configure minification for JS and CSS separately. Vite uses `esbuild` by default to minify CSS. Set the option to `'lightningcss'` to use [Lightning CSS](https://lightningcss.dev/minification.html) instead. If selected, it can be configured using [`css.lightningcss`](./shared-options.md#css-lightningcss). ## build.sourcemap diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index e67ddb72a1f176..d262e2176c83fe 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -210,6 +210,8 @@ Enabling this setting causes vite to determine file identity by the original fil Configure CSS modules behavior. The options are passed on to [postcss-modules](https://github.com/css-modules/postcss-modules). +This option doesn't have any effect when using [Lightning CSS](../guide/features.md#lightning-css). If enabled, [`css.lightningcss.cssModules`](https://lightningcss.dev/css-modules.html) should be used instead. + ## css.postcss - **Type:** `string | (postcss.ProcessOptions & { plugins?: postcss.AcceptedPlugin[] })` @@ -264,6 +266,46 @@ export default defineConfig({ Whether to enable sourcemaps during dev. +## css.transformer + +- **Experimental** +- **Type:** `'postcss' | 'lightningcss'` +- **Default:** `'postcss'` + +Selects the engine used for CSS processing. Check out [Lightning CSS](../guide/features.md#lightning-css) for more information. + +## css.lightningcss + +- **Experimental** +- **Type:** + +```js +import type { + CSSModulesConfig, + Drafts, + Features, + NonStandard, + PseudoClasses, + Targets, +} from 'lightningcss' +``` + +```js +{ + targets?: Targets + include?: Features + exclude?: Features + drafts?: Drafts + nonStandard?: NonStandard + pseudoClasses?: PseudoClasses + unusedSymbols?: string[] + cssModules?: CSSModulesConfig, + // ... +} +``` + +Configures Lightning CSS. Full transform options can be found in [the Lightning CSS repo](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts). + ## json.namedExports - **Type:** `boolean` diff --git a/docs/guide/features.md b/docs/guide/features.md index c9e658076b677d..ed5758e6ab881d 100644 --- a/docs/guide/features.md +++ b/docs/guide/features.md @@ -256,6 +256,24 @@ import otherStyles from './bar.css?inline' // will not be injected Default and named imports from CSS files (e.g `import style from './foo.css'`) are deprecated since Vite 4. Use the `?inline` query instead. ::: +### Lightning CSS + +Starting from Vite 4.4, there is experimental support for [Lightning CSS](https://lightningcss.dev/). You can opt into it by adding [`css.transformer: 'lightningcss'`](../config/shared-options.md#css-transformer) to your config file and install the optional [`lightningcss`](https://www.npmjs.com/package/lightningcss) dependency: + +```bash +npm add -D lightningcss +``` + +If enabled, CSS files will be processed by Lightning CSS instead of PostCSS. To configure it, you can pass Lightining CSS options to the [`css.lightingcss`](../config/shared-options.md#css-lightningcss) config option. + +To configue CSS Modules, you'll use [`css.lightningcss.cssModules`](https://lightningcss.dev/css-modules.html) instead of [`css.modules`](../config/shared-options.md#css-modules) (wich configures the way PostCSS handles CSS modules). + +By default, Vite uses esbuild to minify CSS. Lightning CSS can also be used as the CSS minifier with [`build.cssMinify: 'lightningcss'`](../config/build-options.md#css-minify). + +::: tip NOTE +[CSS Pre-processors](/#css-pre-processors) aren't supported when using Lightning CSS. +::: + ## Static Assets Importing a static asset will return the resolved public URL when it is served: