fix(transformer): value => value[0] for legacyLogicalProperties to av…

…oid duplicate !important
ant-design · Dec 11, 2023 · a8065bf · a8065bf
1 parent 343567c
commit a8065bf
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/transformers/legacyLogicalProperties.ts b/src/transformers/legacyLogicalProperties.ts
@@ -151,7 +151,7 @@ const transform: Transformer = {
           });
         } else if (matchValue.length === 1) {
           // Handle like `marginBlockStart` => `marginTop`
-          clone[matchValue[0]] = wrapImportantAndSkipCheck(value, important);
+          clone[matchValue[0]] = wrapImportantAndSkipCheck(values[0], important);
         } else if (matchValue.length === 2) {
           // Handle like `marginBlock` => `marginTop` & `marginBottom`
           matchValue.forEach((matchKey, index) => {

diff --git a/tests/transform.spec.tsx b/tests/transform.spec.tsx
@@ -151,13 +151,16 @@ describe('transform', () => {
           css={{
             '.box': {
               paddingInline: '33px !important',
+              marginBlockStart: '33px !important',
+              marginBlockEnd: 'calc(2px + 3px) !important',
             },
           }}
         />,
       );
 
       const styleText = document.head.querySelector('style')?.innerHTML;
-      expect(styleText).toContain('33px!important');
+      expect(styleText).toContain('padding-left:33px!important;padding-right:33px!important');
+      expect(styleText).toContain('margin-top:33px!important;margin-bottom:calc(2px+3px)!important;');
     });
 
     it('split with calc() and var()', () => {