Merge a79f96a into 907a22b

ant-design · Mar 13, 2024 · 6c8152d · 6c8152d
2 parents 907a22b + a79f96a
commit 6c8152d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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}`);
     });
   });