高度な変換

高度な変換とは?

特定の最適化はすべてのユースケースに適しているわけではありません。デフォルトでバンドルするものとは異なり、高度な変換にはすべて一定のリスクが伴います。各タイプの変換について、変換を安全に行うために、CSSについてとらなければならない仮定を文書化しました。これらの変換のほとんどは、どちらかのカテゴリ、または両方のカテゴリに分類されます。

この変換は、cssnanoを通して渡されたCSSがウェブサイトを実行するために必要なすべてのものであると想定しています。他のソースからリソースをインポートしません。たとえば、記述しているスタイルが何らかの方法でサードパーティのスタイルと相互作用する場合、複数のスタイルシートを使用している場合やスタイルシートを連結せずに、CSSをJavaScript経由で挿入している場合は、これが問題となる可能性があります。

良い例はポストCSSマージアイデンです。この変換を安全に行うには、@keyframesルールとそれらを利用するセレクタはすべて同じファイルにある必要があります。

セマンティクスを変更

この変換はCSSのセマンティクスを変更します。CSSの特定の特性に基づいてスタイルを削除する場合や、CSS全体を小さくするために値を更新する場合があります。変換によって行われる内容によっては、特定のユースケースではウェブサイトの外観が変わる場合があるため、これが望ましくない場合もあります。

良い例はオートプリフィクサーです。この変換は、古いベンダープレフィックスを削除することでCSSのセマンティクスを変更します。この変換を安全に行うために、browserslist設定は、サイトでサポートするブラウザを反映している必要があります。