Make use of the css `min()` function

[MartijnCuppens]

Hopefully one day the min() function will be implemented by all major browsers and that could simplify RFS a lot. Instead of the mixin, we can make use of a function to generate the value.

For example:

.title {
  padding: rfs(2rem);
  font-size: rfs(4rem);
}

would generate:

.title {
  padding: min(2rem, calc(1.325rem + 0.9vw));
  font-size: min(4rem, calc(1.525rem + 3.3vw));
}

Other positive side effects are:

• We can use the same syntax in every language (sass, scss, less, stylus & PostCSS)
• It's a bit more predictable than the mixin because you know it's going to a value and not "some lines of code"
• Mixins don't work with plugins like stylelint-order, the function would fix this.
• Custom properties (css variables) can be set to a value which can be reused in css.

Only downside is that the disabled/enabled classes won't work anymore, but I have no clue if this feature is even used.

Currently Safari kind of supports min(), but it's still not perfect when resizing without the safari iframe hack (https://github.com/twbs/rfs/issues/14): https://codepen.io/MartijnCuppens/pen/ywaJpW

Browser support

Browser support is still an issue. Browser support so far:

• [x] Safari
• [x] Chrome (development has started, see https://bugs.chromium.org/p/chromium/issues/detail?id=825895)
• [x] Firefox
• [x] Edge

[benabraham]

Firefox already supports this https://caniuse.com/#feat=css-math-functions

[MartijnCuppens]

For the early adopters out here, you can now install this implementation with:

npm install twbs/rfs#min-function

Docs: https://github.com/twbs/rfs/tree/min-function

Planning to release this on npm as an alpha in the comming days/ weeks. Descided to make an alpha release since the support is still not big enough

[Ponant]

Hi @MartijnCuppens , any issue in having this rolled out in main? The min seems supported in most browsers and works great and it shrinkens the css.

[aaronstezycki]

Could also adopt clamp() by pushing 3 values into the mixin. This would allow a 'stop' value so font sizes don't grow infinitely. example output:

font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem);

[Galebra]

In version 10.0.0-alpha.0 I had for rfs(2.5rem) the result

h1 { font-size: min(2.5rem, calc(1.375rem + 1.5vw)); }

with the known issues about the division warnings.

But now I am getting only the calc with an additional media query. Is switching back to alpha.0 the only way to have the min as per this post? min is very well supported to my taste.

[Galebra]

Here is a loosely worked out function which does the job with version 10.0.0

@use "../../node_modules/rfs/scss" as rfs;

/*
    Adapted helper inspired from 10.0.0-alpha.0 version which uses min instead of media queries
*/
@function rfs-value-min($value) {
    $rfs-val: rfs.rfs-value($value);
    $rfs-fluid-val: rfs.rfs-fluid-value($value);

    @if $rfs-val == $rfs-fluid-val {
        @return $rfs-val;
    }
    @return min($rfs-val, $rfs-fluid-val);
}

Usage

h1 {
    font-size: rfs-value-min(2.5rem);
}

h5 {
    font-size: rfs-value-min(1.25rem);
}

Output

h1 {
  font-size: min(2.5rem, calc(1.375rem + 1.5vw));
}

h5 {
  font-size: 1.25rem;
}

[nextgenthemes]

To me, it seems with clamp and min now universally supported, this entire project is pointless now. I have not looked that deep into it, but it seems the complexity of this entire thing is not worth it at all if you can just achieve the same with writing some basic CSS on your own.