OSS探訪ページ内ナビ
概要
Lightning CSSはRustで実装されたCSS parser・transformer・bundler・minifierです。browser targetを基にvendor prefixやsyntax loweringを行い、CSS Modulesやcustom transform APIも提供します。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
主な特徴
Rust製parserでCSS property valueまで型付きで解析する
CSS spec grammarに沿ってproperty valueをtyped representationとして扱い、transformごとの重複parseを減らす設計です。
出典：[1]
minify・vendor prefix・syntax loweringをbrowser targetからまとめて行う
不要prefixの削除、必要prefixの追加、modern CSS syntaxのlowering、rule mergeやcolor短縮等を一つのtransform pipelineで実行できます。
出典：[1]
CSS Modules・bundling・custom visitorにも対応する
local scope、composes等のCSS Modules subset、@import bundling、visitor APIによる独自transformを利用できます。
出典：[1]
向いている用途
CSS buildを高速化しつつcompatibility処理とminifyをまとめたいfrontend projectに向く
Parcelだけでなくstandalone JavaScript libraryやCLI、他toolのplugin wrapperとして利用でき、build stepの統合候補になります。
出典：[1]
導入前の確認
Node packageはnative binaryを利用しNode 12以上を要求する
1.33.0のpackage metadataはNode >=12.0.0を宣言し、platform向けnative bindingを利用します。deployment/CI platformで対応binaryが利用できるか確認してください。
出典：[2]
PostCSS plugin ecosystem全体のdrop-in replacementではない
built-in transformは多い一方、PostCSSの任意plugin APIと同じ互換層ではありません。既存pluginへ依存するpipelineは個別に置換可否を確認してください。
出典：[1]
参考にした公式資料
- [1]Lightning CSS v1.33.0 README(2026-10-05)
- [2]Lightning CSS v1.33.0 package metadata(2026-10-05)
- [3]Lightning CSS v1.33.0 release(2026-10-05)
- [4]Lightning CSS MPL-2.0 license(2026-10-05)
編集部からの補足
Lightning CSSはminifyだけでなく、browser targetに応じたvendor prefixの追加・削除やmodern CSS syntaxのloweringも行えます。既存PostCSS chainの全pluginを置き換えるものではないため、必要なcustom transformやplugin互換性を確認してください。
3ステップで試す
- 1
Lightning CSS 1.33.0を一時projectへ導入する
review対象releaseを固定し、既存projectへ影響しない一時directoryで確認します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/lightningcss.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact lightningcss@1.33.0 - 2
transform APIでCSSをminifyするscriptを作る
Rust native binding経由の
transformAPIでCSS-aware minificationを行う最小例を用意します。printf "%s\n" "import { transform } from 'lightningcss';" "const input = '.card { color: #ff0000; margin: 0px 0px 0px 0px; }';" "const result = transform({ filename: 'style.css', code: Buffer.from(input), minify: true });" "process.stdout.write(result.code);" > demo.mjs - 3
変換を実行してoutputが小さくなることを確認する
color・zero・whitespace等が圧縮され、短いCSSが生成されることを確認します。
node demo.mjs > output.css && grep -Eq '(red|#f00)' output.css && test "$(wc -c < output.css)" -lt 60
成長
成長の推移 · 直近30日
7,695 Stars
推移データを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- cssnano4,978 Stars
共通タグ 3件 · 共通カテゴリ 1件
PostCSS pluginをpresetとして組み合わせ、production CSSをmodularに圧縮する
CSS - Dart Sass4,227 Stars
共通タグ 3件 · 共通カテゴリ 1件
Sassのreference implementationとしてSCSSをCLI・JavaScript APIからCSSへcompileする
Dart - CSSTools PostCSS Plugins1,057 Stars
共通タグ 3件 · 共通カテゴリ 1件
CSSDBとbrowser targetから必要な標準CSS transformを選び、PostCSS pipelineへまとめる
CSS - Bulma50,053 Stars
共通タグ 3件
JavaScriptを同梱せず、CSS classとSass・CSS VariablesでUI layerを構築する
CSS - Panda CSS6,208 Stars
共通タグ 4件 · 共通カテゴリ 1件 · 同じ言語
type-safeなstyle定義をscanし、design tokenとatomic CSSをbuild時に生成する
Rust - Tauri111,593 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
web frontendとRust native layerをsystem WebView上のdesktop/mobile appへまとめる
Rust
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。