between.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = between;
  4. var _getValueAndUnit5 = _interopRequireDefault(require("../helpers/getValueAndUnit"));
  5. var _errors = _interopRequireDefault(require("../internalHelpers/_errors"));
  6. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  7. /**
  8. * Returns a CSS calc formula for linear interpolation of a property between two values. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px').
  9. *
  10. * @example
  11. * // Styles as object usage
  12. * const styles = {
  13. * fontSize: between('20px', '100px', '400px', '1000px'),
  14. * fontSize: between('20px', '100px')
  15. * }
  16. *
  17. * // styled-components usage
  18. * const div = styled.div`
  19. * fontSize: ${between('20px', '100px', '400px', '1000px')};
  20. * fontSize: ${between('20px', '100px')}
  21. * `
  22. *
  23. * // CSS as JS Output
  24. *
  25. * h1: {
  26. * 'fontSize': 'calc(-33.33333333333334px + 13.333333333333334vw)',
  27. * 'fontSize': 'calc(-9.090909090909093px + 9.090909090909092vw)'
  28. * }
  29. */
  30. function between(fromSize, toSize, minScreen, maxScreen) {
  31. if (minScreen === void 0) {
  32. minScreen = '320px';
  33. }
  34. if (maxScreen === void 0) {
  35. maxScreen = '1200px';
  36. }
  37. var _getValueAndUnit = (0, _getValueAndUnit5["default"])(fromSize),
  38. unitlessFromSize = _getValueAndUnit[0],
  39. fromSizeUnit = _getValueAndUnit[1];
  40. var _getValueAndUnit2 = (0, _getValueAndUnit5["default"])(toSize),
  41. unitlessToSize = _getValueAndUnit2[0],
  42. toSizeUnit = _getValueAndUnit2[1];
  43. var _getValueAndUnit3 = (0, _getValueAndUnit5["default"])(minScreen),
  44. unitlessMinScreen = _getValueAndUnit3[0],
  45. minScreenUnit = _getValueAndUnit3[1];
  46. var _getValueAndUnit4 = (0, _getValueAndUnit5["default"])(maxScreen),
  47. unitlessMaxScreen = _getValueAndUnit4[0],
  48. maxScreenUnit = _getValueAndUnit4[1];
  49. if (typeof unitlessMinScreen !== 'number' || typeof unitlessMaxScreen !== 'number' || !minScreenUnit || !maxScreenUnit || minScreenUnit !== maxScreenUnit) {
  50. throw new _errors["default"](47);
  51. }
  52. if (typeof unitlessFromSize !== 'number' || typeof unitlessToSize !== 'number' || fromSizeUnit !== toSizeUnit) {
  53. throw new _errors["default"](48);
  54. }
  55. if (fromSizeUnit !== minScreenUnit || toSizeUnit !== maxScreenUnit) {
  56. throw new _errors["default"](76);
  57. }
  58. var slope = (unitlessFromSize - unitlessToSize) / (unitlessMinScreen - unitlessMaxScreen);
  59. var base = unitlessToSize - slope * unitlessMaxScreen;
  60. return "calc(" + base.toFixed(2) + (fromSizeUnit || '') + " + " + (100 * slope).toFixed(2) + "vw)";
  61. }
  62. module.exports = exports.default;