TL; DR
- AMPページ内では
@charset "UTF-8";がエラーになる -
gulp-sassは、コンパイルするファイル内にマルチバイト文字が存在すると@charset "UTF-8";を自動で出力する - コメントに日本語とか入れないように気をつけよう
やりたかったこと
WebサービスのCSSコンパイル周りが老朽化していたので、イイ感じにしようとした。
これまでは、Sass(Ruby製) & Compass(Ruby製) で吐き出したものを使っていて、
- Rubyに依存している
- コンパイルが重い
- Compassが不要になったベンダープレフィックス付きのスタイルシートを吐き出す
- Compassが開発終了しているのに使っている
みたいなところに問題を感じていたので、
以下の3つをやって、先ほど述べた問題を解決しようとした。
- Compassをやめる
- Sass(Ruby製) から Sass(Node製) に乗り換える
- Autoprefixer と PostCSS を導入して、適切なベンダープレフィックスだけを付与する
躓き
一通り移行作業は完了していたが、最後でAMPページのテストが転けていることに気がついた。
(ちなみにテストは amphtml-validator を使って書いている)
テストが転けたところを見ると 'CSS syntax error in tag \'style amp-custom\' - saw invalid at rule \'@charset\'.' とのことである。
どうやら、「AMPページの中では @charaset は使えないよ。」 と言っているらしい。
コンパイルされた CSS を見ると、たしかに @charset "UTF-8"; が出力されている。
しかし、元の .scss ファイル内では、一切 @charaset の指定を行っていない。
そもそも、Compassでコンパイルしていたときはエラーは起きていなかった。
「なぜ？どこで？ @charaset が挿入されたの？」となった。
原因
結果、
gulp-sassは、コンパイルするファイル内にマルチバイト文字が存在すると@charset "UTF-8";を自動で出力する
という問題があり、これが原因だった。
たしかに、日本語でコメントが書かれていた。
対処
sample.scss
/* amp の専用タグに対応させるもの用 */
となっていたところを
sample.scss
/* for amp tags */
に変えたところ、テストが成功した。
雑感
自動で挿入とかマジでやめてくれ。
Autoprefixerを疑って時間が溶けたしつらいし、おうちかえる。