目次

はじめに

先月にViteのv6.3がリリースされ、アップデート内容の一つにLightning CSSをCSSプリプロセッサーとしてのサポートがありました。

https://x.com/vite_js/status/1912420393811390551

私はこれまでLightning CSSを知らなかったので、この機会に調べて簡単な紹介記事にしました。

Lightning CSSとは

Lightning CSSはCSSのビルドツールで、Rustで実装されておりビルドの速さを売りにしています。

Lightning CSSでは、現代のCSS実装で求められる次のような機能が備えられています。

  • コード圧縮
  • browserlistに沿った最適化
    • ベンダープレフィックス
    • CSS Nestingなどの新しいCSS構文を変換
  • CSS Modules
  • @import構文によるCSSのバンドル

そんなLightning CSSは、元々Parcelのバンドラーの一部として開発されていたものが、現在は単独でも使えるように公開されているようです。

同じような機能や役割を持った類似ライブラリとしては、esbuildやPostCSSあたりになるかなと思います。これらに比べて、Lightning CSSは高速かつCSS特化なところが強みに見えます。

CSSの量が多い巨大アプリケーションなどでは、ビルド速度の恩恵を受けやすいのではと思うので、仕事で機会があれば使ってみようかなと思っています。

ViteでのLightning CSSのサポート状況

Viteのv4.4からCSSの圧縮処理で実験的にLightning CSSをサポートしていたらしく、v6.3でCSSプリプロセッサーとしての機能も使えるようになったようです。

https://ja.vite.dev/guide/features#lightning-css

ただしViteの実装上のコメントアウトからも、あくまでもサポート範囲が広がった状態で、まだ実験的サポートのようです。

https://github.com/vitejs/vite/blob/v6.3.0/packages/vite/src/node/plugins/css.ts#L163-L166

ViteでLightning CSSを使うには

Viteのconfigファイルのcss.transformerに'lightningcss'が指定できます。次はViteでLightning CSSを使うためのvite.config.jsの一例です。

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      // Lightning CSSの設定
      cssModules: true,
    },
  },
})

そして、Lightning CSSはViteの依存には含まれていないので、次のように追加でインストールが必要です。

npm i -D lightningcss

あとは従来通りviteやvite buildコマンドを実行するだけで、Lightning CSSでCSSをビルドできます。

ViteでLightning CSSを使う簡単なサンプルを kimulaco/vite-lightningcss-example に置きました。

まとめ

  • Vite 6.3からCSSプリプロセッサーとしてLightning CSSがサポートされました
    • まだ実験的サポートですが、徐々にサポート内容が増えています
  • Lightning CSSはRust製のCSSコンパイルライブラリで、最新のCSS構文の最適化や圧縮等を高速にできるのが特徴です
    • ベンダープレフィックス自動化や新しいCSS構文のサポート、CSS Modules対応など、現代のCSS実装に必要な機能をサポート