From c8c9989b4bdb000a58faed96f6448445116485a6 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Thu, 11 Apr 2024 11:28:55 +0400
Subject: [PATCH] Fix incorrect auto-rem transform of uniless values

---
 src/auto-rem.ts                               |  2 +-
 src/converters.ts                             |  9 ++++++++-
 src/tests/__snapshots__/auto-rem.test.ts.snap | 10 +++++++++-
 src/tests/auto-rem.test.ts                    | 11 +++++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/auto-rem.ts b/src/auto-rem.ts
index 8b9b35e..5847607 100644
--- a/src/auto-rem.ts
+++ b/src/auto-rem.ts
@@ -1,7 +1,7 @@
 import { Declaration } from 'postcss';
 const unitsConverters = require('./converters');
 
-const rem = unitsConverters.rem;
+const rem = unitsConverters.remStrict;
 
 module.exports = () => {
   return {
diff --git a/src/converters.ts b/src/converters.ts
index d6076e8..433377d 100644
--- a/src/converters.ts
+++ b/src/converters.ts
@@ -6,7 +6,7 @@ function scaleRem(remValue: string) {
   return `calc(${remValue} * var(--mantine-scale))`;
 }
 
-function createConverter(units: string, { shouldScale = false } = {}) {
+function createConverter(units: string, { shouldScale = false, transformUnitLess = true } = {}) {
   function converter(value: unknown): string {
     if (value === 0 || value === '0') {
       return `0${units}`;
@@ -41,6 +41,11 @@ function createConverter(units: string, { shouldScale = false } = {}) {
       }
 
       const replaced = value.replace('px', '');
+
+      if (replaced === value && !transformUnitLess) {
+        return value;
+      }
+
       if (!Number.isNaN(Number(replaced))) {
         const val = `${Number(replaced) / 16}${units}`;
         return shouldScale ? scaleRem(val) : val;
@@ -54,6 +59,7 @@ function createConverter(units: string, { shouldScale = false } = {}) {
 }
 
 const rem = createConverter('rem', { shouldScale: true });
+const remStrict = createConverter('rem', { shouldScale: true, transformUnitLess: false });
 const remNoScale = createConverter('rem');
 const em = createConverter('em');
 
@@ -102,5 +108,6 @@ module.exports = {
   px,
   em,
   rem,
+  remStrict,
   remNoScale,
 };
diff --git a/src/tests/__snapshots__/auto-rem.test.ts.snap b/src/tests/__snapshots__/auto-rem.test.ts.snap
index e2f2ab3..9ae5201 100644
--- a/src/tests/__snapshots__/auto-rem.test.ts.snap
+++ b/src/tests/__snapshots__/auto-rem.test.ts.snap
@@ -10,6 +10,14 @@ exports[`auto-rem does not transform strings with rgba 1`] = `
 "
 `;
 
+exports[`auto-rem does not transform values without units 1`] = `
+"
+.demo {
+  flex: 1 1 calc(7.5rem * var(--mantine-scale))
+}
+"
+`;
+
 exports[`auto-rem it transforms input with rem function correctly 1`] = `
 "
 .demo {
@@ -46,7 +54,7 @@ exports[`auto-rem it transforms px to rem values correctly 1`] = `
 exports[`auto-rem transforms coma separated values correctly 1`] = `
 "
 .demo {
-  background-position: 0rem 0rem,0rem 0rem calc(0.25rem * var(--mantine-scale)),0rem calc(0.25rem * var(--mantine-scale)) calc(-0.25rem * var(--mantine-scale)),0rem calc(-0.25rem * var(--mantine-scale)) 0rem;
+  background-position: 0rem 0rem, 0rem calc(0.25rem * var(--mantine-scale)), calc(0.25rem * var(--mantine-scale)) calc(-0.25rem * var(--mantine-scale)), calc(-0.25rem * var(--mantine-scale)) 0rem;
 }
 "
 `;
diff --git a/src/tests/auto-rem.test.ts b/src/tests/auto-rem.test.ts
index b813642..73d314b 100644
--- a/src/tests/auto-rem.test.ts
+++ b/src/tests/auto-rem.test.ts
@@ -41,6 +41,12 @@ const comaSeparatedInput = `
 }
 `;
 
+const unitLessInput = `
+.demo {
+  flex: 1 1 120px
+}
+`;
+
 describe('auto-rem', () => {
   it('it transforms px to rem values correctly', async () => {
     const res = await testTransform(baseInput, { autoRem: true });
@@ -66,4 +72,9 @@ describe('auto-rem', () => {
     const res = await testTransform(comaSeparatedInput, { autoRem: true });
     expect(res.css).toMatchSnapshot();
   });
+
+  it('does not transform values without units', async () => {
+    const res = await testTransform(unitLessInput, { autoRem: true });
+    expect(res.css).toMatchSnapshot();
+  });
 });