From ae339d11fc0b16ab00002902f92cf80237595850 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BA=A2?= <wxh1220@gmail.com>
Date: Wed, 13 Mar 2024 20:53:04 +0800
Subject: [PATCH] fix: logical attribute calc css variable logic error (#177)

* test: update unit test

* fix: logical attribute calc css variable logic error

* chore: update test case

* fix: update logic

* chore: fix snapshot

* chore: update logic

Co-authored-by: yoyo837 <yoyo837@users.noreply.github.com>

---------

Co-authored-by: yoyo837 <yoyo837@users.noreply.github.com>
---
 src/transformers/legacyLogicalProperties.ts |  9 ++++-----
 tests/__snapshots__/transform.spec.tsx.snap |  3 +++
 tests/transform.spec.tsx                    | 19 +++++++++++++++++++
 3 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 tests/__snapshots__/transform.spec.tsx.snap

diff --git a/src/transformers/legacyLogicalProperties.ts b/src/transformers/legacyLogicalProperties.ts
index a820f75..7d16c2d 100644
--- a/src/transformers/legacyLogicalProperties.ts
+++ b/src/transformers/legacyLogicalProperties.ts
@@ -16,7 +16,7 @@ function splitValues(
     .split(/\s+/);
 
   // Combine styles split in brackets, like `calc(1px + 2px)`
-  let temp = '';
+  let temp: string[] = [];
   let brackets = 0;
   return [
     splitStyle.reduce<string[]>((list, item) => {
@@ -25,11 +25,10 @@ function splitValues(
         const right = item.split(')').length - 1;
         brackets += left - right;
       }
+      if (brackets >= 0) temp.push(item);
       if (brackets === 0) {
-        list.push(temp + item);
-        temp = '';
-      } else if (brackets > 0) {
-        temp += item;
+        list.push(temp.join(' '));
+        temp = [];
       }
       return list;
     }, []),
diff --git a/tests/__snapshots__/transform.spec.tsx.snap b/tests/__snapshots__/transform.spec.tsx.snap
new file mode 100644
index 0000000..f3dc00c
--- /dev/null
+++ b/tests/__snapshots__/transform.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`transform > legacyLogicalProperties > split with calc() and var() 1`] = `".box{margin-top:calc(var(--a) + var(--b));margin-bottom:calc(2px + var(--c));margin-left:calc(2px + 1px);margin-right:3px;}.antd-issue-47652{padding-left:calc(8px - var(--c));padding-right:calc(8px - var(--c));}.antd-issue-47707{padding-left:calc(50% - calc(var(--c) / 2) - var(-c));padding-right:calc(50% - calc(var(--c) / 2) - var(-c));}"`;
diff --git a/tests/transform.spec.tsx b/tests/transform.spec.tsx
index 0538552..215bb06 100644
--- a/tests/transform.spec.tsx
+++ b/tests/transform.spec.tsx
@@ -161,6 +161,9 @@ describe('transform', () => {
     });
 
     it('split with calc() and var()', () => {
+      const str47652 = 'calc(8px - var(--c))';
+      const str47707 = 'calc(50% - calc(var(--c) / 2) - var(-c))';
+
       const { container } = render(
         <Wrapper
           css={{
@@ -169,6 +172,13 @@ describe('transform', () => {
               marginInline: 'calc(2px + 1px)',
               marginInlineEnd: '3px',
             },
+            // https://github.com/ant-design/ant-design/issues/47652
+            '.antd-issue-47652': {
+              paddingInline: str47652,
+            },
+            '.antd-issue-47707': {
+              paddingInline: str47707,
+            }
           }}
         />,
       );
@@ -179,6 +189,15 @@ describe('transform', () => {
         marginLeft: 'calc(2px + 1px)',
         marginRight: '3px',
       });
+
+      const styleText = document.head.querySelector('style')?.innerHTML;
+      expect(styleText).toMatchSnapshot();
+
+      expect(styleText).toContain(`padding-left:${str47652}`);
+      expect(styleText).toContain(`padding-right:${str47652}`);
+
+      expect(styleText).toContain(`padding-left:${str47707}`);
+      expect(styleText).toContain(`padding-right:${str47707}`);
     });
   });