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!
Top comments (4)
Hey @maestromac right up your alley on this, especially with Preact.
Is there an advantage to write these kind of script in perl as supposed to vim-script?
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.