Convert React inline styles to CSS rules


Is there a tool, that converts React inline style descriptions to CSS rules?

Example input:

    minHeight: 200,
    position: 'relative',
    flexGrow: 1,
    flexShrink: 1,
    display: 'flex',
    flexDirection: 'column',

Example output:

    min-height: 200px;
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-flow: column;

To put it differently, I want a tool that does the exact opposite of this:

I would like to use it manually, so command line or web-based is preferable.


Yes there’s a tool that does just that!

If you paste your example input into the JS side (has to be in parentheses), you get the CSS output you specified (less the final semi-colon).

glitch convert css to js screenshot

Answered By – Ben Pritchard

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published