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 |