DEV Community

loading...

convert JS Object to CSS in command

acro5piano profile image Kay Gosho ・1 min read

image

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/obj2style

#!/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)

Test:

~> 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!

Discussion

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

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

Collapse
maestromac profile image
Mac Siri

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

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

Collapse
vlasales profile image
Vlastimil Pospichal
:'<,'>s/\([A-Z]\)/-\l\1/g