Tech tip - removing whitespace in JavaScript strings used for dynamic CSS

I remove excess whitespace in strings used to create dynamic CSS.

My minimiser, 'UglifyJS', does not remove the excess whitespace. It would be quite difficult. So, I edit the source file by hand in 'vi' saying:

s:'[ ][ ]*:' :g

This turns:

' @keyframes ppbWingRight' + birdNumber + ' { ' +
'   0% { ' +
'     transform: rotate3d(0,1,0,' + wingAngle + 'deg); ' +
'   } ' +
'   100% { ' +
'     transform: rotate3d(0,1,0,-' + wingAngle + 'deg); ' +
'   } ' +
' } ' +

into:

' @keyframes ppbWingRight' + birdNumber + ' { ' +
' 0% { ' +
' transform: rotate3d(0,1,0,' + wingAngle + 'deg); ' +
' } ' +
' 100% { ' +
' transform: rotate3d(0,1,0,-' + wingAngle + 'deg); ' +
' } ' +
' } ' +

I create a 'style' tag, set the 'innerHTML' to the string, and attach the 'style' tag to the 'head' element.

I often start with some 'static' CSS that I found on 'codepen.io', often written by Yusuke Nakaya. Most times, the 'pen' uses a CSS pre-processor. I instead do the random bits in JavaScript. This is so the animation can run several times,
and be different each time.

I do my own 'minimising' as well as running 'UglifyJS'. I shorten object properties and CSS id's and classes. I also replace constants in the same way as the C pre-processor does. I end up looking through the resulting code and it is then that I see the spaces in the dynamic CSS.

There are more tips at: bbingo.xyz/t