useLightningcss

Experimental support for using Lightning CSS with webpack. Lightning CSS is a fast CSS transformer and minifier, written in Rust.

If this option is not set, Next.js on webpack uses PostCSS with postcss-preset-env by default.

Turbopack uses Lightning CSS by default since Next 14.2. This configuration option has no effect on Turbopack. Turbopack always uses Lightning CSS.

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    useLightningcss: false, // default, ignored on Turbopack
  },
}
 
export default nextConfig

lightningCssFeatures

By default, Lightning CSS decides which CSS features to transpile based on your browserslist targets. The lightningCssFeatures option lets you override this by forcing specific features to always be transpiled (include) or never be transpiled (exclude), regardless of browser support.

This applies to both webpack (when useLightningcss is enabled) and Turbopack.

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    useLightningcss: true,
    lightningCssFeatures: {
      // Always transpile these features, even if targets support them
      include: ['light-dark', 'oklab-colors'],
      // Never transpile these features, even if targets don't support them
      exclude: ['nesting'],
    },
  },
}
 
export default nextConfig

Options

Available features

Individual features:

Composite groups (shorthand for enabling multiple features at once):

Version History