Fix several issues with rem transforms

mantinedev · Apr 11, 2024 · ed14813 · ed14813
1 parent 646d00c
commit ed14813
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 3 deletions.
diff --git a/src/converters.ts b/src/converters.ts
@@ -1,11 +1,15 @@
 function scaleRem(remValue: string) {
+  if (remValue === '0rem') {
+    return '0rem';
+  }
+
   return `calc(${remValue} * var(--mantine-scale))`;
 }
 
 function createConverter(units: string, { shouldScale = false } = {}) {
   function converter(value: unknown): string {
     if (value === 0 || value === '0') {
-      return '0';
+      return `0${units}`;
     }
 
     if (typeof value === 'number') {
@@ -14,10 +18,17 @@ function createConverter(units: string, { shouldScale = false } = {}) {
     }
 
     if (typeof value === 'string') {
-      if (value.startsWith('calc(') || value.startsWith('var(') || value.startsWith('clamp(')) {
+      if (value.startsWith('calc(') || value.startsWith('clamp(') || value.includes('rgba(')) {
         return value;
       }
 
+      if (value.includes(',')) {
+        return value
+          .split(',')
+          .map((val) => converter(val))
+          .join(',');
+      }
+
       if (value.includes(' ')) {
         return value
           .split(' ')

diff --git a/src/tests/__snapshots__/auto-rem.test.ts.snap b/src/tests/__snapshots__/auto-rem.test.ts.snap
@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`auto-rem does not transform strings with rgba 1`] = `
+"
+.demo {
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0 0 0 5px inset,
+    rgb(0, 0, 0, 0.15) 0 0 3px inset;
+}
+"
+`;
+
 exports[`auto-rem it transforms input with rem function correctly 1`] = `
 "
 .demo {
@@ -28,7 +38,15 @@ exports[`auto-rem it transforms px to rem values correctly 1`] = `
   padding: calc(0.625rem * var(--mantine-scale)) calc(3.125rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale)) calc(1.875rem * var(--mantine-scale));
   background: red;
   border: calc(0.0625rem * var(--mantine-scale)) solid black;
-  box-shadow: 0 0 calc(0.625rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
+}
+"
+`;
+
+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;
 }
 "
 `;
diff --git a/src/tests/auto-rem.test.ts b/src/tests/auto-rem.test.ts
@@ -27,6 +27,20 @@ const mediaInput = `
 }
 `;
 
+const rgbaInput = `
+.demo {
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0 0 0 5px inset,
+    rgb(0, 0, 0, 0.15) 0 0 3px inset;
+}
+`;
+
+const comaSeparatedInput = `
+.demo {
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+}
+`;
+
 describe('auto-rem', () => {
   it('it transforms px to rem values correctly', async () => {
     const res = await testTransform(baseInput, { autoRem: true });
@@ -42,4 +56,14 @@ describe('auto-rem', () => {
     const res = await testTransform(mediaInput, { autoRem: true });
     expect(res.css).toMatchSnapshot();
   });
+
+  it('does not transform strings with rgba', async () => {
+    const res = await testTransform(rgbaInput, { autoRem: true });
+    expect(res.css).toMatchSnapshot();
+  });
+
+  it('transforms coma separated values correctly', async () => {
+    const res = await testTransform(comaSeparatedInput, { autoRem: true });
+    expect(res.css).toMatchSnapshot();
+  });
 });