In the override method change the unset value to override properties by the initial value of them

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [3.0.1] - 2021-02-19
+
+- In the override method change the `unset` value to override properties by the intial value of them to support the override method in Internet Explorer
+
 ## [3.0.0] - 2021-01-29
 
 - Export the plugin as the default module to increase its compatibility

README.md

@@ -167,7 +167,7 @@ This is the alternative method, it will generate less code because it lets the m
 
 [dir="rtl"] .test1, [dir="rtl"] .test2 {
     border-radius: 2px 0 8px 0;
-    padding-right: unset;
+    padding-right: 0;
     padding-left: 20px;
     text-align: right;
     transform: translate(50%, 50%);
@@ -244,7 +244,7 @@ However, using the override method the generated code will be the next one:
 }
 
 [dir="rtl"] .test2 {
-    padding-right: unset;
+    padding-right: 0;
     padding-left: 10px;
 }
 ```
@@ -626,7 +626,7 @@ const options = {
 }
 
 [dir="ltr"] .test1, [dir="ltr"] .test2 {
-    left: unset;
+    left: auto;
     right: 10px;
 }
 ```

src/@types/index.ts

@@ -1,9 +1,5 @@
 import { Rule, AtRule } from 'postcss';
 
-export interface ObjectWithProps<T> {
-    [key: string]: T;
-}
-
 export enum Mode {
     combined = 'combined',
     override = 'override'

src/data/initial-values.json

@@ -0,0 +1,96 @@
+{
+    "0": [
+        "border-bottom-right-radius",
+        "border-bottom-left-radius",
+        "border-end-end-radius",
+        "border-end-start-radius",
+        "border-start-end-radius",
+        "border-start-start-radius",
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "margin-block-end",
+        "margin-block-start",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left",
+        "margin-inline-end",
+        "margin-inline-start",
+        "padding-block-end",
+        "padding-block-start",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left",
+        "padding-inline-end",
+        "padding-inline-start",
+        "scroll-margin-block-end",
+        "scroll-margin-block-start",
+        "scroll-margin-top",
+        "scroll-margin-right",
+        "scroll-margin-bottom",
+        "scroll-margin-left",
+        "scroll-margin-inline-end",
+        "scroll-margin-inline-start"
+    ],
+    "auto": [
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "grid-column-end",
+        "grid-column-start",
+        "grid-row-end",
+        "grid-row-start",
+        "inset-block-end",
+        "inset-block-start",
+        "inset-inline-end",
+        "inset-inline-start",
+        "scroll-padding-block-end",
+        "scroll-padding-block-start",
+        "scroll-padding-top",
+        "scroll-padding-right",
+        "scroll-padding-bottom",
+        "scroll-padding-left",
+        "scroll-padding-inline-end",
+        "scroll-padding-inline-start"
+    ],
+    "currentcolor": [
+        "border-block-start-color",
+        "border-block-end-color",
+        "border-top-color",
+        "border-right-color",
+        "border-bottom-color",
+        "border-left-color",
+        "border-inline-start-color",
+        "border-inline-end-color"
+    ],
+    "medium": [
+        "border-block-start-width",
+        "border-block-end-width",
+        "border-top-width",
+        "border-right-width",
+        "border-bottom-width",
+        "border-left-width",
+        "border-inline-start-width",
+        "border-inline-end-width"
+    ],
+    "none": [
+        "border-block-start",
+        "border-block-end",
+        "border-top",
+        "border-right",
+        "border-bottom",
+        "border-left",
+        "border-top-style",
+        "border-right-style",
+        "border-bottom-style",
+        "border-left-style",
+        "border-block-start-style",
+        "border-block-end-style",
+        "border-inline-start",
+        "border-inline-end",
+        "border-inline-start-style",
+        "border-inline-end-style"
+    ]
+}

src/parsers/atrules.ts

@@ -1,6 +1,6 @@
 import postcss, { Root, Node, AtRule, Comment } from 'postcss';
 import rtlcss from 'rtlcss';
-import { AtRulesObject, AtRulesStringMap, Source, ControlDirective, ObjectWithProps } from '@types';
+import { AtRulesObject, AtRulesStringMap, Source, ControlDirective } from '@types';
 import { AT_RULE_TYPE, RULE_TYPE, KEYFRAMES_NAME, CONTROL_DIRECTIVE } from '@constants';
 import { store, initKeyframesData } from '@data/store';
 import { walkContainer } from '@utilities/containers';
@@ -23,7 +23,7 @@ export const getKeyFramesRegExp = (stringMap: AtRulesStringMap): RegExp => new R
 
 export const parseAtRules = (css: Root): void => {
 
-    const controlDirectives: ObjectWithProps<ControlDirective> = {};
+    const controlDirectives: Record<string, ControlDirective> = {};
 
     walkContainer(
         css,
@@ -64,7 +64,7 @@ export const parseKeyFrames = (css: Root): void => {
         return;
     }
 
-    const controlDirectives: ObjectWithProps<ControlDirective> = {};
+    const controlDirectives: Record<string, ControlDirective> = {};
 
     walkContainer(
         css,

src/parsers/declarations.ts

@@ -1,6 +1,6 @@
 import postcss, { Rule, Node, Declaration, Comment } from 'postcss';
 import rtlcss from 'rtlcss';
-import { Source, Mode, Autorename, ObjectWithProps, ControlDirective } from '@types';
+import { Source, Mode, Autorename, ControlDirective } from '@types';
 import {
     DECLARATION_TYPE,
     FLIP_PROPERTY_REGEXP,
@@ -11,7 +11,7 @@ import {
 import { store } from '@data/store';
 import { addSelectorPrefixes } from '@utilities/selectors';
 import { isIgnoreDirectiveInsideAnIgnoreBlock, checkDirective } from '@utilities/directives';
-import { declarations, allDeclarations, appendDeclarationToRule, hasIgnoreDirectiveInRaws } from '@utilities/declarations';
+import { declarations, allDeclarations, initialValues, appendDeclarationToRule, hasIgnoreDirectiveInRaws } from '@utilities/declarations';
 import { walkContainer } from '@utilities/containers';
 import { cleanRuleRawsBefore } from '@utilities/rules';
 import { vendor } from '@utilities/vendor';
@@ -39,7 +39,7 @@ export const parseDeclarations = (rule: Rule, autorenamed = false): void => {
     const ruleBoth = ruleFlipped.clone();
     const ruleSafe = ruleFlipped.clone();
 
-    const declarationHashMap = Array.prototype.reduce.call(rule.nodes, (obj: ObjectWithProps<string>, node: Node): Record<string, string> => {
+    const declarationHashMap = Array.prototype.reduce.call(rule.nodes, (obj: Record<string, string>, node: Node): Record<string, string> => {
         if (node.type === DECLARATION_TYPE) {
             const decl = node as Declaration;
             obj[decl.prop] = decl.value.trim();
@@ -50,7 +50,7 @@ export const parseDeclarations = (rule: Rule, autorenamed = false): void => {
     const declarationsProps: string[] = [];
     let simetricRules = false;
 
-    const controlDirectives: ObjectWithProps<ControlDirective> = {};
+    const controlDirectives: Record<string, ControlDirective> = {};
 
     walkContainer(
         rule,
@@ -201,7 +201,8 @@ export const parseDeclarations = (rule: Rule, autorenamed = false): void => {
                 } else {
                     if (FLIP_PROPERTY_REGEXP.test(decl.prop) && !declarationHashMap[declFlipped.prop]) {
                         const declClone = decl.clone();
-                        declClone.value = 'unset';
+                        /* istanbul ignore next */
+                        declClone.value = initialValues[decl.prop] || 'unset';
                         ruleFlipped.append(declClone);
                     }
                     if (isConflictedDeclaration && !hasIgnoreDirectiveInRaws(decl)) {

src/parsers/rules.ts

@@ -1,5 +1,5 @@
 import postcss, { Container, Node, Rule, Comment } from 'postcss';
-import { ObjectWithProps, ControlDirective, Source } from '@types';
+import { ControlDirective, Source } from '@types';
 import { RULE_TYPE, CONTROL_DIRECTIVE } from '@constants';
 import { store } from '@data/store';
 import { isIgnoreDirectiveInsideAnIgnoreBlock, checkDirective } from '@utilities/directives';
@@ -10,7 +10,7 @@ import { parseDeclarations } from './declarations';
 
 export const parseRules = (container: Container): void => {
 
-    const controlDirectives: ObjectWithProps<ControlDirective> = {};
+    const controlDirectives: Record<string, ControlDirective> = {};
     const { source, ltrPrefix, rtlPrefix } = store.options;
 
     walkContainer(

src/utilities/declarations.ts

@@ -1,13 +1,16 @@
 import { Rule, Declaration } from 'postcss';
-import { ObjectWithProps, DeclarationsData } from '@types';
+import { DeclarationsData } from '@types';
 import { COMMENT_TYPE, RTL_COMMENT_IGNORE_REGEXP } from '@constants';
 import shorthandDeclarationsJson from '@data/shorthand-declarations.json';
 import notShorthandDeclarationsJson from '@data/not-shorthand-declarations.json';
+import initialValuesJson from '@data/initial-values.json';
 
 const declarationsData: DeclarationsData = shorthandDeclarationsJson;
 const notShorthandDeclarationsArray: string[] = notShorthandDeclarationsJson;
-const declarations: ObjectWithProps<string[]> = {};
-const allDeclarations: ObjectWithProps<string[]> = {};
+const initialValuesData: Record<string, string[]> = initialValuesJson;
+const declarations: Record<string, string[]> = {};
+const allDeclarations: Record<string, string[]> = {};
+const initialValues: Record<string, string> = {};
 
 const getOverrideTree = (prop: string): string[] => {
     const overridenProp = declarationsData[prop].overridden;
@@ -29,6 +32,12 @@ notShorthandDeclarationsArray.forEach((declaration: string): void => {
     allDeclarations[declaration] = [];
 });
 
+Object.keys(initialValuesData).forEach((value: string): void => {
+    initialValuesData[value].forEach((prop: string): void => {
+        initialValues[prop] = value;
+    });
+});
+
 const appendDeclarationToRule = (decl: Declaration, rule: Rule): void => {
     const declClone = decl.clone();
     const declPrev = decl.prev();
@@ -52,6 +61,7 @@ const hasIgnoreDirectiveInRaws = (decl: Declaration): boolean => {
 export {
     declarations,
     allDeclarations,
+    initialValues,
     appendDeclarationToRule,
     hasIgnoreDirectiveInRaws
 };

src/utilities/directives.ts

@@ -1,5 +1,5 @@
 import { Comment } from 'postcss';
-import { ObjectWithProps, ControlDirective } from '@types';
+import { ControlDirective } from '@types';
 import { RTL_CONTROL_DIRECTIVE_REG_EXP, CONTROL_DIRECTIVE, CONTROL_DIRECTIVE_BLOCK } from '@constants';
 
 const CONTROL_DIRECTIVE_VALUES = Object.values(CONTROL_DIRECTIVE) as string[];
@@ -32,15 +32,15 @@ export const getControlDirective = (comment: Comment): ControlDirective | null =
 
 export const isIgnoreDirectiveInsideAnIgnoreBlock = (
     controlDirective: ControlDirective,
-    controlDirectives: ObjectWithProps<ControlDirective>
+    controlDirectives: Record<string, ControlDirective>
 ): boolean => (
     controlDirective.directive === CONTROL_DIRECTIVE.IGNORE &&
     !controlDirective.block &&
     controlDirectives[CONTROL_DIRECTIVE.IGNORE] &&
     controlDirectives[CONTROL_DIRECTIVE.IGNORE].block === CONTROL_DIRECTIVE_BLOCK.BEGIN
 );
 
-export const checkDirective = (controlDirectives: ObjectWithProps<ControlDirective>, directiveType: string): boolean => {
+export const checkDirective = (controlDirectives: Record<string, ControlDirective>, directiveType: string): boolean => {
 
     const directive = controlDirectives[directiveType];
 

src/utilities/rules.ts

@@ -1,5 +1,5 @@
 import { Rule, AtRule, Node, Declaration } from 'postcss';
-import { ObjectWithProps, StringMap, Autorename } from '@types';
+import { StringMap, Autorename } from '@types';
 import { COMMENT_TYPE, RTL_COMMENT_REGEXP, DECLARATION_TYPE, RULE_TYPE } from '@constants';
 import { store } from '@data/store';
 
@@ -56,7 +56,7 @@ export const appendAutorenameRules = (): void => {
         return;
     }
 
-    const replaceHash: ObjectWithProps<string> = store.options.stringMap.reduce((hash: ObjectWithProps<string>, map: StringMap): ObjectWithProps<string> => {
+    const replaceHash: Record<string, string> = store.options.stringMap.reduce((hash: Record<string, string>, map: StringMap): Record<string, string> => {
         const search = typeof map.search === 'string' ? [map.search] : map.search;
         const replace = typeof map.replace === 'string' ? [map.replace] : map.replace;
         search.forEach((s: string, index: number): void => {
@@ -71,7 +71,7 @@ export const appendAutorenameRules = (): void => {
         ? new RegExp(`(${replaces})`, 'g')
         : new RegExp(`\\b(${replaces})\\b`, 'g');
 
-    const rulesHash: ObjectWithProps<boolean> = {};
+    const rulesHash: Record<string, boolean> = {};
     const rulesToProcess: Rule[] = [];
 
     store.rulesAutoRename.forEach((rule: Rule): void => {