About the JavaScript Object to CSS Converter
Extracting styles from a component into a stylesheet is the reverse of the usual migration. This converter evaluates a JavaScript object literal, turns camelCase keys back into dashed properties, and appends px to numeric values the way React does, except for the unitless properties such as zIndex, opacity, fontWeight and lineHeight. Nested objects become rules keyed by their selector.
The input can be a bare object or a declaration such as const styles = { ... }; the assignment is stripped before evaluation. Only literal values are supported; references to variables or functions cannot be resolved because the object is evaluated in isolation.
An object without selector keys is emitted as a single rule with the selector .style, which you can rename. The CSS to JS Object tool goes the other way.
How to use
- Paste the style object on the left.
- Copy the CSS.
- Rename any placeholder selectors and add the result to your stylesheet.
Common questions
- Which numeric properties stay unitless?
- z-index, opacity, font-weight, line-height, flex, order, flex-grow and flex-shrink, matching React's own list.
- Can it read TypeScript objects?
- Remove type annotations first; the evaluator expects plain JavaScript.
- Why did it fail on my object?
- It probably references a variable or function. Replace those with literal values.