responsive-scale-mixins 2.1.0 → 2.2.1

package/README.md

@@ -50,7 +50,7 @@ Imagine building a beautiful UI in Figma, then seeing it perfectly scale on **ev
 
 Works with React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, and vanilla CSS. Your favorite framework + perfect responsive design = ❤️
 
-## 🚀 v2.1.0 - Universal Browser Compatibility (No Breaking Changes)
+## 🚀 v2.2.1 - Universal Browser Compatibility (No Breaking Changes)
 
 **Automatic fallback generation for browsers without CSS variable support!**
 
@@ -86,10 +86,15 @@ Works with React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, and vanilla CSS. Y
   font-size: calc(100vw / 1920 * 48px);
 }
 
-// v2.1.0 output (works everywhere!)
+// v2.2.1 output (works everywhere!)
 .hero-title {
   font-size: 48px; /* Fallback for old browsers */
-  font-size: calc(100vw / 1920 * 48px); /* Modern responsive scaling */
+}
+
+@supports (font-size: calc(100vw / 1920px * 48px)) {
+  .hero-title {
+    font-size: calc(100vw / 1920px * 48px); /* Modern responsive scaling */
+  }
 }
 ```
 
@@ -122,6 +127,8 @@ Works with React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, and vanilla CSS. Y
 }
 ```
 
+> Note: Setting the last argument to `false` disables fallback output globally for all `rsm.responsive-scale()` calls. Individual declarations can still override this behavior by passing the `$enable-fallback` parameter explicitly.
+
 ### **📊 Performance Impact**
 
 - **CSS size increase**: <1 KB (after GZip) on typical sites
@@ -186,6 +193,9 @@ npm update responsive-scale-mixins
 /* OLD (v1.x) */
 font-size: calc(var(--computed-scale-factor-px) * 40);
 
+/* NEW (v2.0+) */
+font-size: calc(var(--computed-scale-factor) * 40px);
+
 @include rsm.responsive-scale(font-size, 24, 16);
 ```
 
@@ -272,6 +282,38 @@ pnpm add responsive-scale-mixins
 // Import in app/layout.tsx: import './globals.scss'
 ```
 
+### Regression Test
+
+To confirm the fix before publishing, run the local regression case included in `test/regression.scss`.
+
+```bash
+cd test
+./test.sh
+```
+
+If the build succeeds, verify that `test/regression.css` was generated and contains valid modern expressions such as:
+
+```css
+padding: calc(
+    var(--computed-tablet-scale-factor) *
+      (5px + var(--tablet-proportion-scale-factor) * (10px - 5px))
+  )
+  calc(
+    var(--computed-tablet-scale-factor) *
+      (10px + var(--tablet-proportion-scale-factor) * (20px - 10px))
+  );
+```
+
+Then verify the `@supports` output for the single-value case in `test.css` matches the corrected form:
+
+```css
+@supports (margin: calc(100vw / 1920px * 10px)) {
+  .bar {
+    margin: calc(100vw / 1920px * 10px);
+  }
+}
+```
+
 #### Next.js (Pages Router)
 
 ```scss
@@ -1042,6 +1084,15 @@ The library includes a comprehensive test suite located in the `test/` directory
 cd test && ./test.sh
 ```
 
+If `./test.sh` fails because `sass` is not installed globally, run this instead from the repository root:
+
+```bash
+npx --yes sass test/test.scss test/test.css
+start test/test.html
+```
+
+On Windows, you can also open `test/test.html` manually after compiling.
+
 See [`test/TEST_README.md`](test/TEST_README.md) for detailed testing instructions.
 
 <!-- ## � Linking NPM Package to GitHub Packages

package/index.scss

@@ -1,17 +1,23 @@
-// Responsive Scale Mixins v2.1.0
+// Responsive Scale Mixins v2.2.1
 // A powerful SCSS mixin system for creating perfectly responsive designs
 // with universal browser compatibility and static fallbacks
 // Single-file distribution for maximum compatibility
 
