linearGradient.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = linearGradient;
  4. var _constructGradientValue = _interopRequireDefault(require("../internalHelpers/_constructGradientValue"));
  5. var _errors = _interopRequireDefault(require("../internalHelpers/_errors"));
  6. var _templateObject;
  7. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  8. function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
  9. /**
  10. * CSS for declaring a linear gradient, including a fallback background-color. The fallback is either the first color-stop or an explicitly passed fallback color.
  11. *
  12. * @example
  13. * // Styles as object usage
  14. * const styles = {
  15. * ...linearGradient({
  16. colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  17. toDirection: 'to top right',
  18. fallback: '#FFF',
  19. })
  20. * }
  21. *
  22. * // styled-components usage
  23. * const div = styled.div`
  24. * ${linearGradient({
  25. colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  26. toDirection: 'to top right',
  27. fallback: '#FFF',
  28. })}
  29. *`
  30. *
  31. * // CSS as JS Output
  32. *
  33. * div: {
  34. * 'backgroundColor': '#FFF',
  35. * 'backgroundImage': 'linear-gradient(to top right, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%)',
  36. * }
  37. */
  38. function linearGradient(_ref) {
  39. var colorStops = _ref.colorStops,
  40. fallback = _ref.fallback,
  41. _ref$toDirection = _ref.toDirection,
  42. toDirection = _ref$toDirection === void 0 ? '' : _ref$toDirection;
  43. if (!colorStops || colorStops.length < 2) {
  44. throw new _errors["default"](56);
  45. }
  46. return {
  47. backgroundColor: fallback || colorStops[0].replace(/,\s+/g, ',').split(' ')[0].replace(/,(?=\S)/g, ', '),
  48. backgroundImage: (0, _constructGradientValue["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["linear-gradient(", "", ")"])), toDirection, colorStops.join(', ').replace(/,(?=\S)/g, ', '))
  49. };
  50. }
  51. module.exports = exports.default;