transformStyleObject.js

function transformStyleObject(styleObj) {
  const result = {}
  const keys = Object.keys(styleObj)
  
  keys.forEach((key) => {
    if (key === 'border') {
      const { color, width, style } = styleObj.border
      if (color) result.borderColor = color
      if (width) result.borderWidth = width
      if (style) result.borderStyle = style
    } else if (key === 'textColor') {
      result['color'] = styleObj.textColor
    } else if (key === 'width') {
      result['width'] = `${Number(styleObj.width) * 100}vw`
    } else if (key === 'height') {
      result['height'] = `${Number(styleObj.height) * 100}vh`
    } else {
      result[key] = styleObj[key]
    }
  })
  
  return result
}

const result = transformStyleObject({
  border: {
    width: '2px',
    style: 'dashed',
  },
  height: '0.42',
})

console.log(result) // result: { borderWidth: '2px', borderStyle: 'dashed', height: '42vh' }