Convert React inline styles to CSS rules
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).
Is there a tool, that converts React inline style descriptions to CSS rules?
There is a tool, yes. It's Regular Expressions (or RegEx).
If you want to transform the following:
- nH => n-h (minHeight => min-height)
- xG => x-g (flexGrow => flex-grow)
- xS => x-s (flexShrink => flex-shrink)
- xD => x-d (flexDirection => flex-direction)
This is the same Regex operation each time.
The pattern match is:
/([a-z])([A-Z])/
ie. one lowercase letter followed by one uppercase letter, capturing each.
The replacement is:
$1-\L$2
ie.
- keep the captured lowercase letter
- follow the captured lowercase letter with a hyphen
- follow the hyphen with a lowercase version of the captured uppercase letter
Have you tried this "A command line tool for JSS" https://github.com/cssinjs/cli