styled-components等で // で始まるラインコメントは使えるのか (結論: 使える)

こんにちは。N Inc. でフロントエンドエンジニアをしています柏 (@shun_kashiwa) です。

皆さんは React を用いたフロントエンド開発で CSS をどのように管理されていますでしょうか？弊社では、CSS-in-JS ライブラリとしてstyled-components を採用していますが、Emotion や Linaria など含め、Template Literal を用いた記法を用いるライブラリを使っている方も多いかと思います。

開発メンバーで話しているときに、そうしたライブラリで // から始まるラインコメントが使えるのか話題になり、少し面白かったのでご紹介します。

styled-components でもラインコメントを書きたい！

styled-components や類似の CSS-in-JS ライブラリを使うと、スコープを絞って CSS を適用することができ、グローバルにスタイルを展開していた時代と比べると CSS の見通しは格段によくなったと思います。しかし、ある程度複雑なスタイルを組むとなると、コメントは欠かせません。

CSS の仕様では、コメントは /* から始まり、 */ で終わるとされています¹。

a {
  /* リンクを赤くします */
  color: red;
}

しかし、CSS-in-JS で JavaScript と混ざった形でコードを書いていると、 // を使って 1 行のコメントをシンプルに書きたいことも少なくありません。

const Link = styled.a`
  color: red; // リンクを赤くする
`;

ここで疑問となったのが、このように // でラインコメントを書くことが styled-components としてサポートされているかどうかです。

JavaScript としては、` で囲まれた Template Literal 内は単なる文字列として扱われるため、// から始まるものであっても、JS のコメントとは解釈されません。

CSS を書くことを考えれば /* */ を書かなければいけない気もしますが、どうなのでしょうか。

STYLIS が // によるコメントをサポートしている

セレクタをネストできることなどからも分かりますが、styled-components で記述する CSS はそのままブラウザに渡されるわけではありません。styled-components や emotion、Linaria は全て STYLIS をプリプロセッサとして用いています。

READMEにもあるように、ネストやベンダープレフィックスの付与などは STYLIS で提供されています。

README には書かれていませんが、STYLIS は // をコメントとして扱う実装になっており、テストもされています。

また、styled-components 側でも // から始まるコメントが除去されることを確かめるテストが存在します。

styled-components の公式ドキュメントでも // から始まるコメントが書かれていることも考えて、styled-components でラインコメントを書くことは安全であると言えそうです。同じく STYLIS を採用している emotion や Linaria² でも、同じことが言えるはずです。

注意点

前述の通り、 // を使ってコメントを書くことはライブラリとしては問題なさそうです。一方、stylelint などの拡張機能などが CSS と認識していると、/* */ を使ったコメントを使うように警告する場合もあるようです。

チーム内で使っているツールが対応していない場合などは、ブロックコメントの記法に統一することも選択肢だと思います。

まとめ

styled-components や類似ライブラリで、 // から始まるラインコメントを書くことができるか調査し、結論として特段問題はないことが分かりました。

CSS の仕様に合わせていても不思議ではないですが、わざわざ意図的にラインコメントをサポートしていることに、JavaScript を重視する CSS-in-JS の思想が垣間見える気がしました。

当然ですが簡単にコメントが書けるライブラリをただ使っているだけではコードのメンテナンス性は上がりません。必要なコメントはちゃんと残すように肝に銘じたいと思います。