CSS-in-JS to CSS Converter
Free tool No sign-up
About this tool
Paste a styled-components or emotion block and get plain CSS — handles tagged templates and object syntax, resolves & nesting into real selectors, converts camelCase to kebab-case, and outputs Plain CSS, CSS Modules, or SCSS.
Advertisement
Why convert CSS-in-JS to CSS?
Migrate off styled-components / emotion
Moving a project away from CSS-in-JS to plain CSS, CSS Modules, or another approach? Convert styled blocks one component at a time without hand-rewriting every declaration.
Escape the runtime cost
Runtime CSS-in-JS serializes styles on every render. Extracting to a static stylesheet removes that overhead — useful when you are profiling a slow component tree.
Read a CSS-in-JS codebase
Inherited a project full of styled.div blocks? Paste one in and see the exact CSS it produces — flattened selectors, real pixel values, the nesting resolved.
Extract a one-off component
Pull a styled component into a project that does not use CSS-in-JS. Get standalone CSS with proper hover, nested, and media rules so the component works anywhere.
How to use this converter
01
Paste your styled block
Copy a styled-components or emotion definition — a styled.button`…` tagged template or a styled.div({…}) object — and paste it into the input panel on the left.
02
Pick an output format
Choose Plain CSS, CSS Modules (class selectors ready for a .module.css file), or SCSS (keeps the & nesting instead of flattening it). The output updates live.
03
Set a selector (optional)
Leave the selector blank and the tool derives one from your variable or styled target — const Button → .button. Type your own to override it for a single-block paste.
04
Copy and paste
Click Copy to grab the CSS and drop it into your stylesheet. Nested &:hover and & .child blocks come through as proper selectors; @media wrappers are preserved.
Common CSS-in-JS → CSS mappings
| CSS-in-JS | CSS output |
|---|---|
styled.button`…` | .button { … } |
styled(PrimaryBtn)`…` | .primary-btn { … } |
flexDirection: 'column' | flex-direction: column |
padding: 24 | padding: 24px |
zIndex: 10 | z-index: 10 (unitless) |
&:hover { … } | .button:hover { … } |
& .child { … } | .button .child { … } |
&& { … } | .button.button { … } |
@media (max-width: 640px) | @media (max-width: 640px) { … } |
${props => props.color} | /* dynamic: props => props.color */ |
Conversion patterns
Tagged template
/* Input — tagged template */
const Button = styled.button`
display: flex;
padding: 8px 16px;
background: #7c3aed;
&:hover { background: #6d28d9; }
`;
/* Output — Plain CSS */
.button {
display: flex;
padding: 8px 16px;
background: #7c3aed;
}
.button:hover {
background: #6d28d9;
} Object syntax
/* Input — object syntax */
const Card = styled.div({
display: 'flex',
flexDirection: 'column',
gap: 12,
borderRadius: 16,
});
/* Output — Plain CSS */
.card {
display: flex;
flex-direction: column;
gap: 12px;
border-radius: 16px;
} Dynamic values
/* Input — with props */
const Title = styled.h1`
font-size: 32px;
color: ${props => props.accent};
`;
/* Output — dynamic value flagged */
.title {
font-size: 32px;
color: /* dynamic: props => props.accent */;
} Pro tips
01
Dynamic values become comments
A static converter cannot run JavaScript, so ${props => props.accent} or theme('colors.brand') becomes a /* dynamic: … */ placeholder. The output stays valid CSS and marks exactly where to substitute a real value.
02
Numbers get a px unit
Object syntax uses bare numbers — padding: 24 means 24px. The converter appends px automatically, except on unitless properties like z-index, line-height, opacity, font-weight, and flex-grow, which stay as-is.
03
The & reference is resolved
styled-components nesting (&:hover, & .child, &&, > span) is flattened against the derived selector. Pick the SCSS output format instead if you want to keep the nesting structure rather than flat rules.
04
Selector naming
The class name comes from your variable (const Card → .card) or the styled target (styled.nav → .nav). A bare css`…` with no name becomes .element. Override any of it with the selector field.
Related tools
Advertisement