Refactor fluidRange() with CSS clamp()

[fcisio]

Summary

Hi! Working with styles objects, I use between() most ofter, since fluidRange() outputs media queries and it creates collisions in the object.

Both functions do the same thing, but fluidRange() actually locks the min and max values.

Wanting to lock these values without outputting media queries, I've made my own version, leveraging CSS clamp().

Basic Example

const fluidRange = (min, max, [from, to] = ['375px', '2500px']) =>
  `clamp(${min}, ${between(min, max, from, to)}, ${max})`

Outputs

clamp(45px, calc(21.18px + 6.35vw), 180px)

clamp() CSS function

Reasoning

This change doesn't alter the current behavior of fluidRange(), and it's way lighter.

[bhough]

Hi, @fcisio, and thank you for the suggestion. Right now we still support IE11 which doesn't support clamp. Definitely something we will revisit as our browser support evolves, but right now we need to stick with the media query-based solution.