.postcssrcとbrowserslistを使用する際によくある5つの間違い

1. .postcssrcにbrowsersを書く

.postcssrcにbrowsersを追記して以下のように記載すると警告が表示される。

要約すると.postcssrcに記載するのは非推奨なのでpackage.jsonか.browserslistrcに記載せよ、という内容だ。

Building index.scss...
  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  ｈttps://twitter.com/browserslist

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  ｈttps://twitter.com/browserslist

.postcssrcにbrowsersを書いてもAutoprefixerは効くが、毎回警告が出てしまうのでpackage.jsonか.browserslistrcに書いたほうが良いです。

個人的には.browserslistrcへの記載が簡単でわかりやすいので推奨。

package.jsonに記載するとbrowseslistがあるかどうかがpackage.jsonの中身を見ないとわからない状態になってしまう。

2. .browserslistrcを改行で書く

.browserslistrcを書く際は可読性および区切りの書き間違いを防ぐためにの改行で書いたほうが良いです。

Bad

last 2 versions, android >= 4, iOS >= 9, ie >= 11, not dead

Good

last 2 versions
android >= 4
iOS >= 9
ie >= 11
not dead

3. package.json記載=>.browserslistrc放置

package.jsonにbrowserslistを記載したのに.browserslistrcを削除しないとSCSSでコンパイル時にエラーが表示される。

下記のエラーは.browserslistrcの中身が空の状態でも発生するのでAutoprefixerのblowserlistは.browserslistrcファイルに記載するのが望ましい。

[発生場所のパス] contains both .browserslistrc and package.json with browsers

4. package.jsonにbrowserslist未記載

package.jsonにbrowserslistではなくbrowsersやbrowserslistrcで記載するとAutoprefixerが適用されない。

// Bad
"browsers": [
  "iOS >= 9"
]

// Bad
"browserslistrc": [
  "iOS >= 9"
]

// Good
"browserslist": [
  "iOS >= 9"
]

5. .postcssrcでgrid: trueを指定しない

IEでgridを使用したい場合は-ms-gridのCSSプレフィックスが必須だが「ie >= 11」 が.browserslistrcに記載されても追加されない。

-ms-gridが必要な場合は.postcssrcでgrid: trueを指定する。

"plugins": {
  "autoprefixer": {
    grid: true
  }
}

「ie >= 11」の指定だけで-ms-のプレフィックスが付くプロパティがあり、Autoprefixer CSS onlineだと-ms-gridがデフォルトで付くので間違いやすい。