# All files / shorthands backgrounds.js

100% Statements 1/1
100% Branches 0/0
100% Functions 1/1
100% Lines 1/1

    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

    2x

     // @flow

    /**
     * The backgrounds shorthand accepts any number of background values as parameters for creating a single background statement..
     * @example
     * // Styles as object usage
     * const styles = {
     *   ...backgrounds('url("/image/background.jpg")', 'linear-gradient(red, green)', 'center no-repeat')
     * }
     *
     * // styled-components usage
     * const div = styled.div`
     *   ${...backgrounds('url("/image/background.jpg")', 'linear-gradient(red, green)', 'center no-repeat')}
     * `
     *
     * // CSS as JS Output
     *
     * div {
     *   'background': 'url("/image/background.jpg"), linear-gradient(red, green), center no-repeat'
     * }
     */
    function backgrounds(...properties: Array<string>) {
      return {
        'background': properties.join(', '),
      }
    }

    export default backgrounds