乱れたCSSを読みやすいルールに整形する

やりたいこと

1行に潰れたCSS、あるいはインデントがバラバラなCSSを引き継いだ。変更する前に読める形が必要です。整形は見た目だけの変換で、ルールも値も同じまま、空白だけが変わります。

整形か圧縮か

CSSを貼り、「整形」で宣言1行ずつの読みやすい出力、「圧縮」で1行のコンパクトな出力を得ます。整形出力はセレクタと括弧を独立した行に置き宣言をインデントするため、結果をソース管理に貼り戻してもdiffが小さく済みます。

• コメントや@mediaなどのアットルール、入れ子ブロックは維持して再インデントします。
• 圧縮はコメント除去と空白の圧縮です。バイト数が効く場所へ貼る前に使います。

具体例

1行に圧縮された4KBのウィジェット用スタイルシートは、整形すると約120行の読みやすい形に戻ります。1行では見えなかった重複margin宣言が一目で分かります。

対応範囲

整形のみで検証はしません。綴りミスのプロパティはそのまま残り、未対応の値もそのまま出力します。入力は2MB・500ルールまで。圧縮は安全な空白圧縮で、cssnanoのような積極的な圧縮器ではありません。