CSS.escape()でCSSセレクターとして使えない文字をエスケープする

Last updated at 2023-05-15Posted at 2023-05-14

この記事の概要

かつての自分の記事で「ReactのuseIdを使って上手いこと一意なクラス名を生成しようと思ったけど:がクラス名として使えず断念」と書いたことがありました。

しかし、この事象自体はCSS.escape()を用いれば簡単に解消できることが分かったので備忘録として記事にしました。

以下に記載があります。

今回関係あるものをざっくり説明するなら「クラス名は[_a-z0-9-]かエスケープした文字を使う」が該当します。
厳密に言えばもっと色々ありますが、ひとまず上記のように理解しておけばこの記事の話としては間違いないはずです。

記事の本旨とは関係ありませんが、この問題に行き着いた経緯を記載します。
冒頭に貼った記事にあるように、ReactにおいてuseIdを使うと:からはじまり:から終わる一意なidが生成されます（例 :r0:）。

CSSセレクターのルールから、:はそのままではクラス名として使えないためエスケープする必要があります。
しかし、先ほど例で:r0:と挙げましたが、公式ドキュメントで明確な書式が提示されているわけではありません。¹
:だけにエスケープをかけるので十分なのかなど、微妙に迷いがありました。

以下の書式で使用します。
strはエスケープしたい対象です。

escapedStr = CSS.escape(str);

先ほどのuseIdで生成したidに適用すると、以下のようになります。

const id = useId()

CSS.escape(id) // => \:r0\:

つまり、最初の記事の内容で言えば、このように指定することで問題なくCSSの指定ができます。

<style>
  {`
    .class-${CSS.escape(id)} {
      color: red;
    }
  `}
</style>

だからとて記事に書いたやりたいことは上手く実現できないのですが、1つ引っかかりが取れました。

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでお話してくださる方も募集中です！