DEV Community

Kay Gosho
Kay Gosho

Posted on

convert JS Object to CSS in command

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

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

Then, use that command in vim!

Latest comments (4)

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

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
 
andy profile image
Andy Zhao (he/him)

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