responsive-scale-mixins 2.2.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.2.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,7 +86,7 @@ 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 */
 }
@@ -282,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

package/index.scss

@@ -1,4 +1,4 @@
-// Responsive Scale Mixins v2.2.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
@@ -88,6 +88,18 @@ $rsm-mobile-width: 390px !default;
   @return calc((100vw / #{$rsm-mobile-width}) * #{$mobile-value}#{$unit});
 }
 
+@function get-scale-factor($unit) {
+  @return string.unquote("--computed-scale-factor");
+}
+
+@function get-tablet-scale-factor($unit) {
+  @return string.unquote("--computed-tablet-scale-factor");
+}
+
+@function get-mobile-scale-factor($unit) {
+  @return string.unquote("--computed-mobile-scale-factor");
+}
+
 /* v2.2.0: Main responsive scale mixin with fallback support
  * Generates two CSS declarations:
  * 1. Static fallback value for unsupported browsers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-scale-mixins",
-  "version": "2.2.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",