About this tool
The CSS to JS Style Object tool converts a block of CSS into a JavaScript object suitable for React inline styles or CSS-in-JS libraries like styled-components and Emotion. It parses the declarations locally in your browser — nothing is uploaded — so migrating a stylesheet to inline styles is a paste-and-copy away.
Each property name is camelCased: background-color becomes backgroundColor, z-index becomes zIndex. Vendor prefixes follow React's rules — a leading -ms- lowercases to ms (msFilter), while -webkit-, -moz-, and -o- capitalize to Webkit, Moz, and O (WebkitBoxShadow). Custom properties (--brand-color) are kept verbatim as quoted keys. Values are emitted as strings by default, preserving units and !important; a numeric toggle lets bare integers and decimals become unquoted numbers instead. Keys that are valid JavaScript identifiers are left unquoted; the rest are quoted automatically.
When the input is a plain declaration block (no selectors) it produces one flat object, perfect for a React style prop. When the input contains full rules with selectors, the styled/Emotion mode emits a nested object keyed by each selector string — the object syntax those libraries accept. You control the output const name, and the whole thing is written as const styles = { ... }; ready to paste.