fix: transform logical (#165)

* fix: transform logical

* chore: fix compile

Author: MadCcc

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

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;
 
 /**

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;
     }, []),

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', () => {