Fix incorrect auto-rem transform of uniless values

Author: rtivital

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 {

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,
 };

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;
 }
 "
 `;

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();
+  });
 });