fix: handle invalid px suffix token values

mym0404 · Mar 14, 2024 · 4dfa1cc · 4dfa1cc
1 parent 7379416
commit 4dfa1cc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/hook/useSx.test.ts b/src/hook/useSx.test.ts
@@ -52,6 +52,13 @@ describe('simple usages', () => {
 });
 
 describe('edge case', () => {
+  it('invalid px suffix', () => {
+    expectResult(baseTheme, { w: 'undefinedpx' as any }, {});
+    expectResult(baseTheme, { w: 'nullpx' as any }, {});
+    expectResult(baseTheme, { w: '-px' as any }, {});
+    expectResult(baseTheme, { w: '-1px' as any }, { width: -1 });
+  });
+
   it('if token is undefined, baseStyle is returned', () => {
     expectResult(undefined as any, {}, {});
     expectResult(undefined as any, { style: { width: 1 } }, { width: 1 });

diff --git a/src/util/propsToThemedStyle.ts b/src/util/propsToThemedStyle.ts
@@ -43,6 +43,10 @@ export const propsToThemedStyle = ({
     if (is.number(px)) {
       return px;
     }
+    // end with px but not number parsed
+    if (is.string(token) && token.endsWith('px')) {
+      return;
+    }
 
     const spaces = theme.space;
 
@@ -121,6 +125,11 @@ export const propsToThemedStyle = ({
       return px;
     }
 
+    // end with px but not number parsed
+    if (is.string(token) && token.endsWith('px')) {
+      return;
+    }
+
     const sizes = theme.sizes;
 
     if ((is.string(token) || is.number(token)) && token in sizes) {