Calculate pixels from CSS value.

CalculatePixels.js

export function CalculatePixels( str, el ) {
    try {
        const value = parseFloat( str )
        const unit = str.replace(value, '').toLowerCase()
        const { innerWidth, innerHeight } = window
        const run = {
            ['%']: () => (el.offsetWidth * (value/100)),
            px: () => value,
            vw: () => (innerWidth * (value/100)),
            vh: () => (innerHeight * (value/100)),
            vmax: () => (Math.max(innerWidth,innerHeight) * (value/100)),
            vmin: () => (Math.min(innerWidth,innerHeight) * (value/100)),
            em: () => (parseFloat(getComputedStyle(el?.parentElement || document.body).fontSize) * value),
            rem: () => (parseFloat(getComputedStyle(document.body).fontSize) * value)
        }
        return run[unit]()
    } catch(err) {
        console.error(`[CalculatePixels] could not parse ${str}:`, err.message)
        return 0
    }
} 

export function MakeTest( divEl ) {

	const test = ['123px', '50vw', '50vh', '2em', '2rem', '50vmax', '50vmin', '100%' ]
	const { innerWidth, innerHeight } = window
	const { offsetWidth, offsetHeight } = divEl || {}
	for( const t of test ) console.log('testing:', t, CalculatePixels( t, divEl ))
	console.log({innerHeight, innerWidth, offsetWidth, offsetHeight})

}