[@mantine/core] Fix incorrect empty string handling in style props (#…

…6078) * Spacing: fix resolver for empty strings, and strings with spaces * fix a test that was broken with corrected output from this change
mantinedev · Apr 23, 2024 · 9130628 · 9130628
1 parent a1c7ff4
commit 9130628
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/...mantine/core/src/core/Box/style-props/resolvers/spacing-resolver/spacing-resolver.test.ts b/...mantine/core/src/core/Box/style-props/resolvers/spacing-resolver/spacing-resolver.test.ts
@@ -20,4 +20,9 @@ describe('@mantine/core/Box/spacing-resolver', () => {
     expect(spacingResolver('-10px', DEFAULT_THEME)).toBe(rem(-10));
     expect(spacingResolver('1rem', DEFAULT_THEME)).toBe(rem('1rem'));
   });
+
+  it('resolves empty strings correctly', () => {
+    expect(spacingResolver('', DEFAULT_THEME)).toBe(rem(''));
+    expect(spacingResolver(' 10px', DEFAULT_THEME)).toBe(` ${rem(10)}`);
+  });
 });
diff --git a/packages/@mantine/core/src/core/utils/units-converters/rem.test.ts b/packages/@mantine/core/src/core/utils/units-converters/rem.test.ts
@@ -70,7 +70,7 @@ describe('@mantine/units-converters/rem', () => {
 
   it('correctly transforms a list of coma separated values', () => {
     expect(rem('0 0, 0 4px, 4px -4px, -4px 0')).toBe(
-      '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'
+      '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/packages/@mantine/core/src/core/utils/units-converters/rem.ts b/packages/@mantine/core/src/core/utils/units-converters/rem.ts
@@ -18,6 +18,11 @@ function createConverter(units: string, { shouldScale = false } = {}) {
     }
 
     if (typeof value === 'string') {
+      // Number("") === 0 so exit early
+      if (value === '') {
+        return value;
+      }
+
       if (value.startsWith('calc(') || value.startsWith('clamp(') || value.includes('rgba(')) {
         return value;
       }