Lightning CSS 2.0 — PostCSS 작별, 브라우저 호환 빌드 전략

핵심 요약

Lightning CSS 2.0이 2026년 4월 출시, Rust 기반 단일 바이너리로 minify·번들·browserslist 트랜스파일을 통합 처리. PostCSS 체인 대비 50~150배 빠르고 Vite 6, Parcel 2.13, Bun이 내장. PostCSS는 nesting, custom-media처럼 표준 진행 중인 기능 외엔 거의 불필요해졌다.

1. 무엇이 달라졌나

1.x도 빨랐지만 2.0은 CSS 모듈 dependency tracking, lightningcss bundle 명령, custom transform visitor API 3가지가 핵심. autoprefixer + cssnano + postcss-preset-env + postcss-modules 4단 콤보를 단일 호출로 치환한다.

2. 설치와 기본 사용

npm install lightningcss

# CLI
npx lightningcss --bundle --minify \
  --targets ">= 0.25%" \
  --css-modules \
  -o dist/app.css src/app.css

3. 프로그래매틱 API

import { bundle } from 'lightningcss';
import { browserslistToTargets } from 'lightningcss';
import browserslist from 'browserslist';

const { code, map } = bundle({
  filename: 'src/app.css',
  minify: true,
  sourceMap: true,
  targets: browserslistToTargets(browserslist('>= 0.25%')),
  drafts: { customMedia: true },
  cssModules: {
    pattern: '[name]__[local]__[hash]'
  }
});

4. 실측 — 중대형 디자인 시스템

78배. minify 결과물은 cssnano보다 약간 더 작다. 죽은 변수 제거가 더 공격적.

5. browserslist 트랜스파일

/* 입력 */
.card {
  & .title { color: oklch(60% 0.15 240); }
  background: light-dark(white, #111);
}

/* targets: chrome 100, safari 15, firefox 100 */
.card .title { color: rgb(31, 132, 198); }
.card { background: white; }
@media (prefers-color-scheme: dark) {
  .card { background: #111; }
}

중첩, oklch, light-dark까지 자동 다운레벨.

6. CSS 모듈 — composes와 sub-paths

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      drafts: { customMedia: true },
      cssModules: { pattern: '[hash]' }
    }
  },
  build: { cssMinify: 'lightningcss' }
});

7. 남겨야 할 PostCSS 플러그인

tailwindcss 4가 자체 엔진이라 PostCSS와 무관하지만, Tailwind 3.x 잔존 프로젝트는 여전히 PostCSS 필요. 그 외에 prettier-plugin-css처럼 PostCSS AST에 의존하는 도구는 빌드 파이프라인 밖으로 분리하면 된다.

8. visitor API

import { transform } from 'lightningcss';

const { code, warnings } = transform({
  filename: 'app.css',
  code: Buffer.from(source),
  visitor: {
    Color(c) {
      if (c.type === 'rgb') {
        return { type: 'currentcolor' };
      }
    }
  }
});

9. 마이그레이션 체크리스트

먼저 vite build cssMinify만 lightningcss로 전환. CI에서 시각 회귀 테스트(Percy, Chromatic) 돌려 차이 확인. autoprefixer 결과와 Lightning의 vendor prefix 처리는 미묘하게 다르다.

참고

• lightningcss.dev/docs.html
• github.com/parcel-bundler/lightningcss
• vitejs.dev/config/build-options.html#build-cssminify