Fluid values mixin for CSS-in-JS

index.js

const fluid = (properties, [ minVw, maxVw ], [ minVal, maxVal ]) => properties
  .map(property => `
    ${property}: ${minVal};

    @media (min-width: ${minVw}) {
      ${property}: calc(${minVal} + ${parseFloat(maxVal) - parseFloat(minVal)} * (100vw - ${minVw}) / ${parseFloat(maxVw) - parseFloat(minVw)});
    }

    @media (min-width: ${maxVw}) {
      ${property}: ${maxVal};
    }
  `)
  .join('\n')

export default fluid