docs: experimental Lightning CSS support (#13583)

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
 

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`

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: