DEV Community


convert JS Object to CSS in command

acro5piano profile image Kay Gosho ・1 min read


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.



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!


Editor guide
andy profile image
Andy Zhao (he/him)

Hey @maestromac right up your alley on this, especially with Preact.

maestromac profile image
Mac Siri

Is there an advantage to write these kind of script in perl as supposed to vim-script?

acro5piano profile image
Kay Gosho Author

Perl's Regular Expression is easy to write because it implements POSIX. In terms of performance vim-script may be better as calling external process is usually cost.

vlasales profile image
Vlastimil Pospichal