fix: important should also convert

src/transformers/legacyLogicalProperties.ts

@@ -1,34 +1,44 @@
 import type { CSSObject } from '..';
 import type { Transformer } from './interface';
 
-function splitValues(value: string | number) {
+function splitValues(
+  value: string | number,
+): [values: (string | number)[], important: boolean] {
   if (typeof value === 'number') {
-    return [value];
+    return [[value], false];
   }
 
-  const splitStyle = String(value).split(/\s+/);
+  const rawStyle = String(value).trim();
+  const importantCells = rawStyle.match(/(.*)(!important)/);
+
+  const splitStyle = (importantCells ? importantCells[1] : rawStyle)
+    .trim()
+    .split(/\s+/);
 
   // Combine styles split in brackets, like `calc(1px + 2px)`
   let temp = '';
   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 = '';
+  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 = '';
+        }
+      } else if (brackets > 0) {
+        temp += item;
+      } else {
+        list.push(item);
       }
-    } else if (brackets > 0) {
-      temp += item;
-    } else {
-      list.push(item);
-    }
-    return list;
-  }, []);
+      return list;
+    }, []),
+    !!importantCells,
+  ];
 }
 
 type MatchValue = string[] & {
@@ -105,8 +115,14 @@ const keyMap: Record<string, MatchValue> = {
   borderEndEndRadius: ['borderBottomRightRadius'],
 };
 
-function skipCheck(value: string | number) {
-  return { _skip_check_: true, value };
+function wrapImportantAndSkipCheck(value: string | number, important: boolean) {
+  let parsedValue = value;
+
+  if (important) {
+    parsedValue = `${parsedValue} !important`;
+  }
+
+  return { _skip_check_: true, value: parsedValue };
 }
 
 /**
@@ -130,26 +146,30 @@ const transform: Transformer = {
         matchValue &&
         (typeof value === 'number' || typeof value === 'string')
       ) {
-        const values = splitValues(value);
+        const [values, important] = splitValues(value);
 
         if (matchValue.length && matchValue.notSplit) {
           // not split means always give same value like border
           matchValue.forEach((matchKey) => {
-            clone[matchKey] = skipCheck(value);
+            clone[matchKey] = wrapImportantAndSkipCheck(value, important);
           });
         } else if (matchValue.length === 1) {
           // Handle like `marginBlockStart` => `marginTop`
-          clone[matchValue[0]] = skipCheck(value);
+          clone[matchValue[0]] = wrapImportantAndSkipCheck(value, important);
         } else if (matchValue.length === 2) {
           // Handle like `marginBlock` => `marginTop` & `marginBottom`
           matchValue.forEach((matchKey, index) => {
-            clone[matchKey] = skipCheck(values[index] ?? values[0]);
+            clone[matchKey] = wrapImportantAndSkipCheck(
+              values[index] ?? values[0],
+              important,
+            );
           });
         } else if (matchValue.length === 4) {
           // Handle like `inset` => `top` & `right` & `bottom` & `left`
           matchValue.forEach((matchKey, index) => {
-            clone[matchKey] = skipCheck(
+            clone[matchKey] = wrapImportantAndSkipCheck(
               values[index] ?? values[index - 2] ?? values[0],
+              important,
             );
           });
         } else {

tests/transform.spec.tsx

@@ -115,8 +115,6 @@ describe('transform', () => {
         />,
       );
 
-      // console.log(getStyleText());
-
       expect(container.querySelector('.box')).toHaveStyle({
         borderTop: '1px solid red',
         borderBottom: '1px solid red',
@@ -146,6 +144,21 @@ describe('transform', () => {
         marginRight: '3px',
       });
     });
+
+    it('!important', () => {
+      render(
+        <Wrapper
+          css={{
+            '.box': {
+              paddingInline: '33px !important',
+            },
+          }}
+        />,
+      );
+
+      const styleText = document.head.querySelector('style')?.innerHTML;
+      expect(styleText).toContain('33px!important');
+    });
   });
 
   describe('px2rem', () => {