autoprefixer 便利
autoprefixer っていう vendor prefix を自動で付けてくれるものがあって、gulp や webpack 経由で使えるっぽいのですが、これを使えば勝手に prefix を付けて IE も対応してくれるらしいです。
(参照:https://qiita.com/tonkotsuboy_com/items/bce73685cd6b1ea511dc )
でも styled-components で使いたいんじゃ
styled-components の内部でいつも vendor prefix を付けてくれている CSS プリプロセッサの stylis.js が Grid Layout 未対応らしい。
(参照:https://github.com/styled-components/styled-components/issues/1184 )
でも最近 stylis.js も Grid Layout 対応したい旨の議論がまた出始めたのでそろそろ対応してくれるかもしれない。
(参照:https://github.com/thysultan/stylis.js/issues/119 )
👉 でも今やりたいんだわ!!!
解決策: vendor prefix を素手で書く
https://autoprefixer.github.io/ から autoprefixer がどんな感じで css を parse してくれるのかっていう demo が使える。
今回僕が Grid Layout したいとこは一部分だけだったので、対象の CSS をこの demo parser に食わせて、吐かれた CSS を素手でコピペしました。
👉 できた!!!!!
※ ただし vendor prefix の style とそうでないやつの書く順番を間違えると動かなかったので注意。そういうものなんですかね
追記: autoprefixer 使えるのかもしれん?
autoprefixer を通す方法の中によく見たら CSS-in-JS っていうのがあった。
astroturf っていう loader を使えば styled-components 内の CSS も autoprefixer に parse してもらえるのかもしれない。
けど、styled-components が使ってる stylis.js と競合してしまわないかは心配なところ。