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 オブジェクト記法でのコピーができればよさそうですね。方法やプラグインなどあるんでしょうか。知っている方は教えてください！

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