From 94528e009fb4264eb38ea0978ac05fc350d596b1 Mon Sep 17 00:00:00 2001
From: MadCcc <madccc@foxmail.com>
Date: Thu, 7 Dec 2023 20:54:15 +0800
Subject: [PATCH] fix: transform logical (#165)

* fix: transform logical

* chore: fix compile
---
 package.json                                |  2 +-
 src/hooks/useCompatibleInsertionEffect.tsx  |  2 +-
 src/transformers/legacyLogicalProperties.ts | 20 ++++++++------------
 tests/transform.spec.tsx                    | 21 +++++++++++++++++++++
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index e4a6dd1d..3bec46b3 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@emotion/hash": "^0.8.0",
     "@emotion/unitless": "^0.7.5",
     "classnames": "^2.3.1",
-    "csstype": "^3.0.10",
+    "csstype": "3.1.2",
     "rc-util": "^5.35.0",
     "stylis": "^4.0.13"
   },
diff --git a/src/hooks/useCompatibleInsertionEffect.tsx b/src/hooks/useCompatibleInsertionEffect.tsx
index 3440f64c..4e451120 100644
--- a/src/hooks/useCompatibleInsertionEffect.tsx
+++ b/src/hooks/useCompatibleInsertionEffect.tsx
@@ -13,7 +13,7 @@ const { useInsertionEffect } = fullClone;
 type UseCompatibleInsertionEffect = (
   renderEffect: EffectCallback,
   effect: (polyfill?: boolean) => ReturnType<EffectCallback>,
-  deps?: React.DependencyList,
+  deps: React.DependencyList,
 ) => void;
 
 /**
diff --git a/src/transformers/legacyLogicalProperties.ts b/src/transformers/legacyLogicalProperties.ts
index 3e25c6f6..a820f759 100644
--- a/src/transformers/legacyLogicalProperties.ts
+++ b/src/transformers/legacyLogicalProperties.ts
@@ -20,20 +20,16 @@ function splitValues(
   let brackets = 0;
   return [
     splitStyle.reduce<string[]>((list, item) => {
-      if (item.includes('(')) {
-        temp += item;
-        brackets += item.split('(').length - 1;
-      } else if (item.includes(')')) {
-        temp += item;
-        brackets -= item.split(')').length - 1;
-        if (brackets === 0) {
-          list.push(temp);
-          temp = '';
-        }
+      if (item.includes('(') || item.includes(')')) {
+        const left = item.split('(').length - 1;
+        const right = item.split(')').length - 1;
+        brackets += left - right;
+      }
+      if (brackets === 0) {
+        list.push(temp + item);
+        temp = '';
       } else if (brackets > 0) {
         temp += item;
-      } else {
-        list.push(item);
       }
       return list;
     }, []),
diff --git a/tests/transform.spec.tsx b/tests/transform.spec.tsx
index 322fab9a..0538552e 100644
--- a/tests/transform.spec.tsx
+++ b/tests/transform.spec.tsx
@@ -159,6 +159,27 @@ describe('transform', () => {
       const styleText = document.head.querySelector('style')?.innerHTML;
       expect(styleText).toContain('33px!important');
     });
+
+    it('split with calc() and var()', () => {
+      const { container } = render(
+        <Wrapper
+          css={{
+            '.box': {
+              marginBlock: 'calc(var(--a) + var(--b)) calc(2px + var(--c))',
+              marginInline: 'calc(2px + 1px)',
+              marginInlineEnd: '3px',
+            },
+          }}
+        />,
+      );
+
+      expect(container.querySelector('.box')).toHaveStyle({
+        marginTop: 'calc(var(--a) + var(--b))',
+        marginBottom: 'calc(2px + var(--c))',
+        marginLeft: 'calc(2px + 1px)',
+        marginRight: '3px',
+      });
+    });
   });
 
   describe('px2rem', () => {