Convert React inline styles to CSS rules

Question

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.

Answer 1

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).

Answer 2

Have you tried this "A command line tool for JSS" https://github.com/cssinjs/cli