CSS文字列をJSオブジェクトに変換するVSCode拡張機能


はじめに

こんにちは。kimizuy です。

いま vanilla-extract という CSS フレームワークを使って作業しています。CSS modules を TypeScript 化したようなフレームワークなんですが、スタイルは JS オブジェクトで記述します。

Figma からスタイルの一部をコピペする際に CSS 文字列を JS オブジェクトに変換する作業が必要なため、今回はその変換を簡単にする VSCode の拡張機能をご紹介します。

tldr

CSS Converter
https://marketplace.visualstudio.com/items?itemName=Lakkannawalikar.css-converter

使い方はいたって簡単です。変換したい CSS 文字列を範囲指定して Shift+ Cmd + V(Windows/Linux の場合は Shift + Ctrl + V)を入力します。

変換前

変換後

おわりに

そもそも Figma 側で JS オブジェクト記法でのコピーができればよさそうですね。方法やプラグインなどあるんでしょうか。知っている方は教えてください!

以上、短いですがお読みいただきありがとうございました。

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Gaji-Labo Staff

Gaji-Laboの社内デジタル環境でいろいろなお手伝いをしているがじ専務&じら常務。みんなのシリーズ記事をまとめたり、卒業したスタッフの過去記事を記録したり、Twitterをやったりしています。