cssnanoは、PostCSSの枠組みの中でCSSを最適化するツールですが、最適化項目も大量にあります。どのようなものがあるのかまとめてみました。
前置き~CSS用語の整理
説明に使うために、CSS用語を確認しておきます(MDN)。
p {
font-size: 12px;
color: green;
}
- 規則セット…セレクタと宣言ブロックの組。上の例では、全体が1つの規則セットとなっています。
-
セレクタ…CSSをかける対象の指定。上の例では、
p
。 -
宣言ブロック…セレクタに対して適用される、宣言の0個以上の組。上の例では
{ ... }
の箇所。 -
宣言…プロパティと値の組。上の例では
font-size: 12px
とcolor: green
1。 -
プロパティ…スタイルを指定する特性。上の例では
font-size
とcolor
。 -
値…実際にスタイルとして指定する値。上の例では、
12px
とgreen
。
最適化ルールの一覧
原文ではアルファベット順に並んでいますが、ここではわかりやすいように小さい方から大きな方へ順に並べていって、そして最後にデフォルトで適用されないルールについて触れます。
値レベルの最適化
-
calc
(詳細)…CSSのcalc
で算出する値のうち、事前に計算できる部分は計算してしまう -
colormin
(詳細)…色指定を、同じ色の中でできるだけ短い表記のものに置き換える(white
→#fff
など)。 -
convertValues
(詳細)…長さ・時間・角度の指定を、同じ量でできるだけ短い表記のものに置き換える。 -
minifyFontValues
(詳細)…font-family
をできるだけ短い表記になるようにしたり、font-weight
を数字に置き換えたりする -
minifyGradients
(詳細)…linear-gradient
などの表記を短くなるように変換する -
normalizeDisplayValues
(詳細)…display: 外側 内側
の2値指定されたもの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つのショートハンドにまとめる
セレクタの最適化
規則セットレベルの最適化
-
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
として入れたほうがいいでしょう。