CSSをCSS in JSに変換しよう！
CSS in JSを使う時の悩み
FigmaやCSS設定ツールなど、便利なデザインツールの多くはCSSを出力します。しかし、CSS in JS(JSのオブジェクトで定義するタイプ)はCSSで多いkebab-caseではなく、camelCaseで書かれる(JavaScriptの流儀に則る)ので出力されたCSSをそのまま貼り付けることができません。
- kabab-caseをcamelCaseに直して…
- 単位付きの値をクオテーションで囲んで文字列にして…
- セレクタはネストしたり、キーを文字列にしたり…
このようになかなか面倒な作業です。vanilla-extractのように型補完の効く便利なCSS in JSがあっても、この辺りが厄介でCSSがそのまま使えるCSS Modulesや、既にコンポーネントになってるMUIやChakra UIを使う理由の一つになる時があります…
最近、筆者は会社の研修でFigmaのデザインをvanilla-extractで再現することになり、Figmaなどから貼り付けたくなったので調べてみました。
VSCode
VSCodeであれば以下のような拡張機能が提供されています。
双方向の変換が可能みたいなので、JSのオブジェクト形式をCSSに取り込めます(需要ある？)。
Vim
以下のようなプラグインやPerlによるスクリプトが作成されていました。
ブラウザ
ブラウザ上で変換するためのサイトが色々と提供されています。
以下は使ってみたところ、裏側の通信もないようなので、安心して使えそうです。
特にtransformは色々な変換に対応している(CSS -> tailwindやJSON -> Zodなど)みたいなので、非常に便利そうです。
最後に
同じ悩みを持ってる人は多く、探せば色々な方法が見つかりました。
個人的にはNeoVimを使用しているので、Vimプラグインかブラウザが良さげかなと思っています。
ただ今回調べての一番の収穫は、transformな気がします。
言語を超えて型や書式を変換できるのは非常に便利です。
個人開発で複数の言語を使う際も、一つ書けば使いまわせるようになるのが嬉しいですね。