12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- // @flow
- import getValueAndUnit from '../helpers/getValueAndUnit'
- import PolishedError from '../internalHelpers/_errors'
- /**
- * 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').
- *
- * @example
- * // Styles as object usage
- * const styles = {
- * fontSize: between('20px', '100px', '400px', '1000px'),
- * fontSize: between('20px', '100px')
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- * fontSize: ${between('20px', '100px', '400px', '1000px')};
- * fontSize: ${between('20px', '100px')}
- * `
- *
- * // CSS as JS Output
- *
- * h1: {
- * 'fontSize': 'calc(-33.33333333333334px + 13.333333333333334vw)',
- * 'fontSize': 'calc(-9.090909090909093px + 9.090909090909092vw)'
- * }
- */
- export default function between(
- fromSize: string | number,
- toSize: string | number,
- minScreen?: string = '320px',
- maxScreen?: string = '1200px',
- ): string {
- const [unitlessFromSize, fromSizeUnit] = getValueAndUnit(fromSize)
- const [unitlessToSize, toSizeUnit] = getValueAndUnit(toSize)
- const [unitlessMinScreen, minScreenUnit] = getValueAndUnit(minScreen)
- const [unitlessMaxScreen, maxScreenUnit] = getValueAndUnit(maxScreen)
- if (
- typeof unitlessMinScreen !== 'number'
- || typeof unitlessMaxScreen !== 'number'
- || !minScreenUnit
- || !maxScreenUnit
- || minScreenUnit !== maxScreenUnit
- ) {
- throw new PolishedError(47)
- }
- if (
- typeof unitlessFromSize !== 'number'
- || typeof unitlessToSize !== 'number'
- || fromSizeUnit !== toSizeUnit
- ) {
- throw new PolishedError(48)
- }
- if (fromSizeUnit !== minScreenUnit || toSizeUnit !== maxScreenUnit) {
- throw new PolishedError(76)
- }
- const slope = (unitlessFromSize - unitlessToSize) / (unitlessMinScreen - unitlessMaxScreen)
- const base = unitlessToSize - slope * unitlessMaxScreen
- return `calc(${base.toFixed(2)}${fromSizeUnit || ''} + ${(100 * slope).toFixed(2)}vw)`
- }
|