CSSをJavaScriptオブジェクトに変換 — Numio

postcss-js でプレーンな CSS を JavaScript オブジェクト（CSS-in-JS）に変換します。プロパティ名は camelCase になり、セレクターと at ルールはキーになり、1 つのルール内で繰り返されたプロパティは値の配列になります。

.css ファイルのスタイルを、プロパティを打ち直さずに styled-system、JSS、Emotion、Radium のオブジェクトへ移す。

CSS

JavaScript Object

こんなときに使えます

.css ファイルのスタイルを、プロパティを打ち直さずに styled-system、JSS、Emotion、Radium のオブジェクトへ移す。
デザインツールやブラウザーの DevTools からコピーした CSS スニペットを、インラインスタイルや style prop 用のオブジェクトにする。

使い方

CSS エディターに CSS を貼り付けるか、.css ファイルをドロップします。
JavaScript Object パネルで結果を確認します。結果は `const converted` に代入され、Prettier で整形されます（セミコロンなし）。
オブジェクトをコピーし、`converted` の名前を変えて、必要なセレクターのキーを取り出します。このページに変更できる設定はありません。

CSS 入力

.card {
  display: flex;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.card:hover .title {
  color: tomato;
}

@media (max-width: 600px) {
  .card { flex-direction: column; }
}

JavaScript オブジェクト

const converted = {
  ".card": {
    display: "flex",
    backgroundColor: "#fff",
    WebkitBoxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
    margin: "0 auto",
  },
  ".card:hover .title": { color: "tomato" },
  "@media (max-width: 600px)": { ".card": { flexDirection: "column" } },
}

仕様と制限

変換はブラウザー内の Web Worker で実行されます（PostCSS のパース + postcss-js の objectify）。CSS はサーバーに送信されません。

ベンダープレフィックス付きのプロパティは PascalCase でプレフィックスを残します（例: -webkit-box-shadow は WebkitBoxShadow）。--main-color などのカスタムプロパティは元の名前のままです。

値は文字列のまま残りますが、z-index のような単位なしの数値プロパティは数値になります。コメントは削除されます。

出力は React Native ではそのまま使えません。セレクター、:hover、@media ブロックはネストしたキーとして残り、ショートハンドの値も展開されません。

FAQ

同じセレクターが 2 回出てくるとどうなりますか？

同じセレクターのルールは 1 つのキーにマージされます。同じプロパティが 2 回宣言されている場合（例: color: red !important; color: blue）、キーの値は配列 ["red !important", "blue"] になります。

@media クエリやネストしたセレクターに対応していますか？

対応しています。@media ブロックは "@media (max-width: 600px)" のようなキーになり、その値は内側のルールのオブジェクトです。子孫セレクターや疑似クラスのセレクターは完全な文字列キーのまま残ります。

"Unclosed block" エラーが出るのはなぜですか？

入力は有効な CSS である必要があります。PostCSS は閉じ波括弧の欠落などの構文エラーで停止し、行と列を報告します。Sass や Less の構文（変数、ネスト）はここではコンパイルされません。

仕様を確認する

postcss-js on GitHub