feat: handle !important when merging physical to logical CSS properties

.tape.js

@@ -75,6 +75,14 @@ module.exports = {
 		source: 'body { left: 0; right: 0 }',
 		expect: 'body { inset-inline: 0 }',
 		args: 'always'
+	}, {
+		source: 'body { left: 0 !important; right: 0 !important }',
+		expect: 'body { inset-inline: 0 !important }',
+		args: 'always'
+	}, {
+		source: 'body { left: 0; right: 0 !important }',
+		expect: 'body { inset-inline-start: 0; inset-inline-end: 0 !important }',
+		args: 'always'
 	}, {
 		source: 'body { top: 0; right: 0; bottom: 0; left: 0 }',
 		expect: 'body { inset: 0 }',
@@ -213,6 +221,14 @@ module.exports = {
 			source: 'body { border-bottom-right-radius: 0; }',
 			expect: 'body { border-end-end-radius: 0; }',
 			args: 'always'
+		}, {
+			source: 'body { border-bottom-right-radius: 0 !important; }',
+			expect: 'body { border-end-end-radius: 0 !important; }',
+			args: 'always'
+		}, {
+			source: 'body { right: 0; left: auto !important; }',
+			expect: 'body { inset-inline-end: 0; inset-inline-start: auto !important; }',
+			args: 'always'
 		}
 	]
 };

index.js

@@ -102,12 +102,38 @@ function ruleFunc(method, opts, context) {
 						: inlineStartDecl;
 
 						if (isAutofix) {
-							firstInlineDecl.cloneBefore({
-								prop,
-								value: blockStartDecl.value === inlineStartDecl.value
-									? blockStartDecl.value
-								: [ blockStartDecl.value, inlineStartDecl.value ].join(' ')
-							});
+							// Check if both declarations have the same importance
+							if (blockStartDecl.important === inlineStartDecl.important) {
+								// Same importance, can use shorthand
+								firstInlineDecl.cloneBefore({
+									prop,
+									value: blockStartDecl.value === inlineStartDecl.value
+										? blockStartDecl.value
+									: [ blockStartDecl.value, inlineStartDecl.value ].join(' '),
+									important: blockStartDecl.important
+								});
+							} else {
+								// Different importance, must use individual properties
+								const mappings = physicalProp(dir);
+
+								// Find the logical property for each physical property
+								mappings.forEach(([physicalProps, logicalProp]) => {
+									if (physicalProps.includes(blockStartDecl.prop)) {
+										blockStartDecl.cloneBefore({
+											prop: logicalProp,
+											value: blockStartDecl.value,
+											important: blockStartDecl.important
+										});
+									}
+									if (physicalProps.includes(inlineStartDecl.prop)) {
+										inlineStartDecl.cloneBefore({
+											prop: logicalProp,
+											value: inlineStartDecl.value,
+											important: inlineStartDecl.important
+										});
+									}
+								});
+							}
 
 							blockStartDecl.remove();
 							inlineStartDecl.remove();