I've been using the rfs v 7.1.4 since the last 2 months without a problem. I recently started a new Project and did a npm install followed by the project execution.

I noticed the below error: ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) Module build failed: @error "#{$rfs-breakpoint-unit}is not a valid unit for $rfs-breakpoint-unit. Usepx,emorrem."; ^ `` is not a valid unit for $rfs-breakpoint-unit. Usepx,emorrem.

I reviewed the documentation to check for any breaking changes or whether I had to explicitly specify the rfs-breakpoint-unit (and I tried doing that) but it didn't work.

On a bit of investigation, I could see that there has been a new version upgrade to v7.1.8.

I then reverted to the previous version with npm install [email protected] --save and things worked as expected -- no error. (I do see a difference in the packages between 7.1.4 and 7.1.8)

Am I missing something in the new release ? Please advise.

Hi,

I've installed your library and tried to refactor one of my projects to see how it performs. What I've found really strange is that font-size jumps from 48px(viewport wider than 1200px) to 24px (viewport on 1199px and below).

Shouldn't it fluidly resize?

Thanks.

On my current project i am forced to use css variables instead of scss variables. But i was not a ble to make it in this way work: @include font-size(var(--h6-font-size)); Someone think it will be possible to use css vars any time?

When using a separate file for variables in a project it would be very useful to have a function in rfs, that only returns the calc() value for a specific property.

E.g. instead of using the mixin @include font-size(30px) I would like to do the following:

vars.scss:

$font-size-1: new-rfs-font-size-function(30px);

file1.scss

@import './vars.scss'

.someClass {
   font-size: $font-size-1;
}

That would really help sometimes, when it comes to elements with position: fixed and margins set with rfs.

What are your thoughts on changing the algorithm to be mobile-first (i.e. take font size on mobile as the argument and use min-width in the output)? Ultimately the effect could be the same, but readability could be better for those accustomed to writing for mobile-first (of which there are many).

Or another option might be to just add a mixin for mobile-first sizing.

See: Precise control over responsive typography

at the moment the media queries for two dimensional mode are generated to look like this:

