I found Styled Component is much convenient for me to write styles with React.
However, I already wrote a lot of styles with JS object, using jss. So I need to convert JSS to CSS.
I wrote a tiny script, which is a set of perl one liners, and call the command from Vim.
#!/bin/bash perl -pe 's/ +$//g' \ | perl -pe 's/ as .+//g' \ | perl -pe 's/([A-Z])/-\L\1/g' \ | perl -pe 's/^_//' \ | perl -pe 's/"([a-z]+)"$/\1/g' \ | perl -pe "s/'([a-z]+)'$/\1/g" \ | perl -pe 's/([0-9]+),?$/\1px/g' \ | perl -pe 's/,?$/;/'
(More elegant RegExp would exist but least effort here)
~> echo fontSize: 12 | obj2style font-size: 12px; ~> echo fontSize: 'large' | obj2style font-size: large; ~> echo "fontSize: 'large', " | obj2style font-size: large; ~> echo "fontWeight: 'bold' as 'bold'" | obj2style font-weight: bold;
Then, use that command in vim!