cssnanoによる最適化まとめ

cssnanoは、PostCSSの枠組みの中でCSSを最適化するツールですが、最適化項目も大量にあります。どのようなものがあるのかまとめてみました。

前置き～CSS用語の整理

説明に使うために、CSS用語を確認しておきます（MDN）。

p{font-size:12px;color:green;}

• 規則セット…セレクタと宣言ブロックの組。上の例では、全体が1つの規則セットとなっています。
• セレクタ…CSSをかける対象の指定。上の例では、p。
• 宣言ブロック…セレクタに対して適用される、宣言の0個以上の組。上の例では{ ... }の箇所。
• 宣言…プロパティと値の組。上の例ではfont-size: 12pxとcolor: green¹。
• プロパティ…スタイルを指定する特性。上の例ではfont-sizeとcolor。
• 値…実際にスタイルとして指定する値。上の例では、12pxとgreen。

最適化ルールの一覧

原文ではアルファベット順に並んでいますが、ここではわかりやすいように小さい方から大きな方へ順に並べていって、そして最後にデフォルトで適用されないルールについて触れます。

値レベルの最適化

• calc（詳細）…CSSのcalcで算出する値のうち、事前に計算できる部分は計算してしまう
• colormin（詳細）…色指定を、同じ色の中でできるだけ短い表記のものに置き換える（white→#fffなど）。
• convertValues（詳細）…長さ・時間・角度の指定を、同じ量でできるだけ短い表記のものに置き換える。
• minifyFontValues（詳細）…font-familyをできるだけ短い表記になるようにしたり、font-weightを数字に置き換えたりする
• minifyGradients（詳細）…linear-gradientなどの表記を短くなるように変換する
• normalizeDisplayValues（詳細）…display: 外側 内側の2値指定されたもの²を、1つの値に変換可能なら変換する
• normalizePositions（詳細）…background-positionなどの値を短い形に変換する
• normalizeRepeatStyle（詳細）…background-repeatなどの値を短い形に変換する
• normalizeString（詳細）…文字列の引用符を統一し、行継続で入っている改行も削る
• normalizeTimingFunctions（詳細）…transition-timing-functionなどの値を短い形に変換する
• normalizeUnicode（詳細）…unicode-rangeで、?で書けるものを?で書いて表記を短縮する
• normalizeUrl（詳細）…url()の引用符を外す、解決できる相対パスを解決するなどして、表記を短縮する
• orderedValues（詳細）…borderやtransitionのように、バラバラな種類の値を複数指定できるもので、値の順番を統一する（結果、圧縮率が高まる）
• reduceInitial（詳細）…initialの実際の値がもっと短い表記なら、それに置き換える
• reduceTransforms（詳細）…同じtransformをより短い書き方に変更する
• svgo（詳細）…Data URIで埋め込まれたSVGを、svgoで最適化する

宣言レベルの最適化

• discardDuplicates（詳細）…全く同じ宣言、規則セット、at-ruleを削除する
• mergeLonghand（詳細）…四辺がバラバラに定義されたmargin、padding、borderを1つのショートハンドにまとめる

セレクタの最適化

• minifySelectors（詳細）…セレクタの余計なスペース、引用符、*などを消して短縮する
• uniqueSelectors（詳細）…重複するセレクタを1つにする

規則セットレベルの最適化

• discardDuplicates（前述）
• discardEmpty（詳細）…空の規則セット、at-rule、セレクタのない宣言ブロックを削除する
• mergeRules（詳細）…隣接していて、「セレクタが同じ宣言ブロック」あるいは「全く同じ宣言のある宣言ブロック」をまとめる

at-ruleの最適化

• discardOverridden（詳細）…全く同じ名前で定義されて上書きされた@keyframesや@counter-styleを削除する
• minifyParams（詳細）…at-ruleの引数から余計な空白を削る

その他

• discardComments（詳細）…コメントを削除する
• normalizeCharset（詳細）…@charsetを（付けるとしたら）先頭の1つだけにする
• normalizeWhitespace（詳細）…削れる空白・改行を削って、最後の宣言の後のセミコロンも落とす

デフォルトでは無効なもの

これらは、「他のCSS/JSと連携する場合、意味を変えてしまう」などの要素があるものです。

• autoprefixer（詳細）…不要なベンダプレフィックスを削る
• discardUnused（詳細）…未使用のat-ruleを削除する
• mergeIdents（詳細）…同じ内容のat-ruleをまとめる
• reduceIdents（詳細）…at-ruleの名前を短縮する
• zindex（詳細）…z-indexの値を整理する

使う上で心がけたいこと

まず、デフォルトで入っているものについては、正しく文法を解釈する環境にいる限りは安全です。流石に今どき使うことはまずないとは思いますが、文法違反、あるいは文法的には無意味だけど実際の挙動が違う、というような書き方を利用したCSSハックは正常に動作しなくなると思われます。

あと、重複削除などの機能があるので、cssnanoはプロセスの最後に近いところでかけるほうが効果的となります。Webpackであれば、postcss-loaderとして入れるのではなく、optimize-css-assets-webpack-pluginとして入れたほうがいいでしょう。

脚注