polished/lib/color/toColorString.js.flow

A lightweight toolset for writing styles in Javascript.

// @flow
import hsl from './hsl'
import hsla from './hsla'
import rgb from './rgb'
import rgba from './rgba'
import PolishedError from '../internalHelpers/_errors'

const isRgb = (color: Object): boolean => typeof color.red === 'number'
  && typeof color.green === 'number'
  && typeof color.blue === 'number'
  && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined')

const isRgba = (color: Object): boolean => typeof color.red === 'number'
  && typeof color.green === 'number'
  && typeof color.blue === 'number'
  && typeof color.alpha === 'number'

const isHsl = (color: Object): boolean => typeof color.hue === 'number'
  && typeof color.saturation === 'number'
  && typeof color.lightness === 'number'
  && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined')

const isHsla = (color: Object): boolean => typeof color.hue === 'number'
  && typeof color.saturation === 'number'
  && typeof color.lightness === 'number'
  && typeof color.alpha === 'number'

/**
 * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
 * This util is useful in case you only know on runtime which color object is
 * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: toColorString({ red: 255, green: 205, blue: 100 }),
 *   background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
 *   background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
 *   background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${toColorString({ red: 255, green: 205, blue: 100 })};
 *   background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
 *   background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
 *   background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
 * `
 *
 * // CSS in JS Output
 * element {
 *   background: "#ffcd64";
 *   background: "rgba(255,205,100,0.72)";
 *   background: "#00f";
 *   background: "rgba(179,25,25,0.72)";
 * }
 */

export default function toColorString(color: Object): string {
  if (typeof color !== 'object') throw new PolishedError(8)
  if (isRgba(color)) return rgba(color)
  if (isRgb(color)) return rgb(color)
  if (isHsla(color)) return hsla(color)
  if (isHsl(color)) return hsl(color)

  throw new PolishedError(8)
}