convert JS Object to CSS in command
#vim#css#javascript#productivity
Kay Gosho

Kay Gosho @acro5piano

About: A Full Stack Developer. CTO of Remotehour ( https://remotehour.com )

Location:
Tokyo, Japan
Joined:
Feb 1, 2018

convert JS Object to CSS in command

Publish Date: Jun 28 '18
32 4

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!

Comments 4 total

  • Andy Zhao (he/him)
    Andy Zhao (he/him)Jun 28, 2018

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

  • Mac Siri
    Mac SiriJun 28, 2018

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

    • Kay Gosho
      Kay GoshoJun 29, 2018

      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.

  • Vlastimil Pospichal
    Vlastimil PospichalJul 7, 2018
    :'<,'>s/\([A-Z]\)/-\l\1/g
Add comment