Convert React inline styles to CSS rules

Issue

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: https://github.com/raphamorim/native-css

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

Solution

Yes there’s a tool that does just that!

https://glitch.com/~convert-css-js

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