Responsive typography function

[peeke]

When defining a responsive font-size, we use the following css:

:root {
  --font-size-unit: 1px;
  --font-size-viewport-min: 480;
  --font-size-viewport-max: 1920;

  --font-size-growth: calc(1 / (var(--font-size-viewport-max) - var(--font-size-viewport-min)));
  --m: calc((var(--font-size-growth) * 100vw) - (var(--font-size-growth) * var(--font-size-viewport-min) * var(--font-size-unit)));
}

--font-size-16-18: clamp(16px, calc(16px + 2 * var(--m)), 18px);

It would be nice if we can abstract this away to a custom postcss function. In that case, the calculation could be inlined to avoid any dependencies on custom properties.

Something like:

font-size: responsive-font-size(18px, 28px, 480px, 1920px);

Which transforms into:

font-size: clamp(
  18px, 
  18px + 14 * (
    (1 / (1920 - 480) * 100vw) - 
    (1 / (1920 - 480) * 480px)
  ),
  32px
);