CSSのminimize(圧縮)で、font-familyのダブルクォーテーション(")を削除すると、"invalid property value" が出てしまうことがあります。
そこでwebpack5の設定を変えます。
(webpack4でも同じのはず。)
webpack | 5.8.0 |
webpack-cli | 4.2.0 |
postcss | 7.0.32 |
cssnano | 4.1.10 |
CSSのfont-familyは、日本語などのマルチバイト文字や半角スペースがあるフォント名などはダブルクォーテーション(")でくくります。
しかし、ツールでCSSを圧縮するとクォーテーションを消してしまう。たしかに、いまのWebブラウザは、クォーテーションが無くてもほぼ問題ありません。
ボクが作業をやろうと思ったのは、AMPで "invalid property value"(無効なプロパティ値)になったから。
古いブラウザのバージョンまで対応しなければならない場合も起きるでしょう。
今回の作業はレアと言えばレアケース。かといって絶対にやる場面はないとも言えないパターンです。
PostCSSのcssnanoの設定変更
今回は、PostCSSの設定で変更します。じっさいは、PostCSSに内包されているcssnanoの設定を変更するので、PostCSSじゃなくてもcssnanoを使ってればできるでしょう。
口で説明するよりもいきなりwebpackのコードをお見せします。
見るべきところは、20行目のcssnanoの設定だけです。
cssnanoの設定
minifyFontValues -> removeQuotes = false
思いっきり、フォント名のクォート(")をどうするかの設定があるので、それをfalseにすればいいだけ。
本題はこれだけなんですが、長くややこしいのは、Sass(scss)を使ったりcssをjsにバンドルさせずに外出ししているから。
処理の順番はこうなっています。
ローダー | 処理 | 結果 | |
---|---|---|---|
1 | sass-loader | sass(scss)をcssに変換する。 | CSS |
2 | postcss-loader | postcssを使ってcssの設定を変更。 ここではautoprefixerとminimize。 minimizeはcssnanoを使う。 | 変更後のCSS |
3 | css-loader | cssをjsにバンドルする。 webpackの標準的なCSSローダー。 | CSSをJSに組み込む。 |
4 | mini-css-extract-plugin | cssをjsにバンドルせず、外出しする ためのプラグイン。 | CSSのJSへのバンドル をキャンセルしてCSS ファイル出力 |