useLightningcss#

• 상위 메뉴: next.config.js
• 전체 목차: Next.js 학습 문서

Experimental: 이 기능은 현재 experimental 상태이며 변경될 수 있다. production 환경에는 권장하지 않는다. 사용해 보고 GitHub에 피드백을 남길 수 있다.

학습 목표#

• webpack에서 Lightning CSS를 사용하도록 설정하는 방법을 이해한다.
• webpack과 Turbopack이 CSS를 처리하는 방식과 useLightningcss의 적용 범위를 구분한다.
• lightningCssFeatures의 include와 exclude로 CSS feature 변환을 제어하는 방법을 익힌다.

핵심 개념 및 설명#

Lightning CSS는 Rust로 작성된 빠른 CSS transformer이자 minifier다. useLightningcss는 webpack에서 Lightning CSS를 사용하도록 설정한다.

이 옵션을 설정하지 않으면 Next.js의 webpack은 기본적으로 PostCSS와 postcss-preset-env를 사용한다. Turbopack은 Next.js 14.2부터 Lightning CSS를 기본으로 사용하므로 이 옵션의 영향을 받지 않는다. Turbopack에서는 항상 Lightning CSS를 사용한다.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    useLightningcss: false, // 기본값이며 Turbopack에서는 무시된다.
  },
}

export default nextConfig

lightningCssFeatures#

Lightning CSS는 기본적으로 browserslist target을 기준으로 변환할 CSS feature를 정한다. lightningCssFeatures를 사용하면 브라우저 지원 여부와 관계없이 특정 feature를 항상 변환할지(include), 절대 변환하지 않을지(exclude) 강제할 수 있다.

이 설정은 useLightningcss를 활성화한 webpack과 Turbopack 모두에 적용된다.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    useLightningcss: true,
    lightningCssFeatures: {
      // target이 지원하더라도 항상 변환한다.
      include: ['light-dark', 'oklab-colors'],
      // target이 지원하지 않더라도 변환하지 않는다.
      exclude: ['nesting'],
    },
  },
}

export default nextConfig

옵션 (Options)#

사용 가능한 feature (Available features)#

개별 feature는 다음과 같다.

Composite group은 여러 feature를 한 번에 설정하는 축약형이다.

버전 기록 (Version History)#

예제 및 데모 설계#

• 데모 가능 여부: 가능
• webpack에서 useLightningcss: true와 false를 각각 빌드해 나온 CSS 변환 결과를 비교한다.
• lightningCssFeatures.include와 exclude에 같은 CSS feature를 다르게 지정하고 출력 CSS를 확인한다.
• Turbopack에서는 useLightningcss 값과 관계없이 Lightning CSS를 사용하는지 확인한다.

연습 문제#

1. useLightningcss가 적용되는 번들러는 무엇인가?

• A. webpack
• B. Turbopack만
• C. 두 번들러 모두 동일하게
• D. 어떤 번들러에도 적용되지 않는다.

1. lightningCssFeatures.include의 역할은 무엇인가?

• A. 특정 feature를 항상 변환한다.
• B. 특정 feature를 항상 제거한다.
• C. 모든 CSS를 minify하지 않는다.
• D. Turbopack을 끈다.

챕터 요약#

• useLightningcss는 webpack에서 Lightning CSS를 사용하는 experimental 옵션이다.
• Turbopack은 이 옵션과 관계없이 Lightning CSS를 사용한다.
• lightningCssFeatures.include와 exclude로 feature 변환을 강제할 수 있다.
• 개별 feature와 composite group을 설정할 수 있다.