getValueAndUnit.js.flow 817 B

1234567891011121314151617181920212223242526272829303132
  1. // @flow
  2. const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/
  3. /**
  4. * Returns a given CSS value and its unit as elements of an array.
  5. *
  6. * @example
  7. * // Styles as object usage
  8. * const styles = {
  9. * '--dimension': getValueAndUnit('100px')[0],
  10. * '--unit': getValueAndUnit('100px')[1],
  11. * }
  12. *
  13. * // styled-components usage
  14. * const div = styled.div`
  15. * --dimension: ${getValueAndUnit('100px')[0]};
  16. * --unit: ${getValueAndUnit('100px')[1]};
  17. * `
  18. *
  19. * // CSS in JS Output
  20. *
  21. * element {
  22. * '--dimension': 100,
  23. * '--unit': 'px',
  24. * }
  25. */
  26. export default function getValueAndUnit(value: string | number): any {
  27. if (typeof value !== 'string') return [value, '']
  28. const matchedValue = value.match(cssRegex)
  29. if (matchedValue) return [parseFloat(value), matchedValue[2]]
  30. return [value, undefined]
  31. }