ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

webpack5, CSSの圧縮でfont-familyのダブルクォーテーション(")を消さない方法

Node.js image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

CSSのminimize(圧縮)で、font-familyのダブルクォーテーション(")を削除すると、"invalid property value" が出てしまうことがあります。

そこでwebpack5の設定を変えます。

(webpack4でも同じのはず。)

webpack5.8.0
webpack-cli4.2.0
postcss7.0.32
cssnano4.1.10

CSSのfont-familyは、日本語などのマルチバイト文字や半角スペースがあるフォント名などはダブルクォーテーション(")でくくります。

しかし、ツールでCSSを圧縮するとクォーテーションを消してしまう。たしかに、いまのWebブラウザは、クォーテーションが無くてもほぼ問題ありません。

ボクが作業をやろうと思ったのは、AMPで "invalid property value"(無効なプロパティ値)になったから。

古いブラウザのバージョンまで対応しなければならない場合も起きるでしょう。

今回の作業はレアと言えばレアケース。かといって絶対にやる場面はないとも言えないパターンです。

PostCSSのcssnanoの設定変更

今回は、PostCSSの設定で変更します。じっさいは、PostCSSに内包されているcssnanoの設定を変更するので、PostCSSじゃなくてもcssnanoを使ってればできるでしょう。

口で説明するよりもいきなりwebpackのコードをお見せします。

webpack.config.js
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にバンドルさせずに外出ししているから。

処理の順番はこうなっています。

ローダー処理結果
1sass-loadersass(scss)をcssに変換する。CSS
2postcss-loaderpostcssを使ってcssの設定を変更。
ここではautoprefixerとminimize。
minimizeはcssnanoを使う。
変更後のCSS
3css-loadercssをjsにバンドルする。
webpackの標準的なCSSローダー。
CSSをJSに組み込む。
4mini-css-extract-plugincssをjsにバンドルせず、外出しする
ためのプラグイン。
CSSのJSへのバンドル
をキャンセルしてCSS
ファイル出力
前の投稿
webpack4 -> 5 移行ガイドを読んでその通りにやってみる。
jQueryの$が使えない理由($の衝突を防ぐ)。$はjQueryのものではないですよ?
次の投稿

コメントを残す