All files / color toColorString.js

100% Statements 17/17
100% Branches 28/28
100% Functions 5/5
100% Lines 17/17
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93                12x 40x               12x 42x               12x 20x               12x 36x                                                                             42x   2x 40x   4x 36x   16x 20x   19x   1x        
// @flow
 
import rgb from './rgb'
import rgba from './rgba'
import hsl from './hsl'
import hsla from './hsla'
import type { RgbColor, RgbaColor, HslColor, HslaColor } from '../types/color'
 
const isRgb = (color): boolean => (
  typeof color === 'object' &&
  typeof color.red === 'number' &&
  typeof color.green === 'number' &&
  typeof color.blue === 'number' &&
  // $FlowIgnoreNextLine not sure why this complains
  typeof color.alpha !== 'number'
)
 
const isRgba = (color): boolean => (
  typeof color === 'object' &&
  typeof color.red === 'number' &&
  typeof color.green === 'number' &&
  typeof color.blue === 'number' &&
  // $FlowIgnoreNextLine not sure why this complains
  typeof color.alpha === 'number'
)
 
const isHsl = (color): boolean => (
  typeof color === 'object' &&
  typeof color.hue === 'number' &&
  typeof color.saturation === 'number' &&
  typeof color.lightness === 'number' &&
  // $FlowIgnoreNextLine not sure why this complains
  typeof color.alpha !== 'number'
)
 
const isHsla = (color): boolean => (
  typeof color === 'object' &&
  typeof color.hue === 'number' &&
  typeof color.saturation === 'number' &&
  typeof color.lightness === 'number' &&
  // $FlowIgnoreNextLine not sure why this complains
  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)";
 * }
 */
function toColorString(color: RgbColor | RgbaColor | HslColor | HslaColor): string {
  if (isRgba(color)) {
    // $FlowIgnoreNextLine not sure why this complains
    return rgba(color)
  } else if (isRgb(color)) {
    // $FlowIgnoreNextLine not sure why this complains
    return rgb(color)
  } else if (isHsla(color)) {
    // $FlowIgnoreNextLine not sure why this complains
    return hsla(color)
  } else if (isHsl(color)) {
    // $FlowIgnoreNextLine not sure why this complains
    return hsl(color)
  }
  throw new Error('Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.')
}
 
export default toColorString