backgrounds.js.flow 788 B

123456789101112131415161718192021222324252627
  1. // @flow
  2. import type { Styles } from '../types/style'
  3. /**
  4. * Shorthand that accepts any number of background values as parameters for creating a single background statement.
  5. * @example
  6. * // Styles as object usage
  7. * const styles = {
  8. * ...backgrounds('url("/image/background.jpg")', 'linear-gradient(red, green)', 'center no-repeat')
  9. * }
  10. *
  11. * // styled-components usage
  12. * const div = styled.div`
  13. * ${backgrounds('url("/image/background.jpg")', 'linear-gradient(red, green)', 'center no-repeat')}
  14. * `
  15. *
  16. * // CSS as JS Output
  17. *
  18. * div {
  19. * 'background': 'url("/image/background.jpg"), linear-gradient(red, green), center no-repeat'
  20. * }
  21. */
  22. export default function backgrounds(...properties: Array<string>): Styles {
  23. return {
  24. background: properties.join(', '),
  25. }
  26. }