IE11でAutoprefixerを使っても、CSS Gridが効かないときに確認したこと

最近、Autoprefixerを設定しているのに、IE用のベンダープレフィックスが適用されていない事があったのでの、設定を見直してみました。

確認時のモジュールバージョンです。

"devDependencies": {
...
"autoprefixer": "^10.0.1",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.4",
"postcss-preset-env": "^6.7.0",
"webpack": "^5.0.0",
"webpack-cli": "^4.0.0",
...
}

確認ポイント１　Autoprefixerの設定

PostCSSプラグインの設定で、grid: "autoplace" にします。

require("autoprefixer")({ 
    grid: "autoplace" 
}),

確認ポイント２　CSSの見直し

Autoprefixer がIE用に正しく変換できるように、grid-template や grid-area などの設定に間違いがないか確認します。

確認ポイント３　他のプラグインの影響

他のPostCSSプラグインによって、ベンダープレフィックスが消されている可能性があります。
私の場合、 postcss-preset-env の設定が原因でした。

// これだとgridのベンダープレフィックスが効かない
plugins: [
  'postcss-preset-env',
  require("autoprefixer")({ grid: "autoplace" }),
  require("css-mqpacker")(),
  require("cssnano")(),
],

// このように修正して解決
plugins: [
  require('postcss-preset-env')({ autoprefixer: { grid: true } }),
  require("autoprefixer")({ grid: "autoplace" }),
  require("css-mqpacker")(),
  require("cssnano")(),
],