CSS-in-JS to CSS Converter

Using the CSS-in-JS to CSS Converter

Two input styles

Object styles, used by React inline styles, Emotion and JSS, write properties as camelCase keys. Template literals, used by styled-components and Emotion's css tag, already contain CSS. The converter detects which you pasted: objects are parsed and converted, templates are unwrapped and their nested rules flattened.

Units

In style objects a bare number means pixels for most properties, so padding: 12 becomes 12px. Unitless properties stay unitless: lineHeight, fontWeight, opacity, zIndex, flex, flexGrow, flexShrink, order and similar.

Nesting

Keys that start with &, a colon or a selector become nested rules relative to the parent selector, and keys starting with @media or @supports wrap their contents in that at-rule. The result is ordinary CSS that needs no runtime library.

What is not evaluated

The converter reads the code as data and does not run it. Variables, function calls and template interpolations like ${props.color} cannot be resolved, so they are kept as visible placeholders and listed in the notes.

Organising the converted CSS

Converted rules use the selector you choose for the root object. Rename it to match your component, for example .product-card, and keep each component's CSS in its own file or CSS module. CSS modules give the same scoping benefits as CSS-in-JS without a runtime library.

Frequently asked questions