polished/lib/shorthands/backgroundImages.js.flow

A lightweight toolset for writing styles in Javascript.

// @flow
import type { Styles } from '../types/style'

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