CSS ↔ JS Style Object Converter

Overview

A converter that turns a block of CSS declarations into a JavaScript style object, the shape React expects for the style prop. Properties convert from kebab-case to camelCase, vendor prefixes map to their capitalised React forms, and bare pixel lengths like 14px become numbers while everything else stays a quoted string. Click the output to copy it.

How It Works

Paste or type CSS declarations into the left editor, in property: value; form, with several per line, multi-line values and comments all fine, and a single selector { ... } block unwrapped. The right panel shows the resulting JavaScript object, updating as you type. Click anywhere in the output textarea to copy the object. The sample content demonstrates the mapping: background-color becomes backgroundColor, border-radius: 12px becomes the number 12, and font-size: 14px becomes the number 14. Vendor-prefixed properties map to Webkit, Moz, O and ms prefixed keys.

Step-by-Step Usage Guide

1. Paste CSS declarations into the left editor.
2. Read the camelCased style object on the right.
3. Click the output to copy it.
4. Paste it into a React style prop or a JS style module.

Technical Specifications & Standards

The conversion follows React's style object rules: hyphenated properties become camelCase, and vendor prefixes follow React's capitalisation: -webkit- becomes Webkit, -moz- becomes Moz, -o- becomes O and -ms- stays lowercase as ms (msTransform), and custom properties such as --brand are kept verbatim. A value passes through unquoted only when it is exactly a number followed by px (decimals and negatives such as -4px or 1.5px count), which mirrors React's treatment of px-suffixed numbers; every other value, including multi-token values like 1px solid red and unitless strings, is emitted as a quoted string. The parser strips comments, unwraps one selector { ... } block and splits declarations on top-level semicolons, so several declarations per line, multi-line values and url(data:...;base64,...) all work. Its limits: declarations missing a colon or a value are skipped silently, shorthand properties are kept as-is rather than expanded, and input with several rules merges the contents of all of them into one object. Anything the parser cannot parse is dropped rather than flagged, so eyeball the output before trusting it on a large block.

Targeted Use Cases

• Moving hardcoded CSS into React inline styles.
• Converting a design token sheet into a JS theme object.
• Porting a component's styles into a styled-props API.
• Quickly checking what a declaration looks like as camelCase.

Notes & Gotchas

• End each declaration with a semicolon; the parser splits on top-level semicolons and on the first colon.
• Convert one rule at a time: comments and a single selector block are handled, but several rules are merged into one object.
• Remember React treats numeric values as pixels for the unitless-aware properties; quoted values are always literal.
• Verify the output after conversion, because unparsable lines are skipped without any warning.

Frequently Asked Questions