CSS to JavaScript Style Objects Converter

You need to convert CSS rules to JavaScript style objects for React inline styles, styled-components, Emotion, or any CSS-in-JS library. Manually converting means changing every hyphenated property to camelCase (background-color → backgroundColor), quoting every value, and restructuring selectors into object notation — tedious for even a small stylesheet.

What Are JavaScript Style Objects?

In React and CSS-in-JS libraries, styles are expressed as JavaScript objects where CSS property names are camelCased and values are strings (or numbers for unitless properties like zIndex and opacity). This format enables dynamic styling, theming, and co-location of styles with component logic.

.button { background-color: #3b82f6; font-size: 14px; }

Becomes:

{ backgroundColor: "#3b82f6", fontSize: "14px" }

How This Converter Works

Paste CSS rules and the tool generates JavaScript style objects:

1. Property conversion: Hyphenated names become camelCase (margin-top → marginTop)
2. Vendor prefixes: -webkit-transform → WebkitTransform (capital W per React convention)
3. Value quoting: All values become strings, preserving units and functions ("14px", "calc(100% - 20px)")
4. Multiple selectors: Each CSS rule block generates a separate named object
5. Shorthand properties: Preserved as-is (margin: "10px 20px")
6. Custom properties: CSS variables like var(--color) are preserved in string values

Common Use Cases

React inline styles — Convert existing CSS to style={{ ... }} objects for React components when you need dynamic or conditional styles.

CSS-in-JS migration — Moving from CSS files to styled-components, Emotion, or Stitches? Convert your existing CSS rules to JS objects as a migration starting point.

Email templates — HTML email clients require inline styles. Convert your CSS to JavaScript objects for React Email or MJML template builders.

Design tokens — Convert CSS variables and design system CSS to JavaScript objects for theme configuration in Chakra UI, MUI, or Mantine.

Frequently Asked Questions

Q: How are CSS selectors handled? A: Each selector becomes a key in the output object. Class selectors like .button become button, pseudo-selectors and complex selectors are preserved as string keys.

Q: Are media queries converted? A: Media queries are included as nested objects using the @media string as a key. This format is compatible with libraries like Emotion and styled-components that support nested media queries.

Q: What about CSS custom properties (variables)? A: CSS variables used as values (e.g., color: var(--primary)) are preserved as string values. Variable declarations are not converted since JS style objects don’t support custom property definitions directly.

Q: Is my CSS sent to a server? A: No. All parsing and conversion runs entirely in your browser. Your CSS never leaves your device.