inline-css化でスタイルが反映されずハマった

gulp-inline-css を利用して、CSS のインライン化をする際、一部のスタイルが HTML タグに反映されていないケースがあった。
結論としては、CSS に charset が指定してあると、その直後のスタイルが反映されないっぽい。

ちなみに私の場合、css の書き出しに gulp-sass を利用していたが、gulp-sass （というか node-sass）では、scss 内にマルチバイト文字含まれていると、charset が明示的に記述されていなくても自動的にふられる。
例えば、font-family にマルチバイトが含まれている場合、下記のようになる。

scss

html {
  font-family: $font-family-default;
  font-size: $font-size-default;
  line-height: $line-height-default;
  color: $color-text-default;
}

css

@charset "UTF-8";
html {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #222; }

なので、node-sass　を利用して書き出された　css　に　charset　が含まれている場合は、gulp-inline-css　を実行する前に、charset　を取り除くなどの処理が必要になる。