react-common/lib/services/splitValueAndUnit.ts

export type Unit = 'px' | '%' | 'rem'

export interface ValueAndUnit {
  magnitude: number,
  unit: Unit,
}

interface SplitValueAndUnit {
  (value: any): ValueAndUnit
}

const splitValueAndUnit: SplitValueAndUnit = value => {
  if (!['string', 'number'].includes(typeof value)) {
    throw TypeError('Argument must be a valid CSS number')
  }

  const valueString = typeof value! === 'number' ? `${value}px` : String(value)
  const magnitude = parseFloat(valueString)
  return {
    magnitude,
    unit: valueString.slice(String(magnitude).length) as Unit,
  }
}

export default splitValueAndUnit