CSSミニファイア

このミニファイアが行うこと

変換（動作は変わりません）：

• コメントを削除します（/*!ライセンスブロックを含むすべて）。
• 不要な空白（セレクタ間、宣言間、ブレース周り）を削除します。
• 閉じブレース直前の末尾セミコロンを削除します。
• 複数行のルールを1行に畳み込みます。

行うのはこれだけです。だから出力は元とまったく同じ挙動をします。すべてのセレクタ、プロパティ、値が書いたとおりのままです。

想定される削減率

圧縮に加え、サーバーでのgzip圧縮はCSSが冗長性の高いテキストであるためさらに60〜80%削減します。両者は積み重なるので、常に両方を行ってください。

圧縮では行わないこと

• 未使用CSSの削除。これはツリーシェイキング／PurgeCSSの領域で、HTMLやコンポーネントの解析が必要です。
• HEXカラーの短縮、ゼロ単位の畳み込み、宣言のマージ。そうしたアグレッシブな変換はcssnano、esbuild、Lightning CSSの仕事で、このツールの対象外です。
• 重複セレクタを1つにマージ。ソースの順序がカスケードに影響するため危険です。試みるミニファイアもありますが、ほとんどは飛ばします。
• クラス名のリネーム。これはCSS-in-JSやCSS Modulesの仕事で、圧縮ではありません。
• クリティカルCSSのインライン化。これは別のビルド時ステップです。

ライセンスコメントの保持

多くのミニファイアは/*!で始まるコメントを保持します。ライセンスヘッダーで使われます。

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

このツールはすべてのコメントを削除します。CSSにライセンスヘッダーが含まれる場合は、圧縮後に付け直すか、cssnanoやesbuildなどライセンス保持オプションのあるビルドツールを使ってください。

ソースマップ

本番デバッグ用には、ビルドツールが圧縮出力と並んでソースマップを生成します。

styles.min.css
styles.min.css.map

DevToolsはマップを読み込み、要素を調査した際に元の整形済み行番号を表示します。このツールはソースマップを生成しません。

ビルドパイプラインでのCSS圧縮

• Vite、Webpack、Parcel：本番ビルドで自動的に処理します。
• PostCSS + cssnano：標準的なスタンドアロンミニファイアです。
• esbuild：CSS圧縮も内蔵します。
• cssnanoプリセット：安全な変換はdefault、アグレッシブ（一部トレードオフあり）はadvancedです。

このツールは単発の圧縮、緊急対応、ミニファイアの実態を学ぶ用途向けです。本番ワークフローではビルドツールを使い、ソースは読みやすいまま、出力だけを圧縮するのが良いでしょう。

圧縮がCSSを壊す可能性のあるケース

まれですがあり得ます。

• 空白に依存するセレクタ：.foo .barと.foo.barはスペースの有無で意味が変わります。
• 空白を含むカスタムプロパティ値：--shadow: 0 2px 4px rgba(0,0,0,0.1)、rgba()内のカンマを削ってはいけません。
• 閉じられていないブロックコメント：/* missing closeはそれ以降をすべて飲み込みます。不正な入力ではミニファイアが誤動作することがあります。

対処：出荷前に必ず圧縮済み出力をlint／テストパスにかけてください。