@media (min-width: 1200px), (min-height: 1200px) {

I think this leads to undesired behavior for screens with very high or very low aspect ratio.

better would be to change this to:

@media (min-width: 1200px) and (min-height: 1200px) {

I would like to suggest adding fallback values in case the browser doesnt support calc().

This could be easily done by adding the fallback value at the beginning of the generated css file.

Bumps stylelint from 12.0.1 to 13.0.0.

You can trigger a rebase of this PR by commenting @dependabot rebase.

I got a strange issue. Here is the SCSS I'm using:

.custom {
    &.jumbotron {
        h2 {
            @include font-size(4.8rem);
            color:$primary;
            font-weight:700;
            div+div {
                font-weight:500;
            }
            @include padding-bottom(5.1rem);
        }
    }
}

The result CSS checked in Browser Inspector is as follows:

.custom.jumbotron h2 {
    font-size: 4.8rem;
    color: 
    #2e3192;
    font-weight: 700;
    font-size: 5.1rem !important;
}

Whats going on. Am I missing something? Same happens when I'm using rfs() mixin. The rfs version is 9.0.0

Ditch Husky in favor of https://github.com/Arkweid/lefthook. In the future we can split the tests more, eg. only run xo when something is changed in js files or prevent the tests from running when .md files are changed.

Fixes https://github.com/twbs/rfs/issues/149

I've recently updated our project's Bootstrap version to the latest (4.3.1). I'm importing all of Bootstrap via node_modules. I haven't modified the RFS mixin in any way. I'm using the version that ships with Bootstrap 4.3.1 as configured by default. Bootstrap is compiling just fine with the exception of this particular RFS issue.

The media query is not being generated in my current environment. It is a large project with many dependencies and I'm pretty much shooting the dark trying to come up with a reduced test case. I realize that that makes helping me with this issue very difficult if not impossible. But I'm desperate at this point.

Also, I'm reasonably sure (say, 99%) this is a me problem, not an RFS problem, but I haven't been able to sort the issue.

I'm invoking the mixin as follows:

.my-test {
   @include rfs(3rem);
}

Note that this font size is greater than the minimum font size of 1.25rem at or below which no scaling will take place. So, that's not the issue.

I've also tried invoking the aliased versions of the mixin:

.my-test {
   @include responsive-font-size(3rem);
}

and

.my-test {
   @include font-size(3rem);
}

I've tried it with rem, px, and unitless values.

The mixin is definitely being recognized and is halfway working. I.e., it compiles out to regular CSS without a hitch.

So, the code above does indeed generate the following CSS:

.my-test {
  font-size: 3rem;
}

But, again, no media query (at 1200px) is being generated by the mixin in my current environment and, thus, no downward scaling is taking place below the 1200px threshold.

At screen widths below 1200px, I would expect to see something similar to the following:

@media (max-width: 1200px) {
  .my-test {
    font-size: calc(1.525rem + 3.3vw);
  }
}

But, no dice.

Again, I haven't modified the default configuration of the RFS mixin in any way, and it does appear to be halfway working, as it's compiling out to CSS.

Tried in my coworker's environment and he gets the same results. But, that's expected, as we have pretty similar local environments, I suppose.

I hate to clutter up your issues with something that's in all likelihood not an issue with RFS (which is awesome -- using it on other projects), but SO hasn't turned up any leads so far.

Any suggestions for how to debug?

Thanks.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Hey, i'm trying to configure the RFS values in a scss stylesheet and get the following error: 7065rem and 1440px have incompatible units.

I previously used the same settings but in a stylus stylesheet and had no problems. Is this a bug or a feature? 😁

@import "node_modules/rfs/scss";
$rfs-base-value: 1.5rem;
$rfs-breakpoint: 1440px; // this causes the error
//$rfs-breakpoint: 90rem; // this works
$rfs-two-dimensional: true;

Bumps terser from 5.12.1 to 5.14.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Some functions in the scss files are deprecated and will be removed next Year. So dont use lib-sass anymore and change to dart-sass. https://sass-lang.com/blog/libsass-is-deprecated

Usefull Link: https://sass-lang.com/documentation/at-rules

@use "sass:math";
@use "sass:meta";
@use "sass:string";


// stylelint-disable property-blacklist, scss/dollar-variable-default

// SCSS RFS mixin
//
// Automated responsive values for font sizes, paddings, margins and much more
//
// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)

// Configuration

// Base value
$rfs-base-value: 1.25rem !default;
$rfs-unit: rem !default;

@if $rfs-unit != rem and $rfs-unit != px {
  @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
}

// Breakpoint at where values start decreasing if screen width is smaller
$rfs-breakpoint: 1200px !default;
$rfs-breakpoint-unit: px !default;

@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
  @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
}

// Resize values based on screen height and width
$rfs-two-dimensional: false !default;

// Factor of decrease
$rfs-factor: 10 !default;

@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
}

// Mode. Possibilities: "min-media-query", "max-media-query"
$rfs-mode: min-media-query !default;

// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
$rfs-class: false !default;

// 1 rem = $rfs-rem-value px
$rfs-rem-value: 16 !default;

// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
$rfs-safari-iframe-resize-bug-fix: false !default;

// Disable RFS by setting $enable-rfs to false
$enable-rfs: true !default;

// Cache $rfs-base-value unit
$rfs-base-value-unit: math.unit($rfs-base-value);

// Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px {
  $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1);
}
@else if $rfs-base-value-unit == rem {
  $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value);
}

// Cache $rfs-breakpoint unit to prevent multiple calls
$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);

// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
}

// Calculate the media query value
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit});
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);

// Internal mixin used to determine which media query needs to be used
@mixin _rfs-media-query {
  @if $rfs-two-dimensional {
    @if $rfs-mode == max-media-query {
      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
        @content;
      }
    }
    @else {
      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
        @content;
      }
    }
  }
  @else {
    @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
      @content;
    }
  }
}

// Internal mixin that adds disable classes to the selector if needed.
@mixin _rfs-rule {
  @if $rfs-class == disable and $rfs-mode == max-media-query {
    // Adding an extra class increases specificity, which prevents the media query to override the property
    &,
    .disable-rfs &,
    &.disable-rfs {
      @content;
    }
  }
  @else if $rfs-class == enable and $rfs-mode == min-media-query {
    .enable-rfs &,
    &.enable-rfs {
      @content;
    }
  }
  @else {
    @content;
  }
}

