CSS to JavaScript Objects Converter — Numio
Converts plain CSS into a JavaScript object (CSS-in-JS) with postcss-js. Property names become camelCase, selectors and at-rules become keys, and a property repeated in one rule turns into an array of values.
Moving styles from a .css file into a styled-system, JSS, Emotion or Radium object without retyping every property.
When to use it
- Moving styles from a .css file into a styled-system, JSS, Emotion or Radium object without retyping every property.
- Turning a CSS snippet copied from a design tool or browser DevTools into an object for an inline style or a style prop.
How to use
- Paste CSS into the CSS editor, or drop a .css file on it.
- Read the result in the JavaScript Object panel; it is assigned to `const converted` and formatted with Prettier (no semicolons).
- Copy the object, rename `converted`, and pick out the selector keys you need. This page has no settings to change.
CSS input
.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 object
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" } },
}Details and limitations
Conversion runs in a Web Worker in your browser (PostCSS parse + postcss-js objectify); the CSS is not sent to a server.
Vendor-prefixed properties keep their prefix in PascalCase (e.g. -webkit-box-shadow becomes WebkitBoxShadow). Custom properties such as --main-color keep their original name.
Values are kept as strings, except unitless numeric properties like z-index, which become numbers. Comments are dropped.
The output is not React Native-ready: selectors, :hover and @media blocks are kept as nested keys, and shorthand values are not expanded.
FAQ
What happens if the same selector appears twice?
Rules with the same selector are merged into one key. If the same property is declared twice, for example color: red !important; color: blue, the key holds an array: ["red !important", "blue"].
Are @media queries and nested selectors supported?
Yes. An @media block becomes a key such as "@media (max-width: 600px)" whose value is an object of the rules inside it. Descendant and pseudo selectors stay as complete string keys.
Why do I get an "Unclosed block" error?
The input must be valid CSS. PostCSS stops on syntax errors like a missing closing brace and reports the line and column; Sass or Less syntax (variables, nesting) is not compiled here.