DEV Community

Kay Gosho
Kay Gosho

Posted on

convert JS Object to CSS in command


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/,?$/;/'
Enter fullscreen mode Exit fullscreen mode

(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;
Enter fullscreen mode Exit fullscreen mode

Then, use that command in vim!

Top comments (4)

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

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