Lightning CSS

Lightning CSS

Lightning CSS は、Rust で記述された非常に高速な CSS パーサー、トランスフォーマー、バンドラー、ミニファイアーです。PostCSS + autoprefixer + postcss-preset-env を単一のツールで置き換えます。

このスキルを使用する場面

このスキルを使用する場面...	別のものを使用する場面...
Vite で CSS 処理を設定する	ユーティリティクラスを生成する（UnoCSS を使用）
PostCSS/autoprefixer のパイプラインを置き換える	CSS ルールをリントする（Stylelint を使用）
ブラウザーターゲットへのトランスパイルを設定する	CSS-in-JS を記述する（フレームワークのツールを使用）
CSS モジュールを有効にする	CSS コードをフォーマットする（Biome/Prettier を使用）
本番環境向けに CSS をミニファイする	Lightning CSS に相当する機能がない PostCSS プラグインが必要
CSS の @import チェーンをバンドルする

主な機能

• Rust ネイティブ：変換処理は PostCSS より 100 倍以上高速です
• オールインワン：autoprefixer、postcss-preset-env、postcss-import、cssnano を置き換えます
• 構文の変換：ターゲットに基づき、最新の CSS をブラウザー互換の CSS に変換します
• ベンダープレフィックス：ターゲットに基づいて自動的に追加・削除します
• CSS モジュール：スコープ付きクラス名を標準でサポートします
• ミニファイ：esbuild の CSS ミニファイアーより出力サイズを小さくします
• バンドル：依存関係を解決しながら @import ルールをインライン化します

インストール

# As Vite dependency (most common)
npm add -D lightningcss browserslist

# Standalone CLI
npm add -g lightningcss-cli

# Bun
bun add -d lightningcss browserslist

Vite との統合

基本設定

// vite.config.ts
import { defineConfig } from 'vite'
import browserslist from 'browserslist'
import { browserslistToTargets } from 'lightningcss'

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

UnoCSS との併用（推奨）

// vite.config.ts
import UnoCSS from 'unocss/vite'
import browserslist from 'browserslist'
import { browserslistToTargets } from 'lightningcss'

export default defineConfig({
  plugins: [UnoCSS()],
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

Vite 経由の CSS モジュール

// vite.config.ts - use css.lightningcss.cssModules (NOT css.modules)
export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      cssModules: {
        pattern: '[hash]_[local]'
      }
    }
  }
})

ドラフト構文機能

// Enable experimental CSS features
export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      drafts: {
        customMedia: true
      }
    }
  }
})

CLI の使用方法

# Transform and minify
lightningcss --minify --bundle --targets '>= 0.25%' input.css -o output.css

# With source maps
lightningcss --minify --bundle --sourcemap input.css -o output.css

# Error recovery (skip invalid rules)
lightningcss --error-recovery input.css -o output.css

変換機能

Lightning CSS は、ブラウザーターゲットに基づいて自動的にトランスパイルします。

機能	最新の CSS	トランスパイル後の出力
ネスト	.parent { .child { } }	.parent .child { }
色関数	oklch(0.7 0.15 180)	rgb(...) のフォールバック
color-mix()	color-mix(in srgb, red, blue)	計算済みの色の値
light-dark()	light-dark(white, black)	メディアクエリのフォールバック
論理プロパティ	margin-inline	margin-left/margin-right
メディアクエリの範囲構文	(480px <= width <= 768px)	(min-width: 480px) and (max-width: 768px)
ベンダープレフィックス	user-select: none	-webkit-user-select: none + プレフィックスなし
数学関数	clamp()、round()	可能な場合は静的な値
カスタムメディア	@custom-media --mobile (max-width: 768px)	インライン化されたメディアクエリ
:is() / :not()	複雑なセレクター	展開されたフォールバック
system-ui フォント	font-family: system-ui	クロスプラットフォームのフォントスタック

CSS モジュール

Lightning CSS は CSS モジュールを標準でサポートします。

/* styles.module.css */
.container {
  composes: base from './base.module.css';
  padding: 1rem;
}

.title {
  color: var(--heading-color);
}

// Component usage
import styles from './styles.module.css'
element.className = styles.container

PostCSS パイプラインの置き換え

PostCSS プラグイン	Lightning CSS での相当機能
autoprefixer	標準搭載（targets 経由）
postcss-preset-env	標準搭載（構文変換）
postcss-import	--bundle フラグ
postcss-nesting	標準搭載（targets 経由）
postcss-custom-media	drafts.customMedia: true
cssnano	--minify フラグ
postcss-modules	cssModules: true

移行手順

1. PostCSS の依存関係と postcss.config.js を削除します
2. lightningcss と browserslist を開発用依存関係として追加します
3. Vite の設定で css.transformer: 'lightningcss' を設定します
4. build.cssMinify: 'lightningcss' を設定します
5. browserslist（.browserslistrc または package.json）でターゲットを設定します
6. CSS モジュールの設定を css.modules から css.lightningcss.cssModules に移します

ブラウザーターゲット

# .browserslistrc
>= 0.25%
not dead
not op_mini all

// package.json alternative
{
  "browserslist": [">= 0.25%", "not dead"]
}

エージェント向け最適化

コンテキスト	コマンド
素早くミニファイ	lightningcss --minify input.css -o output.css
バンドルしてミニファイ	lightningcss --minify --bundle input.css -o output.css
ターゲットを指定	lightningcss --minify --targets '>= 0.25%' input.css -o output.css
エラーからの復旧	lightningcss --error-recovery input.css -o output.css
Vite の設定を確認	css.transformer と css.lightningcss について vite.config.ts を読みます
browserslist を確認	.browserslistrc または package.json 内の browserslist を読みます

クイックリファレンス

フラグ	説明
--minify	出力 CSS を圧縮します
--bundle	@import ルールをインライン化します
--targets	ブラウザーのターゲット（browserslist クエリ）
--sourcemap	ソースマップを生成します
--error-recovery	エラーにせず、無効なルールをスキップします
-o <file>	出力ファイルのパス

参考資料

• 公式ドキュメント：https://lightningcss.dev
• Vite との統合：https://vite.dev/guide/features#lightning-css
• トランスパイル機能：https://lightningcss.dev/transpilation.html
• CSS モジュール：https://lightningcss.dev/css-modules.html