From cda9a7a49915c071531b7db7393eb653fa8cccc5 Mon Sep 17 00:00:00 2001
From: a755956503 <755956503@qq.com>
Date: Thu, 11 May 2023 17:46:41 +0800
Subject: [PATCH] fix: transformer support calc grammar

---
 docs/examples/logicalProperties.tsx         |  2 +-
 src/transformers/legacyLogicalProperties.ts | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/examples/logicalProperties.tsx b/docs/examples/logicalProperties.tsx
index 8f56c116..03e1b2bb 100644
--- a/docs/examples/logicalProperties.tsx
+++ b/docs/examples/logicalProperties.tsx
@@ -21,7 +21,7 @@ const Demo = () => {
         border: '1px solid #000',
         position: 'relative',
         // css logical-properties
-        paddingInline: 10,
+        paddingInline: 'calc(10px - 2px)',
         borderBlockEndWidth: 3,
         marginBlock: 10,
         borderEndEndRadius: '50%',
diff --git a/src/transformers/legacyLogicalProperties.ts b/src/transformers/legacyLogicalProperties.ts
index 3e25c6f6..09b9bab5 100644
--- a/src/transformers/legacyLogicalProperties.ts
+++ b/src/transformers/legacyLogicalProperties.ts
@@ -16,22 +16,22 @@ 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) => {
       if (item.includes('(')) {
-        temp += item;
+        temp.push(item);
         brackets += item.split('(').length - 1;
       } else if (item.includes(')')) {
-        temp += item;
+        temp.push(item);
         brackets -= item.split(')').length - 1;
         if (brackets === 0) {
-          list.push(temp);
-          temp = '';
+          list.push(temp.join(' '));
+          temp = [];
         }
       } else if (brackets > 0) {
-        temp += item;
+        temp.push(item);
       } else {
         list.push(item);
       }