機能

cssnano は、さまざまな最適化を施した美しいフォーマットの CSS を、作って実行します。これにより、最終的な結果は、本番環境ではできるだけ小さくなるようにします。

入力

/* normalize selectors */
h1::before, h1:before {
    /* reduce shorthand even further */
    margin: 10px 20px 10px 20px;
    /* reduce color values */
    color: #ff0000;
    /* remove duplicated properties */
    font-weight: 400;
    font-weight: 400;
    /* reduce position values */
    background-position: bottom right;
    /* normalize wrapping quotes */
    quotes: '«' "»";
    /* reduce gradient parameters */
    background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%);
    /* replace initial values */
    min-width: initial;
}
/* correct invalid placement */
@charset "utf-8";

出力

@charset "utf-8";h1:before{margin:10px 20px;color:red;font-weight:400;background-position:100% 100%;quotes:"«" "»";background:linear-gradient(180deg,#ffe500,#ffe500 50%,#121 0,#121);min-width:0}

この CSS のセマンティクスはそのままですが、不要な空白は削除され、識別子は圧縮され、不要な定義はスタイルシートからパージされました。これにより、本番環境で使用する CSS は、はるかに小さくなります。

cssnano は、デフォルトでは CSS ファイルに安全な最適化を実行しますが、圧縮を最大限にするために使用できるテクニックがある拡張プリセットも提供しています。詳しくは、最適化ガイドを参照してください。

機能

PostCSS に基づく

CSSNANO は、postcss プラグインと環境上に構築されています

30 を超えるプラグイン

CSSNANO は、CSS を最適化するためのプラグインを 30 以上持っています

構成可能

CSSNANO は、最適化レベルを制御するプリセットを使用したカスタム構成をサポートしています

技術

cssnano は、スタイルを JavaScript で変換するためのツールである PostCSS によって強化されています。具体的には、そのプラグインアーキテクチャにより、限定された責任を持つ小さなモジュールから cssnano を構成できます。また、cssnano をビルドステップに簡単に挿入できます。また、CSS にエラーがないか lint を行ったり、将来の構文にトランスパイルしたりする他のプロセッサも併用できます。