// Internal mixin that adds enable classes to the selector if needed.
@mixin _rfs-media-query-rule {

  @if $rfs-class == enable {
    @if $rfs-mode == min-media-query {
      @content;
    }

    @include _rfs-media-query {
      .enable-rfs &,
      &.enable-rfs {
        @content;
      }
    }
  }
  @else {
    @if $rfs-class == disable and $rfs-mode == min-media-query {
      .disable-rfs &,
      &.disable-rfs {
        @content;
      }
    }
    @include _rfs-media-query {
      @content;
    }
  }
}

// Helper function to get the formatted non-responsive value
@function rfs-value($values) {
  // Convert to list
  $values: if(meta.type-of($values) != list, ($values,), $values);

  $val: '';

  // Loop over each value and calculate value
  @each $value in $values {
    @if $value == 0 {
      $val: $val + ' 0';
    }
    @else {
      // Cache $value unit
      $unit: if(meta.type-of($value) == "number", math.unit($value), false);

      @if $unit == px {
        // Convert to rem if needed
        $val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value);
      }
      @else if $unit == rem {
        // Convert to px if needed
        $val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value);
      }
      @else {
        // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
        $val: $val + ' ' + $value;
      }
    }
  }

  // Remove first space
  @return string.unquote(string.slice($val, 2));
}

// Helper function to get the responsive value calculated by RFS
@function rfs-fluid-value($values) {
  // Convert to list
  $values: if(meta.type-of($values) != list, ($values,), $values);

  $val: '';

  // Loop over each value and calculate value
  @each $value in $values {
    @if $value == 0 {
      $val: $val + ' 0';
    }

    @else {
      // Cache $value unit
      $unit: if(meta.type-of($value) == "number", math.unit($value), false);

      // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
      @if not $unit or $unit != px and $unit != rem {
        $val: $val + ' ' + $value;
      }

      @else {
        // Remove unit from $value for calculations
        $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));

        // Only add the media query if the value is greater than the minimum value
        @if math.abs($value) <= $rfs-base-value or not $enable-rfs {
          $val: $val + ' ' +  if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
        }
        @else {
          // Calculate the minimum value
          $value-min: $rfs-base-value + (math.abs($value) - $rfs-base-value) / $rfs-factor;

          // Calculate difference between $value and the minimum value
          $value-diff: math.abs($value) - $value-min;

          // Base value formatting
          $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px);

          // Use negative value if needed
          $min-width: if($value < 0, -$min-width, $min-width);

          // Use `vmin` if two-dimensional is enabled
          $variable-unit: if($rfs-two-dimensional, vmin, vw);

          // Calculate the variable width between 0 and $rfs-breakpoint
          $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};

          // Return the calculated value
          $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
        }
      }
    }
  }

  // Remove first space
  @return string.unquote(string.slice($val, 2));
}

// RFS mixin
@mixin rfs($values, $property: font-size) {
  @if $values != null {
    $val: rfs-value($values);
    $fluidVal: rfs-fluid-value($values);

    // Do not print the media query if responsive & non-responsive values are the same
    @if $val == $fluidVal {
      #{$property}: $val;
    }
    @else {
      @include _rfs-rule {
        #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);

        // Include safari iframe resize fix if needed
        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
      }

      @include _rfs-media-query-rule {
        #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
      }
    }
  }
}

// Shorthand helper mixins
@mixin font-size($value) {
  @include rfs($value);
}

@mixin padding($value) {
  @include rfs($value, padding);
}

@mixin padding-top($value) {
  @include rfs($value, padding-top);
}

@mixin padding-right($value) {
  @include rfs($value, padding-right);
}

@mixin padding-bottom($value) {
  @include rfs($value, padding-bottom);
}

@mixin padding-left($value) {
  @include rfs($value, padding-left);
}

@mixin margin($value) {
  @include rfs($value, margin);
}

@mixin margin-top($value) {
  @include rfs($value, margin-top);
}

@mixin margin-right($value) {
  @include rfs($value, margin-right);
}

@mixin margin-bottom($value) {
  @include rfs($value, margin-bottom);
}

@mixin margin-left($value) {
  @include rfs($value, margin-left);
}

I'm using RFS v9.0.3 with PostCSS. The rfs() function doesn't work when wrapped in a calc() function.

Input:

margin-right: calc(rfs(2rem) * 2);

Output:

margin-right: rfs(2rem) * 2;

Expected Output:

margin-right: calc(calc(1.325rem + 0.9vw) * 2);