useLightningcss

Core Idea

Experimental flag enabling Lightning CSS (Rust-based CSS transformer/minifier) with webpack instead of the default PostCSS. Has no effect on Turbopack, which always uses Lightning CSS since Next 14.2.

Key Concepts

• experimental.useLightningcss (default false): when true, disables PostCSS on webpack in favor of Lightning CSS.
• lightningCssFeatures.include/exclude: force-transpile or force-skip specific CSS features regardless of browserslist targets; applies to both webpack (when enabled) and Turbopack.
• Composite groups: selectors, media-queries, colors bundle multiple related features under one name.

Code Examples

const nextConfig: NextConfig = {
  experimental: {
    useLightningcss: true,
    lightningCssFeatures: {
      include: ['light-dark', 'oklab-colors'],
      exclude: ['nesting'],
    },
  },
}

• O que demonstra: força transpilação de light-dark/oklab-colors e nunca transpila nesting, independente do browserslist.

Reference Tables

Group name	Includes
selectors	nesting, not-selector-list, dir-selector, lang-selector-list, is-selector
media-queries	media-interval-syntax, media-range-syntax, custom-media-queries
colors	color-function, oklab-colors, lab-colors, p3-colors, hex-alpha-colors, space-separated-color-notation, light-dark

Key Takeaways

1. Sem essa flag, webpack usa PostCSS + postcss-preset-env por padrão; Turbopack sempre usa Lightning CSS, então a flag não afeta Turbopack.
2. lightningCssFeatures sobrescreve a decisão automática baseada em browserslist, útil pra forçar/bloquear features específicas de CSS.
3. Individual feature names existem pra granularidade fina; groups são atalhos.

Connects To

• turbopack (ch420): Turbopack já vem com Lightning CSS embutido, tornando essa config redundante lá.