Posted at

AMPとgulp-sassでハマるから気をつけろ

More than 1 year has passed since last update.


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を疑って時間が溶けたしつらいし、おうちかえる。