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のコードをお見せします。
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isSourceMap = MODE === "development";
const CSSLoader = {
loader: "css-loader",
options: {
url: false,
sourceMap: isSourceMap,
importLoaders: 2,
},
};
const PostCSSLoader = {
loader: "postcss-loader",
options: {
sourceMap: isSourceMap,
postcssOptions: {
plugins: [
require("cssnano")({
preset: ['default', {minifyFontValues: {removeQuotes: false}}]
}),
require("autoprefixer")({
grid: true,
}),
],
},
},
};
const SassLoader = {
loader: "sass-loader",
options: {
sourceMap: isSourceMap,
},
};
module.exports = {
// module->rules以外は省略
module: {
rules: [
/*
* sass, non-autoprefixer, minify, export -> .css
*/
{
test: /amp-[a-z]*\.scss$|amp\.scss$/,
use: [
MiniCssExtractPlugin.loader,
CSSLoader,
PostCSSLoader,
SassLoader,
],
},
],
},
};
見るべきところは、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 ファイル出力 |