About the CSS to JavaScript Object Converter
React's style prop and object-based CSS-in-JS libraries expect properties in camelCase with string or number values: borderRadius: '6px', zIndex: 2. Translating a stylesheet by hand is slow and error-prone. This converter parses the CSS, renames each property, keeps values as strings except for unitless numbers, and preserves custom properties in quotes since they cannot be camelCased.
Each selector becomes a key holding its declarations, so a stylesheet with several rules produces a map you can spread into components. Single-quoted output is the JavaScript convention; choose double quotes to get valid JSON instead.
Selectors, media queries and pseudo-classes are kept as keys, which suits libraries such as Emotion and JSS that accept nested selectors. For a plain React inline style, copy the inner object of the rule you need. The reverse converter turns an object back into CSS.
How to use
- Paste CSS on the left.
- Choose quote style.
- Copy the object into your component or theme file.
Common questions
- Why are some numbers unquoted?
- Values that are plain numbers, such as z-index or opacity, are emitted as numbers. Values with units stay strings.
- Are vendor prefixes handled?
- Yes. -webkit-transition becomes WebkitTransition, which is what React expects.
- How are custom properties written?
- Quoted as keys, for example '--accent': '#f25f1e', because dashes cannot appear in an identifier.