このツールについて

コメントや不要な空白を削って、配信する CSS のサイズを小さくします。手早い確認に向いたツールで、本番のビルドでは通常バンドラー側で圧縮します。

使い方

読みやすい CSS を貼り付けて圧縮を実行し、前後のバイト数を比べてみてください。リリース用の成果物はこれまでどおりビルドパイプラインで生成します。

例には、圧縮すると消えるコメントが 1 行含まれています。

入力

.hero {
  /* homepage band */
  padding: 4rem 1.5rem;
  background: #0f172a;
  color: #e2e8f0;
}

出力

.hero{padding:4rem 1.5rem;background:#0f172a;color:#e2e8f0}

圧縮後のファイルだけを残さず、整形済みの元ファイルを必ずリポジトリに保管しておきましょう。

CSS はどれくらい小さくなりますか?

元の空白とコメントの量によります。コメントやインデントが多い CSS ほど小さくなります。このツールは空白とコメントを取り除くだけで、ビルド時のミニファイアはルールの統合や短縮もできるため、本番にはそちらを使ってください。

ミニファイでスタイルが壊れることはありますか?

「nav :first-child」のような子孫セレクターの空白は意味が変わるため残します。コメントはライセンス表記を含めて削除されます。