Font Awesome 5, ::before, ::after (CSS疑似要素) がAMPで表示できない原因

特に何をしたという覚えはないのに、突如、疑似要素でFont Awesome 5を使っていたものがAMPだけ表示されなくなりました。

あの□で表示されるやつ。原因は意外なところにあって、AMPってそういう仕様なのか？ それどうにかしてくれないか？ ってちょっとイラついた。

原因は、webpackでcssのminimize（圧縮）をするとダブルクォーテーションが消されるから。

.test:after{
  content:"\f00c";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
}

// 見やすいように整形
.test:after{
  content:"";
  font-family:Font Awesome\ 5 Free;
  font-weight:900
}

『Awesomeの後ろの '\' ってなんだ？』と思いますが、そうなるとしか言いようがありません。

最初、この '\' が犯人だと思っていましたが、AMP以外では正常に動作しているし、'\' を消してもダメでした。

じつはこの現象、2020年の夏には発見していたんですが、作業の優先順位の関係で放置していました。

それ以前はAMPでも正常に表示されていたので、よけいに原因が特定できなかったのもある。

半年以上の月日を経て、意外にもあっさり解決した方法が、cssのminimizeの設定変更。

font-familyの文字列は圧縮オプションから外すようにしました。

AMPってそういう仕様？

原因を特定して修正できたのでOKってしたいところですが、どうも腑に落ちない。

なぜAMPではfont-familyの圧縮がダメなのかが分からないから。

『そういう仕様だから』なんでしょうが、それを書いているAMP公式ドキュメントが見つからないので、よけいにモヤモヤ。

よく起きそうなことだと思うんだけど。というか結構大きめな相違点だと思うんだけど。

ブラウザのローディングもしくはレンダリングの仕様のちがいなんでしょうが、それ、すぐ見つかるところでアナウンスしてほしいな～。

アナウンスしてるのはブラウザのほうかな？ そっち方面を調べてみよう。