# 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