JavaScript Fluid Property function for CSS - best with Styled-components. Example: `fp('font-size', 25, 40)`

fluid-property.js

//The fp() “Fluid Property” function 
export function fp(property, min, max, start = 320, end = 1400, clip = true, clipAtStart = true, clipAtEnd = true) {
  const multiplier = (max - min) / (end - start) * 100;
  const adder = (min * end - max * start) / (end - start);
  const formula = `calc((${multiplier}vw) + (${adder}px))`;
  
  return` 
    @media (max-width: ${start}px) {
      ${property}: ${min}px;
    }
    @media (min-width: ${end}px) {
      ${property}: ${max}px;
    }
    ${property}: ${formula};
    `
}

sample.js

//Example use of this function with Styled-Components library
//You can use any css property - margin, padding, width, height...

const Title = styled.h2`
  ${ fp('font-size', 25, 40) };
  color: #fff;
  margin-bottom: 25px;
`

const SubText = styled.h2`
  ${ fp('margin-bottom', 25, 40) };
`