+@use "sass:math";
 @use "sass:string";
 @use "sass:meta";
 @use "sass:list";
 
+$rsm-fallback-enabled: true !default;
+$rsm-desktop-width: 1920px !default;
+$rsm-tablet-width: 768px !default;
+$rsm-mobile-width: 390px !default;
+
 /* Responsive Scale Variables Mixin
  * Include this mixin in your root element to define the scaling factors.
  * Adjust the design widths to match your design system breakpoints.
  * 
- * v2.1.0: Now includes fallback generation for browsers without CSS variable support
+ * v2.2.0: Now includes fallback generation for browsers without CSS variable support
  */
 
 @mixin responsive-scale-variables(
@@ -20,94 +26,81 @@
   $mobile-width: 390px,
   $enable-fallback: true
 ) {
+  $rsm-fallback-enabled: $enable-fallback !global;
+  $rsm-desktop-width: $desktop-width !global;
+  $rsm-tablet-width: $tablet-width !global;
+  $rsm-mobile-width: $mobile-width !global;
   // Design widths for direct calc expressions
   --desktop-width: #{$desktop-width};
   --tablet-width: #{$tablet-width};
   --mobile-width: #{$mobile-width};
 
   // Desktop scale factor (generic - unit is appended in calc expressions)
-  --computed-scale-factor: calc(100vw / #{$desktop-width});
+  --computed-scale-factor: (100vw / #{$desktop-width});
 
   // Tablet scale factor (generic - unit is appended in calc expressions)
-  --computed-tablet-scale-factor: calc(100vw / #{$tablet-width});
+  --computed-tablet-scale-factor: (100vw / #{$tablet-width});
 
   // Mobile scale factor (generic - unit is appended in calc expressions)
-  --computed-mobile-scale-factor: calc(100vw / #{$mobile-width});
+  --computed-mobile-scale-factor: (100vw / #{$mobile-width});
 
   // Tablet proportion scale factor for interpolation between mobile and desktop values
-  --tablet-proportion-scale-factor: calc(
+  --tablet-proportion-scale-factor: (
     (100vw - #{$mobile-width}) / (#{$desktop-width} - #{$mobile-width})
   );
 
-  // v2.1.0: Store original design widths as strings for fallback calculation
+  // v2.2.0: Store original design widths as strings for fallback calculation
   --rsm-desktop-width-value: #{strip-units($desktop-width)};
   --rsm-tablet-width-value: #{strip-units($tablet-width)};
   --rsm-mobile-width-value: #{strip-units($mobile-width)};
-  --rsm-fallback-enabled: 1;
+  --rsm-fallback-enabled: #{if(sass($enable-fallback): 1; else: 0)};
 }
 
 /* Utility function to strip units from values */
 @function strip-units($value) {
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, $value * 0 + 1);
 }
 
 /* Responsive Scale Mixins
  * Core scaling functionality with support for all CSS units
- * v2.1.0: Generates both modern calc() AND static fallback values
+ * v2.2.0: Generates both modern calc() AND static fallback values
  */
 
-@function scaled-value($val, $scale-var, $unit: px) {
-  @if $scale-var == "--computed-scale-factor" {
-    @return calc(100vw / var(--desktop-width) * #{$val}#{$unit});
-  } @else if $scale-var == "--computed-tablet-scale-factor" {
-    @return calc(100vw / var(--tablet-width) * #{$val}#{$unit});
-  } @else if $scale-var == "--computed-mobile-scale-factor" {
-    @return calc(100vw / var(--mobile-width) * #{$val}#{$unit});
-  } @else {
-    @return calc(var(#{$scale-var}) * #{$val}#{$unit});
-  }
+@function scaled-value($val, $width, $unit: px) {
+  @return calc((100vw / #{$width}) * #{$val}#{$unit});
 }
 
-/* v2.1.0: Calculate static fallback values for unsupported browsers
- * These values are computed at compile time, not runtime
- */
-@function fallback-value($val, $breakpoint: "desktop", $unit: px) {
-  // Default device widths for fallback calculation
-  $default-desktop: 1920;
-  $default-tablet: 768;
-  $default-mobile: 390;
-
-  @if $breakpoint == "desktop" {
-    $fallback: calc($val);
-    @return $fallback#{$unit};
-  } @else if $breakpoint == "tablet" {
-    // Use middle breakpoint for tablet fallback
-    $fallback: calc($val);
-    @return $fallback#{$unit};
-  } @else if $breakpoint == "mobile" {
-    $fallback: calc($val);
-    @return $fallback#{$unit};
-  }
+@function tablet-interpolation($desktop-value, $mobile-value, $unit) {
+  @return calc(
+    (100vw / #{$rsm-tablet-width}) *
+      (
+        #{$mobile-value}#{$unit} +
+          (
+            (100vw - #{$rsm-mobile-width}) /
+              (#{$rsm-desktop-width} - #{$rsm-mobile-width})
+          ) *
+          (#{$desktop-value}#{$unit} - #{$mobile-value}#{$unit})
+      )
+  );
+}
 
-  @return $val#{$unit};
+@function mobile-scale-expression($mobile-value, $unit) {
+  @return calc((100vw / #{$rsm-mobile-width}) * #{$mobile-value}#{$unit});
 }
 
 @function get-scale-factor($unit) {
-  // Use generic scale factor - unit is appended in calc expressions
   @return string.unquote("--computed-scale-factor");
 }
 
 @function get-tablet-scale-factor($unit) {
-  // Use generic scale factor - unit is appended in calc expressions
   @return string.unquote("--computed-tablet-scale-factor");
 }
 
 @function get-mobile-scale-factor($unit) {
-  // Use generic scale factor - unit is appended in calc expressions
   @return string.unquote("--computed-mobile-scale-factor");
 }
 
-/* v2.1.0: Main responsive scale mixin with fallback support
+/* v2.2.0: Main responsive scale mixin with fallback support
  * Generates two CSS declarations:
  * 1. Static fallback value for unsupported browsers
  * 2. Modern calc() expression for modern browsers
@@ -121,34 +114,32 @@
   $desktop-relative: null,
   $mobile-relative: null,
   $important: null,
-  $enable-fallback: true
+  $enable-fallback: null
 ) {
-  $scale-factor: get-scale-factor($unit);
+  @if $enable-fallback == null {
+    $enable-fallback: $rsm-fallback-enabled;
+  }
 
   // If it's a percentage-based value (like letter-spacing), scale it based on the relative property
   @if $is-percentage == true {
     @if $desktop-relative != null {
-      // v2.1.0: Output fallback value first
       @if $enable-fallback {
-        $fallback-calc: calc(#{$desktop-value} / 100 * #{$desktop-relative});
-        #{$property}: #{$fallback-calc}#{$unit}#{$important};
+        $desktop-fallback: calc(#{$desktop-value} / 100 * #{$desktop-relative});
+        #{$property}: #{$desktop-fallback}#{$unit}#{$important};
       }
 
-      // Modern calc expression (overrides fallback in modern browsers)
-      $calc-value: calc(
-        #{$desktop-value} /
-          100 *
-          (var(#{$scale-factor}) * #{$desktop-relative}#{$unit})
+      $modern-desktop: calc(
+        #{$desktop-value} / 100 * #{$desktop-relative}#{$unit}
       );
-      #{$property}: #{$calc-value}#{$important};
+      @supports (#{$property}: #{$modern-desktop}) {
+        #{$property}: #{$modern-desktop}#{$important};
+      }
     }
 
     @media screen and (min-width: 768px) and (max-width: 991px) {
-      $tablet-scale-factor: get-tablet-scale-factor($unit);
       @if $desktop-relative != null and $mobile-relative != null {
-        // v2.1.0: Fallback for tablet
         @if $enable-fallback {
-          $fallback-tablet: calc(
+          $tablet-fallback: calc(
             #{$mobile-value} /
               100 *
               (
@@ -157,48 +148,46 @@
                   (#{$desktop-relative}#{$unit} - #{$mobile-relative}#{$unit})
               )
           );
-          #{$property}: #{$fallback-tablet}#{$important};
+          #{$property}: #{$tablet-fallback}#{$important};
         }
 
-        // Modern expression
-        $calc-value: calc(
+        $modern-tablet: calc(
           #{$mobile-value} /
             100 *
             (
-              var(#{$tablet-scale-factor}) *
+              #{$mobile-relative}#{$unit} +
                 (
-                  #{$mobile-relative}#{$unit} +
-                    var(--tablet-proportion-scale-factor) *
-                    (#{$desktop-relative}#{$unit} - #{$mobile-relative}#{$unit})
-                )
+                  (100vw - #{$rsm-mobile-width}) /
+                    (#{$rsm-desktop-width} - #{$rsm-mobile-width})
+                ) *
+                (#{$desktop-relative}#{$unit} - #{$mobile-relative}#{$unit})
             )
         );
-        #{$property}: #{$calc-value}#{$important};
+        @supports (#{$property}: #{$modern-tablet}) {
+          #{$property}: #{$modern-tablet}#{$important};
+        }
       }
     }
 
     @media screen and (max-width: 767px) {
-      $mobile-scale-factor: get-mobile-scale-factor($unit);
       @if $mobile-relative != null {
-        // v2.1.0: Fallback for mobile
         @if $enable-fallback {
-          $fallback-mobile: calc(#{$mobile-value} / 100 * #{$mobile-relative});
-          #{$property}: #{$fallback-mobile}#{$unit}#{$important};
+          $mobile-fallback: calc(#{$mobile-value} / 100 * #{$mobile-relative});
+          #{$property}: #{$mobile-fallback}#{$unit}#{$important};
         }
 
-        // Modern expression
-        $calc-value: calc(
-          #{$mobile-value} /
-            100 *
-            (var(#{$mobile-scale-factor}) * #{$mobile-relative}#{$unit})
+        $modern-mobile: calc(
+          #{$mobile-value} / 100 * #{$mobile-relative}#{$unit}
         );
-        #{$property}: #{$calc-value}#{$important};
+        @supports (#{$property}: #{$modern-mobile}) {
+          #{$property}: #{$modern-mobile}#{$important};
+        }
       }
     }
   } @else {
     // Regular absolute scaling
     @if meta.type-of($desktop-value) == list {
-      // v2.1.0: Fallback for list values (padding: 20 40)
+      // v2.2.0: Fallback for list values (padding: 20 40)
       @if $enable-fallback {
         $desktop-fallback: ();
         @each $val in $desktop-value {
@@ -212,25 +201,27 @@
       @each $val in $desktop-value {
         $desktop-scaled: list.append(
           $desktop-scaled,
-          scaled-value($val, $scale-factor, $unit)
+          scaled-value($val, $rsm-desktop-width, $unit)
         );
       }
       #{$property}: #{$desktop-scaled}#{$important};
     } @else {
-      // v2.1.0: Fallback for single values
+      // v2.2.0: Fallback for single values
       @if $enable-fallback {
         #{$property}: #{$desktop-value}#{$unit}#{$important};
       }
 
-      // Modern calc expression
-      $scaled-value: scaled-value($desktop-value, $scale-factor, $unit);
-      #{$property}: #{$scaled-value}#{$important};
+      // Modern calc expression (wrapped in @supports so Firefox will fallback)
+      $modern-desktop: scaled-value($desktop-value, $rsm-desktop-width, $unit);
+      @supports (#{$property}: #{$modern-desktop}) {
+        #{$property}: #{$modern-desktop}#{$important};
+      }
     }
 
     @media screen and (min-width: 768px) and (max-width: 991px) {
       $tablet-scale-factor: get-tablet-scale-factor($unit);
       @if meta.type-of($desktop-value) == list {
-        // v2.1.0: Fallback for tablet list
+        // v2.2.0: Fallback for tablet list
         @if $enable-fallback {
           $tablet-fallback: ();
           @for $i from 1 through list.length($desktop-value) {
@@ -259,28 +250,27 @@
         }
         #{$property}: #{$tablet-scaled}#{$important};
       } @else {
-        // v2.1.0: Fallback for tablet single value
+        // v2.2.0: Fallback for tablet single value
         @if $enable-fallback {
           #{$property}: #{$mobile-value}#{$unit}#{$important};
         }
 
-        // Modern expression
-        $calc-value: calc(
-          var(#{$tablet-scale-factor}) *
-            (
-              #{$mobile-value}#{$unit} +
-                var(--tablet-proportion-scale-factor) *
-                (#{$desktop-value}#{$unit} - #{$mobile-value}#{$unit})
-            )
+        // Modern expression (wrapped in @supports so Firefox will fallback)
+        $modern-tablet: tablet-interpolation(
+          $desktop-value,
+          $mobile-value,
+          $unit
         );
-        #{$property}: #{$calc-value}#{$important};
+        @supports (#{$property}: #{$modern-tablet}) {
+          #{$property}: #{$modern-tablet}#{$important};
+        }
       }
     }
 
     @media screen and (max-width: 767px) {
       $mobile-scale-factor: get-mobile-scale-factor($unit);
       @if meta.type-of($mobile-value) == list {
-        // v2.1.0: Fallback for mobile list
+        // v2.2.0: Fallback for mobile list
         @if $enable-fallback {
           $mobile-fallback: ();
           @each $val in $mobile-value {
@@ -294,25 +284,27 @@
         @each $val in $mobile-value {
           $mobile-scaled: list.append(
             $mobile-scaled,
-            scaled-value($val, $mobile-scale-factor, $unit)
+            scaled-value($val, $rsm-mobile-width, $unit)
           );
         }
         #{$property}: #{$mobile-scaled}#{$important};
       } @else {
-        // v2.1.0: Fallback for mobile single value
+        // v2.2.0: Fallback for mobile single value
         @if $enable-fallback {
           #{$property}: #{$mobile-value}#{$unit}#{$important};
         }
 
-        // Modern expression
-        $scaled-value: scaled-value($mobile-value, $mobile-scale-factor, $unit);
-        #{$property}: #{$scaled-value}#{$important};
+        // Modern expression (wrapped in @supports so Firefox will fallback)
+        $modern-mobile: mobile-scale-expression($mobile-value, $unit);
+        @supports (#{$property}: #{$modern-mobile}) {
+          #{$property}: #{$modern-mobile}#{$important};
+        }
       }
     }
   }
 }
 
-/* v2.1.0: New mixin to disable fallback for specific declarations
+/* v2.2.0: New mixin to disable fallback for specific declarations
  * Useful when you want only modern browsers to receive a style
  */
 @mixin responsive-scale-no-fallback(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-scale-mixins",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "🎨 Revolutionary SCSS mixins for perfect responsive design with universal browser compatibility. Supports ALL CSS units (px, rem, em, vw, vh, %, etc.) with pixel-perfect scaling and automatic fallbacks for browsers without CSS variable support. Zero manual calculations - just flawless responsive typography, spacing, and dimensions across desktop, tablet, and mobile. Single-file distribution for maximum compatibility. Framework-agnostic, works everywhere including Firefox Mobile and old Android browsers.",
   "main": "index.scss",
   "style": "index.scss",