diff --git a/package.json b/package.json
index 7632da6a..fe6526cd 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@types/eslint": "^8.56.6",
     "@types/jest": "^29.5.12",
+    "@types/jest-specific-snapshot": "^0.5.9",
     "@types/node": "^20.12.2",
     "@types/rtlcss": "^3.5.4",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
@@ -79,6 +80,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-jest": "^27.9.0",
     "jest": "^29.7.0",
+    "jest-specific-snapshot": "^8.0.0",
     "postcss": "^8.4.26",
     "replace-in-file": "^7.1.0",
     "rimraf": "^5.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b290814..c041aab1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,9 @@ devDependencies:
   '@types/jest':
     specifier: ^29.5.12
     version: 29.5.12
+  '@types/jest-specific-snapshot':
+    specifier: ^0.5.9
+    version: 0.5.9
   '@types/node':
     specifier: ^20.12.2
     version: 20.12.2
@@ -43,6 +46,9 @@ devDependencies:
   jest:
     specifier: ^29.7.0
     version: 29.7.0(@types/node@20.12.2)
+  jest-specific-snapshot:
+    specifier: ^8.0.0
+    version: 8.0.0(jest@29.7.0)
   postcss:
     specifier: ^8.4.26
     version: 8.4.38
@@ -1022,6 +1028,12 @@ packages:
       '@types/istanbul-lib-report': 3.0.3
     dev: true
 
+  /@types/jest-specific-snapshot@0.5.9:
+    resolution: {integrity: sha512-NPcItjVhJq3x6MWR6QNi92n5orOkcTvuQ0E8nqK2WZN18a7O93D2dcNL0x+eSNxmNSIbgfgCJ5eUScjACPCWsg==}
+    dependencies:
+      '@types/jest': 29.5.12
+    dev: true
+
   /@types/jest@29.5.12:
     resolution: {integrity: sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==}
     dependencies:
@@ -2661,6 +2673,17 @@ packages:
       - supports-color
     dev: true
 
+  /jest-specific-snapshot@8.0.0(jest@29.7.0):
+    resolution: {integrity: sha512-PjK0cqPbN3ZGU1pdP78YBEFMsS1AsV28hIHg249E0v/bTtGAJqDm7lNDLj0Cs0O26P2sulbXbgEQU9xLm34WmA==}
+    peerDependencies:
+      jest: '>= 29.0.0'
+    dependencies:
+      jest: 29.7.0(@types/node@20.12.2)
+      jest-snapshot: 29.7.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /jest-util@29.7.0:
     resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
diff --git a/tests/__snapshots__/aliases-variables/combined/aliases-default.snapshot b/tests/__snapshots__/aliases-variables/combined/aliases-default.snapshot
new file mode 100644
index 00000000..c4f2eb0b
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/combined/aliases-default.snapshot
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Variables Tests: aliases default 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+}
+
+[dir="ltr"] .test1.large {
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+[dir="ltr"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+[dir="ltr"] .test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/combined/aliases-map.snapshot b/tests/__snapshots__/aliases-variables/combined/aliases-map.snapshot
new file mode 100644
index 00000000..b2b17da7
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/combined/aliases-map.snapshot
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Variables Tests: aliases map 1`] = `
+":root {
+    --custom-margin: 2px;
+}
+
+[dir="ltr"]:root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+[dir="rtl"]:root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+}
+
+[dir="ltr"] .test1.large {
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+[dir="ltr"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+[dir="ltr"] .test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/combined/process-env-false.snapshot b/tests/__snapshots__/aliases-variables/combined/process-env-false.snapshot
new file mode 100644
index 00000000..ed5ac443
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/combined/process-env-false.snapshot
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Variables Tests: processEnv = false 1`] = `
+":root {
+    --custom-margin: 2px;
+}
+
+[dir="ltr"]:root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+[dir="rtl"]:root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+}
+
+[dir="ltr"] .test1.large {
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+[dir="ltr"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-left, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-right, 20px);
+}
+
+[dir="ltr"] .test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-right, 10px);
+    margin-right: env(safe-area-inset-left, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/combined/process-env-true.snapshot b/tests/__snapshots__/aliases-variables/combined/process-env-true.snapshot
new file mode 100644
index 00000000..77e761e0
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/combined/process-env-true.snapshot
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Variables Tests: processEnv = true 1`] = `
+":root {
+    --custom-margin: 2px;
+}
+
+[dir="ltr"]:root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+[dir="rtl"]:root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+}
+
+[dir="ltr"] .test1.large {
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+[dir="ltr"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+[dir="ltr"] .test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/combined/wrong-aliases.snapshot b/tests/__snapshots__/aliases-variables/combined/wrong-aliases.snapshot
new file mode 100644
index 00000000..de5baf0d
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/combined/wrong-aliases.snapshot
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Variables Tests: wrong aliases 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+}
+
+[dir="ltr"] .test1.large {
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+[dir="ltr"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+[dir="ltr"] .test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/diff/aliases-default.snapshot b/tests/__snapshots__/aliases-variables/diff/aliases-default.snapshot
new file mode 100644
index 00000000..fbbcf342
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/diff/aliases-default.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Variables Tests: aliases default 1`] = `
+".test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+.test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/diff/aliases-map.snapshot b/tests/__snapshots__/aliases-variables/diff/aliases-map.snapshot
new file mode 100644
index 00000000..f553155a
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/diff/aliases-map.snapshot
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Variables Tests: aliases map 1`] = `
+":root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+.test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/diff/process-env-false.snapshot b/tests/__snapshots__/aliases-variables/diff/process-env-false.snapshot
new file mode 100644
index 00000000..aec7bb93
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/diff/process-env-false.snapshot
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Variables Tests: processEnv = false 1`] = `
+":root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-left, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-right, 20px);
+}
+
+.test4 {
+    margin-left: env(safe-area-inset-right, 10px);
+    margin-right: env(safe-area-inset-left, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/diff/process-env-true.snapshot b/tests/__snapshots__/aliases-variables/diff/process-env-true.snapshot
new file mode 100644
index 00000000..6cc01079
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/diff/process-env-true.snapshot
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Variables Tests: processEnv = true 1`] = `
+":root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+.test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/diff/wrong-aliases.snapshot b/tests/__snapshots__/aliases-variables/diff/wrong-aliases.snapshot
new file mode 100644
index 00000000..83eb6a45
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/diff/wrong-aliases.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Variables Tests: wrong aliases 1`] = `
+".test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+.test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/override/aliases-default.snapshot b/tests/__snapshots__/aliases-variables/override/aliases-default.snapshot
new file mode 100644
index 00000000..ab7d2acb
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/override/aliases-default.snapshot
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Variables Tests: aliases default 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+.test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/override/aliases-map.snapshot b/tests/__snapshots__/aliases-variables/override/aliases-map.snapshot
new file mode 100644
index 00000000..1e00502b
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/override/aliases-map.snapshot
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Variables Tests: aliases map 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+[dir="rtl"]:root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+.test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/override/process-env-false.snapshot b/tests/__snapshots__/aliases-variables/override/process-env-false.snapshot
new file mode 100644
index 00000000..81ce5699
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/override/process-env-false.snapshot
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Variables Tests: processEnv = false 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+[dir="rtl"]:root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-left, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-right, 20px);
+}
+
+.test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-right, 10px);
+    margin-right: env(safe-area-inset-left, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/override/process-env-true.snapshot b/tests/__snapshots__/aliases-variables/override/process-env-true.snapshot
new file mode 100644
index 00000000..c2ab1988
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/override/process-env-true.snapshot
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Variables Tests: processEnv = true 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+[dir="rtl"]:root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+.test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/aliases-variables/override/wrong-aliases.snapshot b/tests/__snapshots__/aliases-variables/override/wrong-aliases.snapshot
new file mode 100644
index 00000000..7ae556ed
--- /dev/null
+++ b/tests/__snapshots__/aliases-variables/override/wrong-aliases.snapshot
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Variables Tests: wrong aliases 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+    left: 10px;
+}
+
+[dir="rtl"] .test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}
+
+.test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 20px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 40px)
+    ;
+}
+
+[dir="rtl"] .test3 {
+    padding:
+        env(safe-area-inset-top, 10px)
+        env(safe-area-inset-right, 40px)
+        env(safe-area-inset-bottom, 30px)
+        env(safe-area-inset-left, 20px);
+}
+
+.test4 {
+    margin-right: env(safe-area-inset-right, 10px);
+    margin-left: env(safe-area-inset-left, 20px);
+}
+
+[dir="rtl"] .test4 {
+    margin-left: env(safe-area-inset-left, 10px);
+    margin-right: env(safe-area-inset-right, 20px);
+}"
+`;
diff --git a/tests/__snapshots__/basic-options.test.ts.snap b/tests/__snapshots__/basic-options.test.ts.snap
deleted file mode 100644
index f9c6fba5..00000000
--- a/tests/__snapshots__/basic-options.test.ts.snap
+++ /dev/null
@@ -1,9098 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] Basic Options Tests:  {processKeyFrames: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    animation: 5s flip-ltr 1s ease-in-out,
-               3s my-animation-ltr 6s ease-in-out;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    animation: 5s flip-rtl 1s ease-in-out,
-               3s my-animation-rtl 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip-ltr {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@keyframes flip-rtl {
-    from {
-        transform: translateX(-100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-timing-function: ease-in-out;
-}
-
-[dir="ltr"] .test19 {
-    animation-name: my-animation-ltr;
-}
-
-[dir="rtl"] .test19 {
-    animation-name: my-animation-rtl;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-timing-function: ease;
-}
-
-[dir="ltr"] .test20 {
-    animation-name: my-animation-ltr, no-flip;
-}
-
-[dir="rtl"] .test20 {
-    animation-name: my-animation-rtl, no-flip;
-}
-
-@keyframes my-animation-ltr {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-@keyframes my-animation-rtl {
-    from {
-        right: 0%;
-    }
-
-    to {
-        right: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip-ltr {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes normalFlip-rtl {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-[dir="ltr"] .test44 {
-    animation: 5s normalFlip-ltr 1s ease-in-out;
-}
-
-[dir="rtl"] .test44 {
-    animation: 5s normalFlip-rtl 1s ease-in-out;
-}
-
-@keyframes inversedFlip-rtl {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes inversedFlip-ltr {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-[dir="ltr"] .test45 {
-    animation: 5s inversedFlip-ltr 1s ease-in-out;
-}
-
-[dir="rtl"] .test45 {
-    animation: 5s inversedFlip-rtl 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] Basic Options Tests:  {processUrls: true} 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir="ltr"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="ltr"] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] Basic Options Tests:  {source: rtl, processKeyFrames: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: ltr;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir="rtl"] .test18 {
-    animation: 5s flip-rtl 1s ease-in-out,
-               3s my-animation-rtl 6s ease-in-out;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    animation: 5s flip-ltr 1s ease-in-out,
-               3s my-animation-ltr 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: 10px;
-}
-
-[dir="ltr"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip-rtl {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@keyframes flip-ltr {
-    from {
-        transform: translateX(-100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-timing-function: ease-in-out;
-}
-
-[dir="rtl"] .test19 {
-    animation-name: my-animation-rtl;
-}
-
-[dir="ltr"] .test19 {
-    animation-name: my-animation-ltr;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-timing-function: ease;
-}
-
-[dir="rtl"] .test20 {
-    animation-name: my-animation-rtl, no-flip;
-}
-
-[dir="ltr"] .test20 {
-    animation-name: my-animation-ltr, no-flip;
-}
-
-@keyframes my-animation-rtl {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-@keyframes my-animation-ltr {
-    from {
-        right: 0%;
-    }
-
-    to {
-        right: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="rtl"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test33 {
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip-ltr {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes normalFlip-rtl {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-[dir="rtl"] .test44 {
-    animation: 5s normalFlip-rtl 1s ease-in-out;
-}
-
-[dir="ltr"] .test44 {
-    animation: 5s normalFlip-ltr 1s ease-in-out;
-}
-
-@keyframes inversedFlip-rtl {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes inversedFlip-ltr {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-[dir="rtl"] .test45 {
-    animation: 5s inversedFlip-rtl 1s ease-in-out;
-}
-
-[dir="ltr"] .test45 {
-    animation: 5s inversedFlip-ltr 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="rtl"] .test50 {
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    right: 10px;
-}
-
-[dir="rtl"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] Basic Options Tests:  {source: rtl} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: ltr;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: 10px;
-}
-
-[dir="ltr"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="rtl"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test33 {
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="rtl"] .test50 {
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    right: 10px;
-}
-
-[dir="rtl"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] Basic Options Tests:  {useCalc: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-    transform-origin: calc(100% - 10px) 20px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] Basic Options Tests:  Basic 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: diff]] Basic Options Tests:  {processKeyFrames: true} 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    animation: 5s flip-rtl 1s ease-in-out,
-               3s my-animation-rtl 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip-rtl {
-    from {
-        transform: translateX(-100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-name: my-animation-rtl;
-}
-
-.test20 {
-    animation-name: my-animation-rtl, no-flip;
-}
-
-@keyframes my-animation-rtl {
-    from {
-        right: 0%;
-    }
-
-    to {
-        right: 100%;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip-rtl {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip-rtl 1s ease-in-out;
-}
-
-@keyframes inversedFlip-ltr {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip-ltr 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] Basic Options Tests:  {processUrls: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] Basic Options Tests:  {source: rtl, processKeyFrames: true} 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    animation: 5s flip-ltr 1s ease-in-out,
-               3s my-animation-ltr 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip-ltr {
-    from {
-        transform: translateX(-100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-name: my-animation-ltr;
-}
-
-.test20 {
-    animation-name: my-animation-ltr, no-flip;
-}
-
-@keyframes my-animation-ltr {
-    from {
-        right: 0%;
-    }
-
-    to {
-        right: 100%;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip-rtl {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip-rtl 1s ease-in-out;
-}
-
-@keyframes inversedFlip-ltr {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip-ltr 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] Basic Options Tests:  {source: rtl} 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] Basic Options Tests:  {useCalc: true} 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-    transform-origin: calc(100% - 10px) 20px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] Basic Options Tests:  Basic 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: override]] Basic Options Tests:  {processKeyFrames: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip-ltr 1s ease-in-out,
-               3s my-animation-ltr 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    animation: 5s flip-rtl 1s ease-in-out,
-               3s my-animation-rtl 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip-ltr {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@keyframes flip-rtl {
-    from {
-        transform: translateX(-100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation-ltr;
-    animation-timing-function: ease-in-out;
-}
-
-[dir="rtl"] .test19 {
-    animation-name: my-animation-rtl;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation-ltr, no-flip;
-    animation-timing-function: ease;
-}
-
-[dir="rtl"] .test20 {
-    animation-name: my-animation-rtl, no-flip;
-}
-
-@keyframes my-animation-ltr {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-@keyframes my-animation-rtl {
-    from {
-        right: 0%;
-    }
-
-    to {
-        right: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip-ltr {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes normalFlip-rtl {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip-ltr 1s ease-in-out;
-}
-
-[dir="rtl"] .test44 {
-    animation: 5s normalFlip-rtl 1s ease-in-out;
-}
-
-@keyframes inversedFlip-rtl {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes inversedFlip-ltr {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip-rtl 1s ease-in-out;
-}
-
-[dir="ltr"] .test45 {
-    animation: 5s inversedFlip-ltr 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] Basic Options Tests:  {processUrls: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] Basic Options Tests:  {source: rtl, processKeyFrames: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip-rtl 1s ease-in-out,
-               3s my-animation-rtl 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    animation: 5s flip-ltr 1s ease-in-out,
-               3s my-animation-ltr 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip-rtl {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@keyframes flip-ltr {
-    from {
-        transform: translateX(-100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation-rtl;
-    animation-timing-function: ease-in-out;
-}
-
-[dir="ltr"] .test19 {
-    animation-name: my-animation-ltr;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation-rtl, no-flip;
-    animation-timing-function: ease;
-}
-
-[dir="ltr"] .test20 {
-    animation-name: my-animation-ltr, no-flip;
-}
-
-@keyframes my-animation-rtl {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-@keyframes my-animation-ltr {
-    from {
-        right: 0%;
-    }
-
-    to {
-        right: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip-ltr {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes normalFlip-rtl {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip-ltr 1s ease-in-out;
-}
-
-[dir="rtl"] .test44 {
-    animation: 5s normalFlip-rtl 1s ease-in-out;
-}
-
-@keyframes inversedFlip-rtl {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes inversedFlip-ltr {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip-rtl 1s ease-in-out;
-}
-
-[dir="ltr"] .test45 {
-    animation: 5s inversedFlip-ltr 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] Basic Options Tests:  {source: rtl} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] Basic Options Tests:  {useCalc: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-    transform-origin: calc(100% - 10px) 20px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] Basic Options Tests:  Basic 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
diff --git a/tests/__snapshots__/basic-options/combined/basic.snapshot b/tests/__snapshots__/basic-options/combined/basic.snapshot
new file mode 100644
index 00000000..403977d0
--- /dev/null
+++ b/tests/__snapshots__/basic-options/combined/basic.snapshot
@@ -0,0 +1,650 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Basic Options Tests:  Basic 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot
new file mode 100644
index 00000000..435f605c
--- /dev/null
+++ b/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot
@@ -0,0 +1,718 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Basic Options Tests:  {processKeyFrames: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    animation: 5s flip-ltr 1s ease-in-out,
+               3s my-animation-ltr 6s ease-in-out;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    animation: 5s flip-rtl 1s ease-in-out,
+               3s my-animation-rtl 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip-ltr {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes flip-rtl {
+    from {
+        transform: translateX(-100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-timing-function: ease-in-out;
+}
+
+[dir="ltr"] .test19 {
+    animation-name: my-animation-ltr;
+}
+
+[dir="rtl"] .test19 {
+    animation-name: my-animation-rtl;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-timing-function: ease;
+}
+
+[dir="ltr"] .test20 {
+    animation-name: my-animation-ltr, no-flip;
+}
+
+[dir="rtl"] .test20 {
+    animation-name: my-animation-rtl, no-flip;
+}
+
+@keyframes my-animation-ltr {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+@keyframes my-animation-rtl {
+    from {
+        right: 0%;
+    }
+
+    to {
+        right: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip-ltr {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes normalFlip-rtl {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+[dir="ltr"] .test44 {
+    animation: 5s normalFlip-ltr 1s ease-in-out;
+}
+
+[dir="rtl"] .test44 {
+    animation: 5s normalFlip-rtl 1s ease-in-out;
+}
+
+@keyframes inversedFlip-rtl {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes inversedFlip-ltr {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+[dir="ltr"] .test45 {
+    animation: 5s inversedFlip-ltr 1s ease-in-out;
+}
+
+[dir="rtl"] .test45 {
+    animation: 5s inversedFlip-rtl 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/combined/process-url-true.snapshot b/tests/__snapshots__/basic-options/combined/process-url-true.snapshot
new file mode 100644
index 00000000..14a6233a
--- /dev/null
+++ b/tests/__snapshots__/basic-options/combined/process-url-true.snapshot
@@ -0,0 +1,662 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Basic Options Tests:  {processUrls: true} 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir="ltr"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="ltr"] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot
new file mode 100644
index 00000000..a93e1244
--- /dev/null
+++ b/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot
@@ -0,0 +1,718 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Basic Options Tests:  {source: rtl, processKeyFrames: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: ltr;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir="rtl"] .test18 {
+    animation: 5s flip-rtl 1s ease-in-out,
+               3s my-animation-rtl 6s ease-in-out;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    animation: 5s flip-ltr 1s ease-in-out,
+               3s my-animation-ltr 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: 10px;
+}
+
+[dir="ltr"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip-rtl {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes flip-ltr {
+    from {
+        transform: translateX(-100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-timing-function: ease-in-out;
+}
+
+[dir="rtl"] .test19 {
+    animation-name: my-animation-rtl;
+}
+
+[dir="ltr"] .test19 {
+    animation-name: my-animation-ltr;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-timing-function: ease;
+}
+
+[dir="rtl"] .test20 {
+    animation-name: my-animation-rtl, no-flip;
+}
+
+[dir="ltr"] .test20 {
+    animation-name: my-animation-ltr, no-flip;
+}
+
+@keyframes my-animation-rtl {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+@keyframes my-animation-ltr {
+    from {
+        right: 0%;
+    }
+
+    to {
+        right: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="rtl"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test33 {
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip-ltr {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes normalFlip-rtl {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+[dir="rtl"] .test44 {
+    animation: 5s normalFlip-rtl 1s ease-in-out;
+}
+
+[dir="ltr"] .test44 {
+    animation: 5s normalFlip-ltr 1s ease-in-out;
+}
+
+@keyframes inversedFlip-rtl {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes inversedFlip-ltr {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+[dir="rtl"] .test45 {
+    animation: 5s inversedFlip-rtl 1s ease-in-out;
+}
+
+[dir="ltr"] .test45 {
+    animation: 5s inversedFlip-ltr 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="rtl"] .test50 {
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    right: 10px;
+}
+
+[dir="rtl"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/combined/source-rtl.snapshot b/tests/__snapshots__/basic-options/combined/source-rtl.snapshot
new file mode 100644
index 00000000..712213ef
--- /dev/null
+++ b/tests/__snapshots__/basic-options/combined/source-rtl.snapshot
@@ -0,0 +1,650 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Basic Options Tests:  {source: rtl} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: ltr;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: 10px;
+}
+
+[dir="ltr"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="rtl"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test33 {
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="rtl"] .test50 {
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    right: 10px;
+}
+
+[dir="rtl"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot b/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot
new file mode 100644
index 00000000..5d1d1a66
--- /dev/null
+++ b/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot
@@ -0,0 +1,651 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Basic Options Tests:  {useCalc: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+    transform-origin: calc(100% - 10px) 20px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/diff/basic.snapshot b/tests/__snapshots__/basic-options/diff/basic.snapshot
new file mode 100644
index 00000000..658befaf
--- /dev/null
+++ b/tests/__snapshots__/basic-options/diff/basic.snapshot
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Basic Options Tests:  Basic 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot
new file mode 100644
index 00000000..f77dbfe9
--- /dev/null
+++ b/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot
@@ -0,0 +1,261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Basic Options Tests:  {processKeyFrames: true} 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    animation: 5s flip-rtl 1s ease-in-out,
+               3s my-animation-rtl 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip-rtl {
+    from {
+        transform: translateX(-100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-name: my-animation-rtl;
+}
+
+.test20 {
+    animation-name: my-animation-rtl, no-flip;
+}
+
+@keyframes my-animation-rtl {
+    from {
+        right: 0%;
+    }
+
+    to {
+        right: 100%;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip-rtl {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip-rtl 1s ease-in-out;
+}
+
+@keyframes inversedFlip-ltr {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip-ltr 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/diff/process-url-true.snapshot b/tests/__snapshots__/basic-options/diff/process-url-true.snapshot
new file mode 100644
index 00000000..fcc048c0
--- /dev/null
+++ b/tests/__snapshots__/basic-options/diff/process-url-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Basic Options Tests:  {processUrls: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot
new file mode 100644
index 00000000..f8643118
--- /dev/null
+++ b/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot
@@ -0,0 +1,261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Basic Options Tests:  {source: rtl, processKeyFrames: true} 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    animation: 5s flip-ltr 1s ease-in-out,
+               3s my-animation-ltr 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip-ltr {
+    from {
+        transform: translateX(-100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-name: my-animation-ltr;
+}
+
+.test20 {
+    animation-name: my-animation-ltr, no-flip;
+}
+
+@keyframes my-animation-ltr {
+    from {
+        right: 0%;
+    }
+
+    to {
+        right: 100%;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip-rtl {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip-rtl 1s ease-in-out;
+}
+
+@keyframes inversedFlip-ltr {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip-ltr 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/diff/source-rtl.snapshot b/tests/__snapshots__/basic-options/diff/source-rtl.snapshot
new file mode 100644
index 00000000..625a5661
--- /dev/null
+++ b/tests/__snapshots__/basic-options/diff/source-rtl.snapshot
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Basic Options Tests:  {source: rtl} 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot b/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot
new file mode 100644
index 00000000..3698bcdf
--- /dev/null
+++ b/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot
@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Basic Options Tests:  {useCalc: true} 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+    transform-origin: calc(100% - 10px) 20px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/override/basic.snapshot b/tests/__snapshots__/basic-options/override/basic.snapshot
new file mode 100644
index 00000000..d5f257da
--- /dev/null
+++ b/tests/__snapshots__/basic-options/override/basic.snapshot
@@ -0,0 +1,602 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Basic Options Tests:  Basic 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot
new file mode 100644
index 00000000..383e6154
--- /dev/null
+++ b/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot
@@ -0,0 +1,664 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Basic Options Tests:  {processKeyFrames: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip-ltr 1s ease-in-out,
+               3s my-animation-ltr 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    animation: 5s flip-rtl 1s ease-in-out,
+               3s my-animation-rtl 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip-ltr {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes flip-rtl {
+    from {
+        transform: translateX(-100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation-ltr;
+    animation-timing-function: ease-in-out;
+}
+
+[dir="rtl"] .test19 {
+    animation-name: my-animation-rtl;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation-ltr, no-flip;
+    animation-timing-function: ease;
+}
+
+[dir="rtl"] .test20 {
+    animation-name: my-animation-rtl, no-flip;
+}
+
+@keyframes my-animation-ltr {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+@keyframes my-animation-rtl {
+    from {
+        right: 0%;
+    }
+
+    to {
+        right: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip-ltr {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes normalFlip-rtl {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip-ltr 1s ease-in-out;
+}
+
+[dir="rtl"] .test44 {
+    animation: 5s normalFlip-rtl 1s ease-in-out;
+}
+
+@keyframes inversedFlip-rtl {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes inversedFlip-ltr {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip-rtl 1s ease-in-out;
+}
+
+[dir="ltr"] .test45 {
+    animation: 5s inversedFlip-ltr 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/override/process-url-true.snapshot b/tests/__snapshots__/basic-options/override/process-url-true.snapshot
new file mode 100644
index 00000000..8b3d6903
--- /dev/null
+++ b/tests/__snapshots__/basic-options/override/process-url-true.snapshot
@@ -0,0 +1,614 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Basic Options Tests:  {processUrls: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot
new file mode 100644
index 00000000..657bb609
--- /dev/null
+++ b/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot
@@ -0,0 +1,658 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Basic Options Tests:  {source: rtl, processKeyFrames: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip-rtl 1s ease-in-out,
+               3s my-animation-rtl 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    animation: 5s flip-ltr 1s ease-in-out,
+               3s my-animation-ltr 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip-rtl {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes flip-ltr {
+    from {
+        transform: translateX(-100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation-rtl;
+    animation-timing-function: ease-in-out;
+}
+
+[dir="ltr"] .test19 {
+    animation-name: my-animation-ltr;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation-rtl, no-flip;
+    animation-timing-function: ease;
+}
+
+[dir="ltr"] .test20 {
+    animation-name: my-animation-ltr, no-flip;
+}
+
+@keyframes my-animation-rtl {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+@keyframes my-animation-ltr {
+    from {
+        right: 0%;
+    }
+
+    to {
+        right: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip-ltr {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes normalFlip-rtl {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip-ltr 1s ease-in-out;
+}
+
+[dir="rtl"] .test44 {
+    animation: 5s normalFlip-rtl 1s ease-in-out;
+}
+
+@keyframes inversedFlip-rtl {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes inversedFlip-ltr {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip-rtl 1s ease-in-out;
+}
+
+[dir="ltr"] .test45 {
+    animation: 5s inversedFlip-ltr 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/override/source-rtl.snapshot b/tests/__snapshots__/basic-options/override/source-rtl.snapshot
new file mode 100644
index 00000000..284530ea
--- /dev/null
+++ b/tests/__snapshots__/basic-options/override/source-rtl.snapshot
@@ -0,0 +1,596 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Basic Options Tests:  {source: rtl} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/basic-options/override/use-calc-true.snapshot b/tests/__snapshots__/basic-options/override/use-calc-true.snapshot
new file mode 100644
index 00000000..d1197091
--- /dev/null
+++ b/tests/__snapshots__/basic-options/override/use-calc-true.snapshot
@@ -0,0 +1,603 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Basic Options Tests:  {useCalc: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+    transform-origin: calc(100% - 10px) 20px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/empty-rules.test.ts.snap b/tests/__snapshots__/empty-rules.test.ts.snap
deleted file mode 100644
index 87c70312..00000000
--- a/tests/__snapshots__/empty-rules.test.ts.snap
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] Empty Rules Tests:  Basic 1`] = `
-".test1 {}
-
-.test2, .test3 {}
-
-[dir="ltr"] .test4 {
-    text-align: left;
-}
-
-[dir="rtl"] .test4 {
-    text-align: right;
-}
-
-.test5 {
-    color: red;
-}
-
-[dir="ltr"] .test5 {
-    padding-left: 20px;
-}
-
-[dir="rtl"] .test5 {
-    padding-right: 20px;
-}"
-`;
-
-exports[`[[Mode: diff]] Empty Rules Tests:  Basic 1`] = `
-".test4 {
-    text-align: right;
-}
-
-.test5 {
-    padding-left: 0;
-    padding-right: 20px;
-}"
-`;
-
-exports[`[[Mode: override]] Empty Rules Tests:  Basic 1`] = `
-".test1 {}
-
-.test2, .test3 {}
-
-.test4 {
-    text-align: left;
-}
-
-[dir="rtl"] .test4 {
-    text-align: right;
-}
-
-.test5 {
-    color: red;
-    padding-left: 20px;
-}
-
-[dir="rtl"] .test5 {
-    padding-left: 0;
-    padding-right: 20px;
-}"
-`;
diff --git a/tests/__snapshots__/empty-rules/combined/basic.snapshot b/tests/__snapshots__/empty-rules/combined/basic.snapshot
new file mode 100644
index 00000000..338c43ff
--- /dev/null
+++ b/tests/__snapshots__/empty-rules/combined/basic.snapshot
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Empty Rules Tests:  Basic 1`] = `
+".test1 {}
+
+.test2, .test3 {}
+
+[dir="ltr"] .test4 {
+    text-align: left;
+}
+
+[dir="rtl"] .test4 {
+    text-align: right;
+}
+
+.test5 {
+    color: red;
+}
+
+[dir="ltr"] .test5 {
+    padding-left: 20px;
+}
+
+[dir="rtl"] .test5 {
+    padding-right: 20px;
+}"
+`;
diff --git a/tests/__snapshots__/empty-rules/diff/basic.snapshot b/tests/__snapshots__/empty-rules/diff/basic.snapshot
new file mode 100644
index 00000000..b737e492
--- /dev/null
+++ b/tests/__snapshots__/empty-rules/diff/basic.snapshot
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Empty Rules Tests:  Basic 1`] = `
+".test4 {
+    text-align: right;
+}
+
+.test5 {
+    padding-left: 0;
+    padding-right: 20px;
+}"
+`;
diff --git a/tests/__snapshots__/empty-rules/override/basic.snapshot b/tests/__snapshots__/empty-rules/override/basic.snapshot
new file mode 100644
index 00000000..72037e4b
--- /dev/null
+++ b/tests/__snapshots__/empty-rules/override/basic.snapshot
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Empty Rules Tests:  Basic 1`] = `
+".test1 {}
+
+.test2, .test3 {}
+
+.test4 {
+    text-align: left;
+}
+
+[dir="rtl"] .test4 {
+    text-align: right;
+}
+
+.test5 {
+    color: red;
+    padding-left: 20px;
+}
+
+[dir="rtl"] .test5 {
+    padding-left: 0;
+    padding-right: 20px;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules.test.ts.snap b/tests/__snapshots__/nested-rules.test.ts.snap
deleted file mode 100644
index aa2f3e9b..00000000
--- a/tests/__snapshots__/nested-rules.test.ts.snap
+++ /dev/null
@@ -1,1861 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] Nested rules tests:  {source: ltr} 1`] = `
-".test1 {
-    color: red;
-
-    .test2 {
-        padding: 5px;
-        width: 100%;
-    }
-}
-
-[dir="ltr"] .test1 {
-    left: 10px;
-
-    .test2 {
-        text-align: left;
-    }
-}
-
-[dir="rtl"] .test1 {
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    &.test4 {
-        color: black;
-    }
-
-    &.test5 {
-        padding: 5px
-    }
-}
-
-[dir="ltr"] .test3 {
-    left: 10px;
-
-    &.test4 {
-        margin-left: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: left;
-        }
-    }
-}
-
-[dir="rtl"] .test3 {
-    right: 10px;
-
-    &.test4 {
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    display: flex;
-
-    .global & {
-        color: white;
-
-        div {
-            margin: 0 auto;
-        }
-    }
-
-    .test7 {
-        .global & {
-            background-color: #FFF;
-
-            ::after {
-                content: "";
-                display: block;
-            }
-        }
-    }
-}
-
-[dir="ltr"] .test6 {
-    .global & {
-        padding: 5px 10px 5px 5px;
-        border-left-color: #666;
-
-        div {
-            padding-left: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: left;
-            }
-        }
-    }
-}
-
-[dir="rtl"] .test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-right-color: #666;
-
-        div {
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        color: red;
-    }
-
-    [dir="ltr"] .test8 {
-        left: 10px;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test8 {
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        [dir="ltr"] .test9 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="rtl"] .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        [dir="ltr"] .test10 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="rtl"] .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test12 {
-        @media screen and (min-width: 800px) {
-            color: red;
-        }
-    }
-
-    .test13-left {
-        content: "\\f007";
-    }
-
-    .test13-right {
-        content: "\\f010";
-    }
-}
-
-[dir="ltr"] .test11 {
-    .test13 {
-        text-align: right;
-    }
-}
-
-[dir="rtl"] .test11 {
-    .test13 {
-        text-align: left;
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}
-
-.test14 {
-   @include padding;
-}"
-`;
-
-exports[`[[Mode: combined]] Nested rules tests:  {source: ltr} processRuleNames: true 1`] = `
-".test1 {
-    color: red;
-
-    .test2 {
-        padding: 5px;
-        width: 100%;
-    }
-}
-
-[dir="ltr"] .test1 {
-    left: 10px;
-
-    .test2 {
-        text-align: left;
-    }
-}
-
-[dir="rtl"] .test1 {
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    &.test4 {
-        color: black;
-    }
-
-    &.test5 {
-        padding: 5px
-    }
-}
-
-[dir="ltr"] .test3 {
-    left: 10px;
-
-    &.test4 {
-        margin-left: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: left;
-        }
-    }
-}
-
-[dir="rtl"] .test3 {
-    right: 10px;
-
-    &.test4 {
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    display: flex;
-
-    .global & {
-        color: white;
-
-        div {
-            margin: 0 auto;
-        }
-    }
-
-    .test7 {
-        .global & {
-            background-color: #FFF;
-
-            ::after {
-                content: "";
-                display: block;
-            }
-        }
-    }
-}
-
-[dir="ltr"] .test6 {
-    .global & {
-        padding: 5px 10px 5px 5px;
-        border-left-color: #666;
-
-        div {
-            padding-left: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: left;
-            }
-        }
-    }
-}
-
-[dir="rtl"] .test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-right-color: #666;
-
-        div {
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        color: red;
-    }
-
-    [dir="ltr"] .test8 {
-        left: 10px;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test8 {
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        [dir="ltr"] .test9 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="rtl"] .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        [dir="ltr"] .test10 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="rtl"] .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test12 {
-        @media screen and (min-width: 800px) {
-            color: red;
-        }
-    }
-}
-
-[dir="ltr"] .test11 {
-    .test13 {
-        text-align: right;
-    }
-
-    .test13-left {
-        content: "\\f007";
-    }
-
-    .test13-right {
-        content: "\\f010";
-    }
-}
-
-[dir="rtl"] .test11 {
-    .test13 {
-        text-align: left;
-    }
-
-    .test13-left {
-        content: "\\f010";
-    }
-
-    .test13-right {
-        content: "\\f007";
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}
-
-.test14 {
-   @include padding;
-}"
-`;
-
-exports[`[[Mode: combined]] Nested rules tests:  {source: rtl} 1`] = `
-".test1 {
-    color: red;
-
-    .test2 {
-        padding: 5px;
-        width: 100%;
-    }
-}
-
-[dir="rtl"] .test1 {
-    left: 10px;
-
-    .test2 {
-        text-align: left;
-    }
-}
-
-[dir="ltr"] .test1 {
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    &.test4 {
-        color: black;
-    }
-
-    &.test5 {
-        padding: 5px
-    }
-}
-
-[dir="rtl"] .test3 {
-    left: 10px;
-
-    &.test4 {
-        margin-left: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: left;
-        }
-    }
-}
-
-[dir="ltr"] .test3 {
-    right: 10px;
-
-    &.test4 {
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    display: flex;
-
-    .global & {
-        color: white;
-
-        div {
-            margin: 0 auto;
-        }
-    }
-
-    .test7 {
-        .global & {
-            background-color: #FFF;
-
-            ::after {
-                content: "";
-                display: block;
-            }
-        }
-    }
-}
-
-[dir="rtl"] .test6 {
-    .global & {
-        padding: 5px 10px 5px 5px;
-        border-left-color: #666;
-
-        div {
-            padding-left: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: left;
-            }
-        }
-    }
-}
-
-[dir="ltr"] .test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-right-color: #666;
-
-        div {
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        color: red;
-    }
-
-    [dir="rtl"] .test8 {
-        left: 10px;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test8 {
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        [dir="rtl"] .test9 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="ltr"] .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        [dir="rtl"] .test10 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="ltr"] .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test12 {
-        @media screen and (min-width: 800px) {
-            color: red;
-        }
-    }
-
-    .test13-left {
-        content: "\\f007";
-    }
-
-    .test13-right {
-        content: "\\f010";
-    }
-}
-
-[dir="rtl"] .test11 {
-    .test13 {
-        text-align: right;
-    }
-}
-
-[dir="ltr"] .test11 {
-    .test13 {
-        text-align: left;
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}
-
-.test14 {
-   @include padding;
-}"
-`;
-
-exports[`[[Mode: combined]] Nested rules tests:  {source: rtl} processRuleNames: true 1`] = `
-".test1 {
-    color: red;
-
-    .test2 {
-        padding: 5px;
-        width: 100%;
-    }
-}
-
-[dir="rtl"] .test1 {
-    left: 10px;
-
-    .test2 {
-        text-align: left;
-    }
-}
-
-[dir="ltr"] .test1 {
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    &.test4 {
-        color: black;
-    }
-
-    &.test5 {
-        padding: 5px
-    }
-}
-
-[dir="rtl"] .test3 {
-    left: 10px;
-
-    &.test4 {
-        margin-left: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: left;
-        }
-    }
-}
-
-[dir="ltr"] .test3 {
-    right: 10px;
-
-    &.test4 {
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    display: flex;
-
-    .global & {
-        color: white;
-
-        div {
-            margin: 0 auto;
-        }
-    }
-
-    .test7 {
-        .global & {
-            background-color: #FFF;
-
-            ::after {
-                content: "";
-                display: block;
-            }
-        }
-    }
-}
-
-[dir="rtl"] .test6 {
-    .global & {
-        padding: 5px 10px 5px 5px;
-        border-left-color: #666;
-
-        div {
-            padding-left: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: left;
-            }
-        }
-    }
-}
-
-[dir="ltr"] .test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-right-color: #666;
-
-        div {
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        color: red;
-    }
-
-    [dir="rtl"] .test8 {
-        left: 10px;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test8 {
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        [dir="rtl"] .test9 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="ltr"] .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        [dir="rtl"] .test10 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="ltr"] .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test12 {
-        @media screen and (min-width: 800px) {
-            color: red;
-        }
-    }
-}
-
-[dir="rtl"] .test11 {
-    .test13 {
-        text-align: right;
-    }
-
-    .test13-left {
-        content: "\\f007";
-    }
-
-    .test13-right {
-        content: "\\f010";
-    }
-}
-
-[dir="ltr"] .test11 {
-    .test13 {
-        text-align: left;
-    }
-
-    .test13-left {
-        content: "\\f010";
-    }
-
-    .test13-right {
-        content: "\\f007";
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}
-
-.test14 {
-   @include padding;
-}"
-`;
-
-exports[`[[Mode: diff]] Nested rules tests:  {source: ltr} 1`] = `
-".test1 {
-    left: auto;
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    left: auto;
-    right: 10px;
-
-    &.test4 {
-        margin-left: 0;
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-left-color: currentcolor;
-        border-right-color: #666;
-
-        div {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        left: auto;
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test13 {
-        text-align: left;
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}"
-`;
-
-exports[`[[Mode: diff]] Nested rules tests:  {source: ltr} processRuleNames: true 1`] = `
-".test1 {
-    left: auto;
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    left: auto;
-    right: 10px;
-
-    &.test4 {
-        margin-left: 0;
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-left-color: currentcolor;
-        border-right-color: #666;
-
-        div {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        left: auto;
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test13 {
-        text-align: left;
-    }
-
-    .test13-left {
-        content: "\\f010";
-    }
-
-    .test13-right {
-        content: "\\f007";
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}"
-`;
-
-exports[`[[Mode: diff]] Nested rules tests:  {source: rtl} 1`] = `
-".test1 {
-    left: auto;
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    left: auto;
-    right: 10px;
-
-    &.test4 {
-        margin-left: 0;
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-left-color: currentcolor;
-        border-right-color: #666;
-
-        div {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        left: auto;
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test13 {
-        text-align: left;
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}"
-`;
-
-exports[`[[Mode: diff]] Nested rules tests:  {source: rtl} processRuleNames: true 1`] = `
-".test1 {
-    left: auto;
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    left: auto;
-    right: 10px;
-
-    &.test4 {
-        margin-left: 0;
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-left-color: currentcolor;
-        border-right-color: #666;
-
-        div {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        left: auto;
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test13 {
-        text-align: left;
-    }
-
-    .test13-left {
-        content: "\\f010";
-    }
-
-    .test13-right {
-        content: "\\f007";
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}"
-`;
-
-exports[`[[Mode: override]] Nested rules tests:  {source: ltr} 1`] = `
-".test1 {
-    color: red;
-    left: 10px;
-
-    .test2 {
-        text-align: left;
-        padding: 5px;
-        width: 100%;
-    }
-}
-
-[dir="rtl"] .test1 {
-    left: auto;
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    left: 10px;
-
-    &.test4 {
-        color: black;
-        margin-left: 20px;
-    }
-
-    &.test5 {
-        padding: 5px;
-
-        span {
-            text-align: left;
-        }
-    }
-}
-
-[dir="rtl"] .test3 {
-    left: auto;
-    right: 10px;
-
-    &.test4 {
-        margin-left: 0;
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    display: flex;
-
-    .global & {
-        color: white;
-        padding: 5px 10px 5px 5px;
-        border-left-color: #666;
-
-        div {
-            margin: 0 auto;
-            padding-left: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            background-color: #FFF;
-
-            ::after {
-                content: "";
-                display: block;
-                text-align: left;
-            }
-        }
-    }
-}
-
-[dir="rtl"] .test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-left-color: currentcolor;
-        border-right-color: #666;
-
-        div {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        color: red;
-        left: 10px;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test8 {
-        left: auto;
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        .test9 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="rtl"] .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        .test10 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="rtl"] .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test12 {
-        @media screen and (min-width: 800px) {
-            color: red;
-        }
-    }
-
-    .test13 {
-        text-align: right;
-    }
-
-    .test13-left {
-        content: "\\f007";
-    }
-
-    .test13-right {
-        content: "\\f010";
-    }
-}
-
-[dir="rtl"] .test11 {
-    .test13 {
-        text-align: left;
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}
-
-.test14 {
-   @include padding;
-}"
-`;
-
-exports[`[[Mode: override]] Nested rules tests:  {source: ltr} processRuleNames: true 1`] = `
-".test1 {
-    color: red;
-    left: 10px;
-
-    .test2 {
-        text-align: left;
-        padding: 5px;
-        width: 100%;
-    }
-}
-
-[dir="rtl"] .test1 {
-    left: auto;
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    left: 10px;
-
-    &.test4 {
-        color: black;
-        margin-left: 20px;
-    }
-
-    &.test5 {
-        padding: 5px;
-
-        span {
-            text-align: left;
-        }
-    }
-}
-
-[dir="rtl"] .test3 {
-    left: auto;
-    right: 10px;
-
-    &.test4 {
-        margin-left: 0;
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    display: flex;
-
-    .global & {
-        color: white;
-        padding: 5px 10px 5px 5px;
-        border-left-color: #666;
-
-        div {
-            margin: 0 auto;
-            padding-left: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            background-color: #FFF;
-
-            ::after {
-                content: "";
-                display: block;
-                text-align: left;
-            }
-        }
-    }
-}
-
-[dir="rtl"] .test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-left-color: currentcolor;
-        border-right-color: #666;
-
-        div {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        color: red;
-        left: 10px;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test8 {
-        left: auto;
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        .test9 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="rtl"] .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        .test10 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="rtl"] .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test12 {
-        @media screen and (min-width: 800px) {
-            color: red;
-        }
-    }
-
-    .test13 {
-        text-align: right;
-    }
-
-    .test13-left {
-        content: "\\f007";
-    }
-
-    .test13-right {
-        content: "\\f010";
-    }
-}
-
-[dir="rtl"] .test11 {
-    .test13 {
-        text-align: left;
-    }
-
-    .test13-left {
-        content: "\\f010";
-    }
-
-    .test13-right {
-        content: "\\f007";
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}
-
-.test14 {
-   @include padding;
-}"
-`;
-
-exports[`[[Mode: override]] Nested rules tests:  {source: rtl} 1`] = `
-".test1 {
-    color: red;
-    left: 10px;
-
-    .test2 {
-        text-align: left;
-        padding: 5px;
-        width: 100%;
-    }
-}
-
-[dir="ltr"] .test1 {
-    left: auto;
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    left: 10px;
-
-    &.test4 {
-        color: black;
-        margin-left: 20px;
-    }
-
-    &.test5 {
-        padding: 5px;
-
-        span {
-            text-align: left;
-        }
-    }
-}
-
-[dir="ltr"] .test3 {
-    left: auto;
-    right: 10px;
-
-    &.test4 {
-        margin-left: 0;
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    display: flex;
-
-    .global & {
-        color: white;
-        padding: 5px 10px 5px 5px;
-        border-left-color: #666;
-
-        div {
-            margin: 0 auto;
-            padding-left: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            background-color: #FFF;
-
-            ::after {
-                content: "";
-                display: block;
-                text-align: left;
-            }
-        }
-    }
-}
-
-[dir="ltr"] .test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-left-color: currentcolor;
-        border-right-color: #666;
-
-        div {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        color: red;
-        left: 10px;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test8 {
-        left: auto;
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        .test9 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="ltr"] .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        .test10 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="ltr"] .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test12 {
-        @media screen and (min-width: 800px) {
-            color: red;
-        }
-    }
-
-    .test13 {
-        text-align: right;
-    }
-
-    .test13-left {
-        content: "\\f007";
-    }
-
-    .test13-right {
-        content: "\\f010";
-    }
-}
-
-[dir="ltr"] .test11 {
-    .test13 {
-        text-align: left;
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}
-
-.test14 {
-   @include padding;
-}"
-`;
-
-exports[`[[Mode: override]] Nested rules tests:  {source: rtl} processRuleNames: true 1`] = `
-".test1 {
-    color: red;
-    left: 10px;
-
-    .test2 {
-        text-align: left;
-        padding: 5px;
-        width: 100%;
-    }
-}
-
-[dir="ltr"] .test1 {
-    left: auto;
-    right: 10px;
-
-    .test2 {
-        text-align: right;
-    }
-}
-
-.test3 {
-    left: 10px;
-
-    &.test4 {
-        color: black;
-        margin-left: 20px;
-    }
-
-    &.test5 {
-        padding: 5px;
-
-        span {
-            text-align: left;
-        }
-    }
-}
-
-[dir="ltr"] .test3 {
-    left: auto;
-    right: 10px;
-
-    &.test4 {
-        margin-left: 0;
-        margin-right: 20px;
-    }
-
-    &.test5 {
-        span {
-            text-align: right;
-        }
-    }
-}
-
-.test6 {
-    display: flex;
-
-    .global & {
-        color: white;
-        padding: 5px 10px 5px 5px;
-        border-left-color: #666;
-
-        div {
-            margin: 0 auto;
-            padding-left: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            background-color: #FFF;
-
-            ::after {
-                content: "";
-                display: block;
-                text-align: left;
-            }
-        }
-    }
-}
-
-[dir="ltr"] .test6 {
-    .global & {
-        padding: 5px 5px 5px 10px;
-        border-left-color: currentcolor;
-        border-right-color: #666;
-
-        div {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-    }
-
-    .test7 {
-        .global & {
-            ::after {
-                text-align: right;
-            }
-        }
-    }
-}
-
-@supports (display: contents) and (display: grid) {
-    .test8 {
-        color: red;
-        left: 10px;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test8 {
-        left: auto;
-        right: 10px;
-        text-align: right;
-    }
-
-    @media screen and (max-width: 800px) {
-        .test9 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="ltr"] .test9 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-@media screen and (max-width: 800px) {
-    @supports (display: contents) and (display: grid) {
-        .test10 {
-            padding: 0 0.6em 0 1.7em;
-        }
-
-        [dir="ltr"] .test10 {
-            padding: 0 1.7em 0 0.6em;
-        }
-    }
-}
-
-.test11 {
-    .test12 {
-        @media screen and (min-width: 800px) {
-            color: red;
-        }
-    }
-
-    .test13 {
-        text-align: right;
-    }
-
-    .test13-left {
-        content: "\\f007";
-    }
-
-    .test13-right {
-        content: "\\f010";
-    }
-}
-
-[dir="ltr"] .test11 {
-    .test13 {
-        text-align: left;
-    }
-
-    .test13-left {
-        content: "\\f010";
-    }
-
-    .test13-right {
-        content: "\\f007";
-    }
-}
-
-@mixin padding {
-    padding-left: 10px;
-}
-
-.test14 {
-   @include padding;
-}"
-`;
diff --git a/tests/__snapshots__/nested-rules/combined/source-ltr-process-rule-names-true.snapshot b/tests/__snapshots__/nested-rules/combined/source-ltr-process-rule-names-true.snapshot
new file mode 100644
index 00000000..169eb588
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/combined/source-ltr-process-rule-names-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Nested rules tests:  {source: ltr} processRuleNames: true 1`] = `
+".test1 {
+    color: red;
+
+    .test2 {
+        padding: 5px;
+        width: 100%;
+    }
+}
+
+[dir="ltr"] .test1 {
+    left: 10px;
+
+    .test2 {
+        text-align: left;
+    }
+}
+
+[dir="rtl"] .test1 {
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    &.test4 {
+        color: black;
+    }
+
+    &.test5 {
+        padding: 5px
+    }
+}
+
+[dir="ltr"] .test3 {
+    left: 10px;
+
+    &.test4 {
+        margin-left: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: left;
+        }
+    }
+}
+
+[dir="rtl"] .test3 {
+    right: 10px;
+
+    &.test4 {
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    display: flex;
+
+    .global & {
+        color: white;
+
+        div {
+            margin: 0 auto;
+        }
+    }
+
+    .test7 {
+        .global & {
+            background-color: #FFF;
+
+            ::after {
+                content: "";
+                display: block;
+            }
+        }
+    }
+}
+
+[dir="ltr"] .test6 {
+    .global & {
+        padding: 5px 10px 5px 5px;
+        border-left-color: #666;
+
+        div {
+            padding-left: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: left;
+            }
+        }
+    }
+}
+
+[dir="rtl"] .test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-right-color: #666;
+
+        div {
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        color: red;
+    }
+
+    [dir="ltr"] .test8 {
+        left: 10px;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test8 {
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        [dir="ltr"] .test9 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="rtl"] .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        [dir="ltr"] .test10 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="rtl"] .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test12 {
+        @media screen and (min-width: 800px) {
+            color: red;
+        }
+    }
+}
+
+[dir="ltr"] .test11 {
+    .test13 {
+        text-align: right;
+    }
+
+    .test13-left {
+        content: "\\f007";
+    }
+
+    .test13-right {
+        content: "\\f010";
+    }
+}
+
+[dir="rtl"] .test11 {
+    .test13 {
+        text-align: left;
+    }
+
+    .test13-left {
+        content: "\\f010";
+    }
+
+    .test13-right {
+        content: "\\f007";
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}
+
+.test14 {
+   @include padding;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/combined/source-ltr.snapshot b/tests/__snapshots__/nested-rules/combined/source-ltr.snapshot
new file mode 100644
index 00000000..5f419e76
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/combined/source-ltr.snapshot
@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Nested rules tests:  {source: ltr} 1`] = `
+".test1 {
+    color: red;
+
+    .test2 {
+        padding: 5px;
+        width: 100%;
+    }
+}
+
+[dir="ltr"] .test1 {
+    left: 10px;
+
+    .test2 {
+        text-align: left;
+    }
+}
+
+[dir="rtl"] .test1 {
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    &.test4 {
+        color: black;
+    }
+
+    &.test5 {
+        padding: 5px
+    }
+}
+
+[dir="ltr"] .test3 {
+    left: 10px;
+
+    &.test4 {
+        margin-left: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: left;
+        }
+    }
+}
+
+[dir="rtl"] .test3 {
+    right: 10px;
+
+    &.test4 {
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    display: flex;
+
+    .global & {
+        color: white;
+
+        div {
+            margin: 0 auto;
+        }
+    }
+
+    .test7 {
+        .global & {
+            background-color: #FFF;
+
+            ::after {
+                content: "";
+                display: block;
+            }
+        }
+    }
+}
+
+[dir="ltr"] .test6 {
+    .global & {
+        padding: 5px 10px 5px 5px;
+        border-left-color: #666;
+
+        div {
+            padding-left: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: left;
+            }
+        }
+    }
+}
+
+[dir="rtl"] .test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-right-color: #666;
+
+        div {
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        color: red;
+    }
+
+    [dir="ltr"] .test8 {
+        left: 10px;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test8 {
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        [dir="ltr"] .test9 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="rtl"] .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        [dir="ltr"] .test10 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="rtl"] .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test12 {
+        @media screen and (min-width: 800px) {
+            color: red;
+        }
+    }
+
+    .test13-left {
+        content: "\\f007";
+    }
+
+    .test13-right {
+        content: "\\f010";
+    }
+}
+
+[dir="ltr"] .test11 {
+    .test13 {
+        text-align: right;
+    }
+}
+
+[dir="rtl"] .test11 {
+    .test13 {
+        text-align: left;
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}
+
+.test14 {
+   @include padding;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/combined/source-rtl-process-rule-names-true.snapshot b/tests/__snapshots__/nested-rules/combined/source-rtl-process-rule-names-true.snapshot
new file mode 100644
index 00000000..4d3c9cbe
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/combined/source-rtl-process-rule-names-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Nested rules tests:  {source: rtl} processRuleNames: true 1`] = `
+".test1 {
+    color: red;
+
+    .test2 {
+        padding: 5px;
+        width: 100%;
+    }
+}
+
+[dir="rtl"] .test1 {
+    left: 10px;
+
+    .test2 {
+        text-align: left;
+    }
+}
+
+[dir="ltr"] .test1 {
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    &.test4 {
+        color: black;
+    }
+
+    &.test5 {
+        padding: 5px
+    }
+}
+
+[dir="rtl"] .test3 {
+    left: 10px;
+
+    &.test4 {
+        margin-left: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: left;
+        }
+    }
+}
+
+[dir="ltr"] .test3 {
+    right: 10px;
+
+    &.test4 {
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    display: flex;
+
+    .global & {
+        color: white;
+
+        div {
+            margin: 0 auto;
+        }
+    }
+
+    .test7 {
+        .global & {
+            background-color: #FFF;
+
+            ::after {
+                content: "";
+                display: block;
+            }
+        }
+    }
+}
+
+[dir="rtl"] .test6 {
+    .global & {
+        padding: 5px 10px 5px 5px;
+        border-left-color: #666;
+
+        div {
+            padding-left: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: left;
+            }
+        }
+    }
+}
+
+[dir="ltr"] .test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-right-color: #666;
+
+        div {
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        color: red;
+    }
+
+    [dir="rtl"] .test8 {
+        left: 10px;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test8 {
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        [dir="rtl"] .test9 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="ltr"] .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        [dir="rtl"] .test10 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="ltr"] .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test12 {
+        @media screen and (min-width: 800px) {
+            color: red;
+        }
+    }
+}
+
+[dir="rtl"] .test11 {
+    .test13 {
+        text-align: right;
+    }
+
+    .test13-left {
+        content: "\\f007";
+    }
+
+    .test13-right {
+        content: "\\f010";
+    }
+}
+
+[dir="ltr"] .test11 {
+    .test13 {
+        text-align: left;
+    }
+
+    .test13-left {
+        content: "\\f010";
+    }
+
+    .test13-right {
+        content: "\\f007";
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}
+
+.test14 {
+   @include padding;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/combined/source-rtl.snapshot b/tests/__snapshots__/nested-rules/combined/source-rtl.snapshot
new file mode 100644
index 00000000..c2d8b786
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/combined/source-rtl.snapshot
@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Nested rules tests:  {source: rtl} 1`] = `
+".test1 {
+    color: red;
+
+    .test2 {
+        padding: 5px;
+        width: 100%;
+    }
+}
+
+[dir="rtl"] .test1 {
+    left: 10px;
+
+    .test2 {
+        text-align: left;
+    }
+}
+
+[dir="ltr"] .test1 {
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    &.test4 {
+        color: black;
+    }
+
+    &.test5 {
+        padding: 5px
+    }
+}
+
+[dir="rtl"] .test3 {
+    left: 10px;
+
+    &.test4 {
+        margin-left: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: left;
+        }
+    }
+}
+
+[dir="ltr"] .test3 {
+    right: 10px;
+
+    &.test4 {
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    display: flex;
+
+    .global & {
+        color: white;
+
+        div {
+            margin: 0 auto;
+        }
+    }
+
+    .test7 {
+        .global & {
+            background-color: #FFF;
+
+            ::after {
+                content: "";
+                display: block;
+            }
+        }
+    }
+}
+
+[dir="rtl"] .test6 {
+    .global & {
+        padding: 5px 10px 5px 5px;
+        border-left-color: #666;
+
+        div {
+            padding-left: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: left;
+            }
+        }
+    }
+}
+
+[dir="ltr"] .test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-right-color: #666;
+
+        div {
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        color: red;
+    }
+
+    [dir="rtl"] .test8 {
+        left: 10px;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test8 {
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        [dir="rtl"] .test9 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="ltr"] .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        [dir="rtl"] .test10 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="ltr"] .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test12 {
+        @media screen and (min-width: 800px) {
+            color: red;
+        }
+    }
+
+    .test13-left {
+        content: "\\f007";
+    }
+
+    .test13-right {
+        content: "\\f010";
+    }
+}
+
+[dir="rtl"] .test11 {
+    .test13 {
+        text-align: right;
+    }
+}
+
+[dir="ltr"] .test11 {
+    .test13 {
+        text-align: left;
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}
+
+.test14 {
+   @include padding;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/diff/source-ltr-process-rule-names-true.snapshot b/tests/__snapshots__/nested-rules/diff/source-ltr-process-rule-names-true.snapshot
new file mode 100644
index 00000000..3f3c23d3
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/diff/source-ltr-process-rule-names-true.snapshot
@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Nested rules tests:  {source: ltr} processRuleNames: true 1`] = `
+".test1 {
+    left: auto;
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    left: auto;
+    right: 10px;
+
+    &.test4 {
+        margin-left: 0;
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-left-color: currentcolor;
+        border-right-color: #666;
+
+        div {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        left: auto;
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test13 {
+        text-align: left;
+    }
+
+    .test13-left {
+        content: "\\f010";
+    }
+
+    .test13-right {
+        content: "\\f007";
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/diff/source-ltr.snapshot b/tests/__snapshots__/nested-rules/diff/source-ltr.snapshot
new file mode 100644
index 00000000..856443ba
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/diff/source-ltr.snapshot
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Nested rules tests:  {source: ltr} 1`] = `
+".test1 {
+    left: auto;
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    left: auto;
+    right: 10px;
+
+    &.test4 {
+        margin-left: 0;
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-left-color: currentcolor;
+        border-right-color: #666;
+
+        div {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        left: auto;
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test13 {
+        text-align: left;
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/diff/source-rtl-process-rule-names-true.snapshot b/tests/__snapshots__/nested-rules/diff/source-rtl-process-rule-names-true.snapshot
new file mode 100644
index 00000000..f56f4802
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/diff/source-rtl-process-rule-names-true.snapshot
@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Nested rules tests:  {source: rtl} processRuleNames: true 1`] = `
+".test1 {
+    left: auto;
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    left: auto;
+    right: 10px;
+
+    &.test4 {
+        margin-left: 0;
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-left-color: currentcolor;
+        border-right-color: #666;
+
+        div {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        left: auto;
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test13 {
+        text-align: left;
+    }
+
+    .test13-left {
+        content: "\\f010";
+    }
+
+    .test13-right {
+        content: "\\f007";
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/diff/source-rtl.snapshot b/tests/__snapshots__/nested-rules/diff/source-rtl.snapshot
new file mode 100644
index 00000000..51432798
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/diff/source-rtl.snapshot
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Nested rules tests:  {source: rtl} 1`] = `
+".test1 {
+    left: auto;
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    left: auto;
+    right: 10px;
+
+    &.test4 {
+        margin-left: 0;
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-left-color: currentcolor;
+        border-right-color: #666;
+
+        div {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        left: auto;
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test13 {
+        text-align: left;
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/override/source-ltr-process-rule-names-true.snapshot b/tests/__snapshots__/nested-rules/override/source-ltr-process-rule-names-true.snapshot
new file mode 100644
index 00000000..6966bcba
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/override/source-ltr-process-rule-names-true.snapshot
@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Nested rules tests:  {source: ltr} processRuleNames: true 1`] = `
+".test1 {
+    color: red;
+    left: 10px;
+
+    .test2 {
+        text-align: left;
+        padding: 5px;
+        width: 100%;
+    }
+}
+
+[dir="rtl"] .test1 {
+    left: auto;
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    left: 10px;
+
+    &.test4 {
+        color: black;
+        margin-left: 20px;
+    }
+
+    &.test5 {
+        padding: 5px;
+
+        span {
+            text-align: left;
+        }
+    }
+}
+
+[dir="rtl"] .test3 {
+    left: auto;
+    right: 10px;
+
+    &.test4 {
+        margin-left: 0;
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    display: flex;
+
+    .global & {
+        color: white;
+        padding: 5px 10px 5px 5px;
+        border-left-color: #666;
+
+        div {
+            margin: 0 auto;
+            padding-left: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            background-color: #FFF;
+
+            ::after {
+                content: "";
+                display: block;
+                text-align: left;
+            }
+        }
+    }
+}
+
+[dir="rtl"] .test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-left-color: currentcolor;
+        border-right-color: #666;
+
+        div {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        color: red;
+        left: 10px;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test8 {
+        left: auto;
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        .test9 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="rtl"] .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        .test10 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="rtl"] .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test12 {
+        @media screen and (min-width: 800px) {
+            color: red;
+        }
+    }
+
+    .test13 {
+        text-align: right;
+    }
+
+    .test13-left {
+        content: "\\f007";
+    }
+
+    .test13-right {
+        content: "\\f010";
+    }
+}
+
+[dir="rtl"] .test11 {
+    .test13 {
+        text-align: left;
+    }
+
+    .test13-left {
+        content: "\\f010";
+    }
+
+    .test13-right {
+        content: "\\f007";
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}
+
+.test14 {
+   @include padding;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/override/source-ltr.snapshot b/tests/__snapshots__/nested-rules/override/source-ltr.snapshot
new file mode 100644
index 00000000..c9691393
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/override/source-ltr.snapshot
@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Nested rules tests:  {source: ltr} 1`] = `
+".test1 {
+    color: red;
+    left: 10px;
+
+    .test2 {
+        text-align: left;
+        padding: 5px;
+        width: 100%;
+    }
+}
+
+[dir="rtl"] .test1 {
+    left: auto;
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    left: 10px;
+
+    &.test4 {
+        color: black;
+        margin-left: 20px;
+    }
+
+    &.test5 {
+        padding: 5px;
+
+        span {
+            text-align: left;
+        }
+    }
+}
+
+[dir="rtl"] .test3 {
+    left: auto;
+    right: 10px;
+
+    &.test4 {
+        margin-left: 0;
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    display: flex;
+
+    .global & {
+        color: white;
+        padding: 5px 10px 5px 5px;
+        border-left-color: #666;
+
+        div {
+            margin: 0 auto;
+            padding-left: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            background-color: #FFF;
+
+            ::after {
+                content: "";
+                display: block;
+                text-align: left;
+            }
+        }
+    }
+}
+
+[dir="rtl"] .test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-left-color: currentcolor;
+        border-right-color: #666;
+
+        div {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        color: red;
+        left: 10px;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test8 {
+        left: auto;
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        .test9 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="rtl"] .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        .test10 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="rtl"] .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test12 {
+        @media screen and (min-width: 800px) {
+            color: red;
+        }
+    }
+
+    .test13 {
+        text-align: right;
+    }
+
+    .test13-left {
+        content: "\\f007";
+    }
+
+    .test13-right {
+        content: "\\f010";
+    }
+}
+
+[dir="rtl"] .test11 {
+    .test13 {
+        text-align: left;
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}
+
+.test14 {
+   @include padding;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/override/source-rtl-process-rule-names-true.snapshot b/tests/__snapshots__/nested-rules/override/source-rtl-process-rule-names-true.snapshot
new file mode 100644
index 00000000..e5b1e482
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/override/source-rtl-process-rule-names-true.snapshot
@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Nested rules tests:  {source: rtl} processRuleNames: true 1`] = `
+".test1 {
+    color: red;
+    left: 10px;
+
+    .test2 {
+        text-align: left;
+        padding: 5px;
+        width: 100%;
+    }
+}
+
+[dir="ltr"] .test1 {
+    left: auto;
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    left: 10px;
+
+    &.test4 {
+        color: black;
+        margin-left: 20px;
+    }
+
+    &.test5 {
+        padding: 5px;
+
+        span {
+            text-align: left;
+        }
+    }
+}
+
+[dir="ltr"] .test3 {
+    left: auto;
+    right: 10px;
+
+    &.test4 {
+        margin-left: 0;
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    display: flex;
+
+    .global & {
+        color: white;
+        padding: 5px 10px 5px 5px;
+        border-left-color: #666;
+
+        div {
+            margin: 0 auto;
+            padding-left: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            background-color: #FFF;
+
+            ::after {
+                content: "";
+                display: block;
+                text-align: left;
+            }
+        }
+    }
+}
+
+[dir="ltr"] .test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-left-color: currentcolor;
+        border-right-color: #666;
+
+        div {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        color: red;
+        left: 10px;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test8 {
+        left: auto;
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        .test9 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="ltr"] .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        .test10 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="ltr"] .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test12 {
+        @media screen and (min-width: 800px) {
+            color: red;
+        }
+    }
+
+    .test13 {
+        text-align: right;
+    }
+
+    .test13-left {
+        content: "\\f007";
+    }
+
+    .test13-right {
+        content: "\\f010";
+    }
+}
+
+[dir="ltr"] .test11 {
+    .test13 {
+        text-align: left;
+    }
+
+    .test13-left {
+        content: "\\f010";
+    }
+
+    .test13-right {
+        content: "\\f007";
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}
+
+.test14 {
+   @include padding;
+}"
+`;
diff --git a/tests/__snapshots__/nested-rules/override/source-rtl.snapshot b/tests/__snapshots__/nested-rules/override/source-rtl.snapshot
new file mode 100644
index 00000000..71e25ffc
--- /dev/null
+++ b/tests/__snapshots__/nested-rules/override/source-rtl.snapshot
@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Nested rules tests:  {source: rtl} 1`] = `
+".test1 {
+    color: red;
+    left: 10px;
+
+    .test2 {
+        text-align: left;
+        padding: 5px;
+        width: 100%;
+    }
+}
+
+[dir="ltr"] .test1 {
+    left: auto;
+    right: 10px;
+
+    .test2 {
+        text-align: right;
+    }
+}
+
+.test3 {
+    left: 10px;
+
+    &.test4 {
+        color: black;
+        margin-left: 20px;
+    }
+
+    &.test5 {
+        padding: 5px;
+
+        span {
+            text-align: left;
+        }
+    }
+}
+
+[dir="ltr"] .test3 {
+    left: auto;
+    right: 10px;
+
+    &.test4 {
+        margin-left: 0;
+        margin-right: 20px;
+    }
+
+    &.test5 {
+        span {
+            text-align: right;
+        }
+    }
+}
+
+.test6 {
+    display: flex;
+
+    .global & {
+        color: white;
+        padding: 5px 10px 5px 5px;
+        border-left-color: #666;
+
+        div {
+            margin: 0 auto;
+            padding-left: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            background-color: #FFF;
+
+            ::after {
+                content: "";
+                display: block;
+                text-align: left;
+            }
+        }
+    }
+}
+
+[dir="ltr"] .test6 {
+    .global & {
+        padding: 5px 5px 5px 10px;
+        border-left-color: currentcolor;
+        border-right-color: #666;
+
+        div {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .test7 {
+        .global & {
+            ::after {
+                text-align: right;
+            }
+        }
+    }
+}
+
+@supports (display: contents) and (display: grid) {
+    .test8 {
+        color: red;
+        left: 10px;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test8 {
+        left: auto;
+        right: 10px;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 800px) {
+        .test9 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="ltr"] .test9 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    @supports (display: contents) and (display: grid) {
+        .test10 {
+            padding: 0 0.6em 0 1.7em;
+        }
+
+        [dir="ltr"] .test10 {
+            padding: 0 1.7em 0 0.6em;
+        }
+    }
+}
+
+.test11 {
+    .test12 {
+        @media screen and (min-width: 800px) {
+            color: red;
+        }
+    }
+
+    .test13 {
+        text-align: right;
+    }
+
+    .test13-left {
+        content: "\\f007";
+    }
+
+    .test13-right {
+        content: "\\f010";
+    }
+}
+
+[dir="ltr"] .test11 {
+    .test13 {
+        text-align: left;
+    }
+}
+
+@mixin padding {
+    padding-left: 10px;
+}
+
+.test14 {
+   @include padding;
+}"
+`;
diff --git a/tests/__snapshots__/noflip.test.ts.snap b/tests/__snapshots__/noflip.test.ts.snap
deleted file mode 100644
index 307ee4ae..00000000
--- a/tests/__snapshots__/noflip.test.ts.snap
+++ /dev/null
@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] Combined Tests:  No Flip 1`] = `
-".test1 {
-    color: #000;
-    font-size: 10px;
-    font-weight: bold;
-}
-
-.test2, .test3 {
-    height: 100%;
-    width: 100%;
-}
-
-.test4,
-.test5 {
-    border: 1px solid #FFF;
-    font-family: Arial;
-    font-weight: bold;
-    text-align: center;
-}"
-`;
-
-exports[`[[Mode: diff]] Combined Tests:  No Flip 1`] = `""`;
-
-exports[`[[Mode: override]] Combined Tests:  No Flip 1`] = `
-".test1 {
-    color: #000;
-    font-size: 10px;
-    font-weight: bold;
-}
-
-.test2, .test3 {
-    height: 100%;
-    width: 100%;
-}
-
-.test4,
-.test5 {
-    border: 1px solid #FFF;
-    font-family: Arial;
-    font-weight: bold;
-    text-align: center;
-}"
-`;
diff --git a/tests/__snapshots__/noflip/combined/no-flip.snapshot b/tests/__snapshots__/noflip/combined/no-flip.snapshot
new file mode 100644
index 00000000..07c3ddee
--- /dev/null
+++ b/tests/__snapshots__/noflip/combined/no-flip.snapshot
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Combined Tests:  No Flip 1`] = `
+".test1 {
+    color: #000;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.test2, .test3 {
+    height: 100%;
+    width: 100%;
+}
+
+.test4,
+.test5 {
+    border: 1px solid #FFF;
+    font-family: Arial;
+    font-weight: bold;
+    text-align: center;
+}"
+`;
diff --git a/tests/__snapshots__/noflip/diff/no-flip.snapshot b/tests/__snapshots__/noflip/diff/no-flip.snapshot
new file mode 100644
index 00000000..f42b7912
--- /dev/null
+++ b/tests/__snapshots__/noflip/diff/no-flip.snapshot
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Combined Tests:  No Flip 1`] = `""`;
diff --git a/tests/__snapshots__/noflip/override/no-flip.snapshot b/tests/__snapshots__/noflip/override/no-flip.snapshot
new file mode 100644
index 00000000..efe2f7cd
--- /dev/null
+++ b/tests/__snapshots__/noflip/override/no-flip.snapshot
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Combined Tests:  No Flip 1`] = `
+".test1 {
+    color: #000;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.test2, .test3 {
+    height: 100%;
+    width: 100%;
+}
+
+.test4,
+.test5 {
+    border: 1px solid #FFF;
+    font-family: Arial;
+    font-weight: bold;
+    text-align: center;
+}"
+`;
diff --git a/tests/__snapshots__/overriding.test.ts.snap b/tests/__snapshots__/overriding.test.ts.snap
deleted file mode 100644
index 11bf0fa0..00000000
--- a/tests/__snapshots__/overriding.test.ts.snap
+++ /dev/null
@@ -1,601 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] Overriding Tests:  Basic 1`] = `
-"/* Mirror properties, do nothing */
-.test1 {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-/* Mirror properties, do nothing */
-.test2 {
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-left: 0;
-    margin-right: 0;
-}
-
-/* Flipped-declarations overriden by non-flipped declarations, do nothing */
-.test3 {
-    text-align: left;
-    text-align: right;
-    text-align: center;
-}
-
-/* Overriden mirror properties */
-.test4 {
-    left: 0;
-    right: 10px;
-}
-
-[dir="ltr"] .test4 {
-    left: 10px;
-    right: 0;
-}
-
-[dir="rtl"] .test4 {
-    right: 10px;
-    left: 0;
-}
-
-/* Overriden with non-flippable declarations should move only the last one */
-.test5 {
-    padding: 0 2px 0 4px;
-    padding: 0 4px 0 8px;
-}
-
-[dir="ltr"] .test5 {
-    padding: 0 8px 0 16px;
-}
-
-[dir="rtl"] .test5 {
-    padding: 0 16px 0 8px;
-}
-
-/* Overriden with flippable declarations should move all of them */
-[dir="ltr"] .test6 {
-    margin-right: 1px;
-    margin-right: 2px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test6 {
-    margin-left: 1px;
-    margin-left: 2px;
-    margin-left: 3px;
-}
-
-/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one */
-.test7 {
-    margin-right: 1px;
-    margin-right: 2px;
-}
-
-[dir="ltr"] .test7 {
-    margin-left: 4px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test7 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-.test8 {
-    margin-right: 1px;
-    margin-right: 2px;
-}
-
-[dir="ltr"] .test8 {
-    margin-left: 4px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test8 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one even if there is a mirror */
-.test9 {
-    margin-right: 1px;
-    margin-right: 2px;
-}
-
-[dir="ltr"] .test9 {
-    margin-left: 1px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test9 {
-    margin-right: 1px;
-    margin-left: 3px;
-}
-
-/* Overriden should behave correctly with safeBothPrefix */
-.test10 {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-}"
-`;
-
-exports[`[[Mode: combined]] Overriding Tests:  With safeBothPrefix 1`] = `
-"/* Mirror properties, do nothing */
-[dir] .test1 {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-/* Mirror properties, do nothing */
-.test2 {
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-left: 10px;
-    margin-right: 10px;
-}
-
-[dir] .test2 {
-    margin-left: 0;
-    margin-right: 0;
-}
-
-/* Flipped-declarations overriden by non-flipped declarations, do nothing */
-.test3 {
-    text-align: left;
-    text-align: right;
-}
-
-[dir] .test3 {
-    text-align: center;
-}
-
-/* Overriden mirror properties */
-.test4 {
-    left: 0;
-    right: 10px;
-}
-
-[dir="ltr"] .test4 {
-    left: 10px;
-    right: 0;
-}
-
-[dir="rtl"] .test4 {
-    right: 10px;
-    left: 0;
-}
-
-/* Overriden with non-flippable declarations should move only the last one */
-.test5 {
-    padding: 0 2px 0 4px;
-    padding: 0 4px 0 8px;
-}
-
-[dir="ltr"] .test5 {
-    padding: 0 8px 0 16px;
-}
-
-[dir="rtl"] .test5 {
-    padding: 0 16px 0 8px;
-}
-
-/* Overriden with flippable declarations should move all of them */
-[dir="ltr"] .test6 {
-    margin-right: 1px;
-    margin-right: 2px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test6 {
-    margin-left: 1px;
-    margin-left: 2px;
-    margin-left: 3px;
-}
-
-/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one */
-.test7 {
-    margin-right: 1px;
-    margin-right: 2px;
-}
-
-[dir="ltr"] .test7 {
-    margin-left: 4px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test7 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-.test8 {
-    margin-right: 1px;
-    margin-right: 2px;
-}
-
-[dir="ltr"] .test8 {
-    margin-left: 4px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test8 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one even if there is a mirror */
-.test9 {
-    margin-right: 1px;
-    margin-right: 2px;
-}
-
-[dir="ltr"] .test9 {
-    margin-left: 1px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test9 {
-    margin-right: 1px;
-    margin-left: 3px;
-}
-
-/* Overriden should behave correctly with safeBothPrefix */
-.test10 {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-}
-
-[dir] .test10 {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-}"
-`;
-
-exports[`[[Mode: diff]] Overriding Tests:  Basic 1`] = `
-".test4 {
-    right: 10px;
-    left: 0;
-}
-
-.test5 {
-    padding: 0 16px 0 8px;
-}
-
-.test6 {
-    margin-right: 0;
-    margin-left: 1px;
-    margin-left: 2px;
-    margin-left: 3px;
-}
-
-.test7 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-.test8 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-.test9 {
-    margin-right: 1px;
-    margin-left: 3px;
-}"
-`;
-
-exports[`[[Mode: diff]] Overriding Tests:  With safeBothPrefix 1`] = `
-".test1 {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-.test2 {
-    margin-left: 0;
-    margin-right: 0;
-}
-
-.test3 {
-    text-align: center;
-}
-
-.test4 {
-    right: 10px;
-    left: 0;
-}
-
-.test5 {
-    padding: 0 16px 0 8px;
-}
-
-.test6 {
-    margin-right: 0;
-    margin-left: 1px;
-    margin-left: 2px;
-    margin-left: 3px;
-}
-
-.test7 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-.test8 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-.test9 {
-    margin-right: 1px;
-    margin-left: 3px;
-}
-
-.test10 {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-}"
-`;
-
-exports[`[[Mode: override]] Overriding Tests:  Basic 1`] = `
-"/* Mirror properties, do nothing */
-.test1 {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-/* Mirror properties, do nothing */
-.test2 {
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-left: 0;
-    margin-right: 0;
-}
-
-/* Flipped-declarations overriden by non-flipped declarations, do nothing */
-.test3 {
-    text-align: left;
-    text-align: right;
-    text-align: center;
-}
-
-/* Overriden mirror properties */
-.test4 {
-    left: 0;
-    left: 10px;
-    right: 10px;
-    right: 0;
-}
-
-[dir="rtl"] .test4 {
-    right: 10px;
-    left: 0;
-}
-
-/* Overriden with non-flippable declarations should move only the last one */
-.test5 {
-    padding: 0 2px 0 4px;
-    padding: 0 4px 0 8px;
-    padding: 0 8px 0 16px;
-}
-
-[dir="rtl"] .test5 {
-    padding: 0 16px 0 8px;
-}
-
-/* Overriden with flippable declarations should move all of them */
-.test6 {
-    margin-right: 1px;
-    margin-right: 2px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test6 {
-    margin-right: 0;
-    margin-left: 1px;
-    margin-left: 2px;
-    margin-left: 3px;
-}
-
-/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one */
-.test7 {
-    margin-right: 1px;
-    margin-right: 2px;
-    margin-left: 4px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test7 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-.test8 {
-    margin-left: 4px;
-    margin-right: 1px;
-    margin-right: 2px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test8 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one even if there is a mirror */
-.test9 {
-    margin-left: 1px;
-    margin-right: 1px;
-    margin-right: 2px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test9 {
-    margin-right: 1px;
-    margin-left: 3px;
-}
-
-/* Overriden should behave correctly with safeBothPrefix */
-.test10 {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-}"
-`;
-
-exports[`[[Mode: override]] Overriding Tests:  With safeBothPrefix 1`] = `
-"/* Mirror properties, do nothing */
-[dir] .test1 {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-/* Mirror properties, do nothing */
-.test2 {
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-left: 10px;
-    margin-right: 10px;
-}
-
-[dir] .test2 {
-    margin-left: 0;
-    margin-right: 0;
-}
-
-/* Flipped-declarations overriden by non-flipped declarations, do nothing */
-.test3 {
-    text-align: left;
-    text-align: right;
-}
-
-[dir] .test3 {
-    text-align: center;
-}
-
-/* Overriden mirror properties */
-.test4 {
-    left: 0;
-    right: 10px;
-}
-
-[dir] .test4 {
-    left: 10px;
-    right: 0;
-}
-
-[dir="rtl"] .test4 {
-    right: 10px;
-    left: 0;
-}
-
-/* Overriden with non-flippable declarations should move only the last one */
-.test5 {
-    padding: 0 2px 0 4px;
-    padding: 0 4px 0 8px;
-}
-
-[dir] .test5 {
-    padding: 0 8px 0 16px;
-}
-
-[dir="rtl"] .test5 {
-    padding: 0 16px 0 8px;
-}
-
-/* Overriden with flippable declarations should move all of them */
-[dir] .test6 {
-    margin-right: 1px;
-    margin-right: 2px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test6 {
-    margin-right: 0;
-    margin-left: 1px;
-    margin-left: 2px;
-    margin-left: 3px;
-}
-
-/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one */
-.test7 {
-    margin-right: 1px;
-    margin-right: 2px;
-}
-
-[dir] .test7 {
-    margin-left: 4px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test7 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-.test8 {
-    margin-right: 1px;
-    margin-right: 2px;
-}
-
-[dir] .test8 {
-    margin-left: 4px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test8 {
-    margin-right: 4px;
-    margin-left: 3px;
-}
-
-/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one even if there is a mirror */
-.test9 {
-    margin-right: 1px;
-    margin-right: 2px;
-}
-
-[dir] .test9 {
-    margin-left: 1px;
-    margin-right: 3px;
-}
-
-[dir="rtl"] .test9 {
-    margin-right: 1px;
-    margin-left: 3px;
-}
-
-/* Overriden should behave correctly with safeBothPrefix */
-.test10 {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-}
-
-[dir] .test10 {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-}"
-`;
diff --git a/tests/__snapshots__/overriding/combined/basic.snapshot b/tests/__snapshots__/overriding/combined/basic.snapshot
new file mode 100644
index 00000000..ad63849f
--- /dev/null
+++ b/tests/__snapshots__/overriding/combined/basic.snapshot
@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Overriding Tests:  Basic 1`] = `
+"/* Mirror properties, do nothing */
+.test1 {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+/* Mirror properties, do nothing */
+.test2 {
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/* Flipped-declarations overriden by non-flipped declarations, do nothing */
+.test3 {
+    text-align: left;
+    text-align: right;
+    text-align: center;
+}
+
+/* Overriden mirror properties */
+.test4 {
+    left: 0;
+    right: 10px;
+}
+
+[dir="ltr"] .test4 {
+    left: 10px;
+    right: 0;
+}
+
+[dir="rtl"] .test4 {
+    right: 10px;
+    left: 0;
+}
+
+/* Overriden with non-flippable declarations should move only the last one */
+.test5 {
+    padding: 0 2px 0 4px;
+    padding: 0 4px 0 8px;
+}
+
+[dir="ltr"] .test5 {
+    padding: 0 8px 0 16px;
+}
+
+[dir="rtl"] .test5 {
+    padding: 0 16px 0 8px;
+}
+
+/* Overriden with flippable declarations should move all of them */
+[dir="ltr"] .test6 {
+    margin-right: 1px;
+    margin-right: 2px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test6 {
+    margin-left: 1px;
+    margin-left: 2px;
+    margin-left: 3px;
+}
+
+/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one */
+.test7 {
+    margin-right: 1px;
+    margin-right: 2px;
+}
+
+[dir="ltr"] .test7 {
+    margin-left: 4px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test7 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+.test8 {
+    margin-right: 1px;
+    margin-right: 2px;
+}
+
+[dir="ltr"] .test8 {
+    margin-left: 4px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test8 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one even if there is a mirror */
+.test9 {
+    margin-right: 1px;
+    margin-right: 2px;
+}
+
+[dir="ltr"] .test9 {
+    margin-left: 1px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test9 {
+    margin-right: 1px;
+    margin-left: 3px;
+}
+
+/* Overriden should behave correctly with safeBothPrefix */
+.test10 {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}"
+`;
diff --git a/tests/__snapshots__/overriding/combined/with-safe-both-prefix.snapshot b/tests/__snapshots__/overriding/combined/with-safe-both-prefix.snapshot
new file mode 100644
index 00000000..bf0713c7
--- /dev/null
+++ b/tests/__snapshots__/overriding/combined/with-safe-both-prefix.snapshot
@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Overriding Tests:  With safeBothPrefix 1`] = `
+"/* Mirror properties, do nothing */
+[dir] .test1 {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+/* Mirror properties, do nothing */
+.test2 {
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+[dir] .test2 {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/* Flipped-declarations overriden by non-flipped declarations, do nothing */
+.test3 {
+    text-align: left;
+    text-align: right;
+}
+
+[dir] .test3 {
+    text-align: center;
+}
+
+/* Overriden mirror properties */
+.test4 {
+    left: 0;
+    right: 10px;
+}
+
+[dir="ltr"] .test4 {
+    left: 10px;
+    right: 0;
+}
+
+[dir="rtl"] .test4 {
+    right: 10px;
+    left: 0;
+}
+
+/* Overriden with non-flippable declarations should move only the last one */
+.test5 {
+    padding: 0 2px 0 4px;
+    padding: 0 4px 0 8px;
+}
+
+[dir="ltr"] .test5 {
+    padding: 0 8px 0 16px;
+}
+
+[dir="rtl"] .test5 {
+    padding: 0 16px 0 8px;
+}
+
+/* Overriden with flippable declarations should move all of them */
+[dir="ltr"] .test6 {
+    margin-right: 1px;
+    margin-right: 2px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test6 {
+    margin-left: 1px;
+    margin-left: 2px;
+    margin-left: 3px;
+}
+
+/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one */
+.test7 {
+    margin-right: 1px;
+    margin-right: 2px;
+}
+
+[dir="ltr"] .test7 {
+    margin-left: 4px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test7 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+.test8 {
+    margin-right: 1px;
+    margin-right: 2px;
+}
+
+[dir="ltr"] .test8 {
+    margin-left: 4px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test8 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one even if there is a mirror */
+.test9 {
+    margin-right: 1px;
+    margin-right: 2px;
+}
+
+[dir="ltr"] .test9 {
+    margin-left: 1px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test9 {
+    margin-right: 1px;
+    margin-left: 3px;
+}
+
+/* Overriden should behave correctly with safeBothPrefix */
+.test10 {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+[dir] .test10 {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}"
+`;
diff --git a/tests/__snapshots__/overriding/diff/basic.snapshot b/tests/__snapshots__/overriding/diff/basic.snapshot
new file mode 100644
index 00000000..3d8c3d7d
--- /dev/null
+++ b/tests/__snapshots__/overriding/diff/basic.snapshot
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Overriding Tests:  Basic 1`] = `
+".test4 {
+    right: 10px;
+    left: 0;
+}
+
+.test5 {
+    padding: 0 16px 0 8px;
+}
+
+.test6 {
+    margin-right: 0;
+    margin-left: 1px;
+    margin-left: 2px;
+    margin-left: 3px;
+}
+
+.test7 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+.test8 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+.test9 {
+    margin-right: 1px;
+    margin-left: 3px;
+}"
+`;
diff --git a/tests/__snapshots__/overriding/diff/with-safe-both-prefix.snapshot b/tests/__snapshots__/overriding/diff/with-safe-both-prefix.snapshot
new file mode 100644
index 00000000..5a9adc20
--- /dev/null
+++ b/tests/__snapshots__/overriding/diff/with-safe-both-prefix.snapshot
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Overriding Tests:  With safeBothPrefix 1`] = `
+".test1 {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.test2 {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.test3 {
+    text-align: center;
+}
+
+.test4 {
+    right: 10px;
+    left: 0;
+}
+
+.test5 {
+    padding: 0 16px 0 8px;
+}
+
+.test6 {
+    margin-right: 0;
+    margin-left: 1px;
+    margin-left: 2px;
+    margin-left: 3px;
+}
+
+.test7 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+.test8 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+.test9 {
+    margin-right: 1px;
+    margin-left: 3px;
+}
+
+.test10 {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}"
+`;
diff --git a/tests/__snapshots__/overriding/override/basic.snapshot b/tests/__snapshots__/overriding/override/basic.snapshot
new file mode 100644
index 00000000..8a4b3535
--- /dev/null
+++ b/tests/__snapshots__/overriding/override/basic.snapshot
@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Overriding Tests:  Basic 1`] = `
+"/* Mirror properties, do nothing */
+.test1 {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+/* Mirror properties, do nothing */
+.test2 {
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/* Flipped-declarations overriden by non-flipped declarations, do nothing */
+.test3 {
+    text-align: left;
+    text-align: right;
+    text-align: center;
+}
+
+/* Overriden mirror properties */
+.test4 {
+    left: 0;
+    left: 10px;
+    right: 10px;
+    right: 0;
+}
+
+[dir="rtl"] .test4 {
+    right: 10px;
+    left: 0;
+}
+
+/* Overriden with non-flippable declarations should move only the last one */
+.test5 {
+    padding: 0 2px 0 4px;
+    padding: 0 4px 0 8px;
+    padding: 0 8px 0 16px;
+}
+
+[dir="rtl"] .test5 {
+    padding: 0 16px 0 8px;
+}
+
+/* Overriden with flippable declarations should move all of them */
+.test6 {
+    margin-right: 1px;
+    margin-right: 2px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test6 {
+    margin-right: 0;
+    margin-left: 1px;
+    margin-left: 2px;
+    margin-left: 3px;
+}
+
+/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one */
+.test7 {
+    margin-right: 1px;
+    margin-right: 2px;
+    margin-left: 4px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test7 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+.test8 {
+    margin-left: 4px;
+    margin-right: 1px;
+    margin-right: 2px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test8 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one even if there is a mirror */
+.test9 {
+    margin-left: 1px;
+    margin-right: 1px;
+    margin-right: 2px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test9 {
+    margin-right: 1px;
+    margin-left: 3px;
+}
+
+/* Overriden should behave correctly with safeBothPrefix */
+.test10 {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}"
+`;
diff --git a/tests/__snapshots__/overriding/override/with-safe-both-prefix.snapshot b/tests/__snapshots__/overriding/override/with-safe-both-prefix.snapshot
new file mode 100644
index 00000000..722aeabd
--- /dev/null
+++ b/tests/__snapshots__/overriding/override/with-safe-both-prefix.snapshot
@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Overriding Tests:  With safeBothPrefix 1`] = `
+"/* Mirror properties, do nothing */
+[dir] .test1 {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+/* Mirror properties, do nothing */
+.test2 {
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+[dir] .test2 {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/* Flipped-declarations overriden by non-flipped declarations, do nothing */
+.test3 {
+    text-align: left;
+    text-align: right;
+}
+
+[dir] .test3 {
+    text-align: center;
+}
+
+/* Overriden mirror properties */
+.test4 {
+    left: 0;
+    right: 10px;
+}
+
+[dir] .test4 {
+    left: 10px;
+    right: 0;
+}
+
+[dir="rtl"] .test4 {
+    right: 10px;
+    left: 0;
+}
+
+/* Overriden with non-flippable declarations should move only the last one */
+.test5 {
+    padding: 0 2px 0 4px;
+    padding: 0 4px 0 8px;
+}
+
+[dir] .test5 {
+    padding: 0 8px 0 16px;
+}
+
+[dir="rtl"] .test5 {
+    padding: 0 16px 0 8px;
+}
+
+/* Overriden with flippable declarations should move all of them */
+[dir] .test6 {
+    margin-right: 1px;
+    margin-right: 2px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test6 {
+    margin-right: 0;
+    margin-left: 1px;
+    margin-left: 2px;
+    margin-left: 3px;
+}
+
+/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one */
+.test7 {
+    margin-right: 1px;
+    margin-right: 2px;
+}
+
+[dir] .test7 {
+    margin-left: 4px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test7 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+.test8 {
+    margin-right: 1px;
+    margin-right: 2px;
+}
+
+[dir] .test8 {
+    margin-left: 4px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test8 {
+    margin-right: 4px;
+    margin-left: 3px;
+}
+
+/* Overriden with flippable declarations but a counterpart flipped declaration should move only the last one even if there is a mirror */
+.test9 {
+    margin-right: 1px;
+    margin-right: 2px;
+}
+
+[dir] .test9 {
+    margin-left: 1px;
+    margin-right: 3px;
+}
+
+[dir="rtl"] .test9 {
+    margin-right: 1px;
+    margin-left: 3px;
+}
+
+/* Overriden should behave correctly with safeBothPrefix */
+.test10 {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+[dir] .test10 {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixed.test.ts.snap b/tests/__snapshots__/prefixed.test.ts.snap
deleted file mode 100644
index 57b815c5..00000000
--- a/tests/__snapshots__/prefixed.test.ts.snap
+++ /dev/null
@@ -1,841 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] Prefixed Tests:  Custom prefixes 1`] = `
-".test {
-    color: red;
-}
-
-.rtl .test {
-    left: 10px;
-}
-
-.ltr .test {
-    right: 10px;
-}
-
-.ltr .rtlignore .test2 {
-    padding: 2px 4px 8px 16px;
-}
-
-.rtl .rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltr .ltrignore .test2 {
-    margin: 2px 4px 8px 16px;
-}
-
-.rtl .ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-.ltr [dir="ltr"] .test3 {
-    text-align: left;
-}
-
-.rtl [dir="ltr"] .test3 {
-    text-align: right;
-}
-
-.ltr [dir="rtl"] .test3 {
-    text-align: right;
-}
-
-.rtl [dir="rtl"] .test3 {
-    text-align: left;
-}
-
-.ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl [dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-.rtl .test6 {
-    left: 5px;
-}
-
-.ltr .test7-ltr {
-    background-image: url("/icons/icon-left.png");
-}
-
-.rtl .test7-rtl {
-    background-image: url("/icons/icon-right.png");
-}
-
-.ltr [dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-ltr.png");
-}
-
-.rtl [dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-.ltr [dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-.rtl [dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-ltr.png");
-}"
-`;
-
-exports[`[[Mode: combined]] Prefixed Tests:  Prefixed default 1`] = `
-".test {
-    color: red;
-}
-
-[dir="ltr"] .rtl .test {
-    left: 10px;
-}
-
-[dir="rtl"] .rtl .test {
-    right: 10px;
-}
-
-[dir="ltr"] .ltr .test {
-    right: 10px;
-}
-
-[dir="rtl"] .ltr .test {
-    left: 10px;
-}
-
-[dir="ltr"] .rtlignore .test2 {
-    padding: 2px 4px 8px 16px;
-}
-
-[dir="rtl"] .rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .ltrignore .test2 {
-    margin: 2px 4px 8px 16px;
-}
-
-[dir="rtl"] .ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .test3 {
-    text-align: left;
-}
-
-[dir="rtl"] .test3 {
-    text-align: right;
-}
-
-[dir="rtl"] .ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-[dir="rtl"] .test6 {
-    left: 5px;
-}
-
-[dir="ltr"] .ltr .test7-ltr {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .ltr .test7-ltr {
-    background-image: url("/icons/icon-right.png");
-}
-
-[dir="ltr"] .rtl .test7-rtl {
-    background-image: url("/icons/icon-right.png");
-}
-
-[dir="rtl"] .rtl .test7-rtl {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-ltr.png");
-}
-
-[dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-rtl.png");
-}"
-`;
-
-exports[`[[Mode: combined]] Prefixed Tests:  Prefixed with array 1`] = `
-".test {
-    color: red;
-}
-
-.rtl .test {
-    left: 10px;
-}
-
-.ltr .test {
-    right: 10px;
-}
-
-.ltr .rtlignore .test2, [dir="ltr"] .rtlignore .test2 {
-    padding: 2px 4px 8px 16px;
-}
-
-.rtl .rtlignore .test2, [dir="rtl"] .rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltr .ltrignore .test2, [dir="ltr"] .ltrignore .test2 {
-    margin: 2px 4px 8px 16px;
-}
-
-.rtl .ltrignore .test2, [dir="rtl"] .ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .test3 {
-    text-align: left;
-}
-
-[dir="rtl"] .test3 {
-    text-align: right;
-}
-
-.ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-.rtl .test6, [dir="rtl"] .test6 {
-    left: 5px;
-}
-
-.ltr .test7-ltr {
-    background-image: url("/icons/icon-left.png");
-}
-
-.rtl .test7-rtl {
-    background-image: url("/icons/icon-right.png");
-}
-
-[dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-ltr.png");
-}
-
-[dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-rtl.png");
-}"
-`;
-
-exports[`[[Mode: combined]] Prefixed Tests:  ignorePrefixedRules false 1`] = `
-".test {
-    color: red;
-}
-
-[dir="ltr"] .rtl .test {
-    left: 10px;
-}
-
-[dir="rtl"] .rtl .test {
-    right: 10px;
-}
-
-[dir="ltr"] .ltr .test {
-    right: 10px;
-}
-
-[dir="rtl"] .ltr .test {
-    left: 10px;
-}
-
-[dir="ltr"] .rtlignore .test2 {
-    padding: 2px 4px 8px 16px;
-}
-
-[dir="rtl"] .rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .ltrignore .test2 {
-    margin: 2px 4px 8px 16px;
-}
-
-[dir="rtl"] .ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] [dir="ltr"] .test3 {
-    text-align: left;
-}
-
-[dir="rtl"] [dir="ltr"] .test3 {
-    text-align: right;
-}
-
-[dir="ltr"] [dir="rtl"] .test3 {
-    text-align: right;
-}
-
-[dir="rtl"] [dir="rtl"] .test3 {
-    text-align: left;
-}
-
-[dir="rtl"] .ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] [dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-[dir="rtl"] .test6 {
-    left: 5px;
-}
-
-[dir="ltr"] .ltr .test7-ltr {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .ltr .test7-ltr {
-    background-image: url("/icons/icon-right.png");
-}
-
-[dir="ltr"] .rtl .test7-rtl {
-    background-image: url("/icons/icon-right.png");
-}
-
-[dir="rtl"] .rtl .test7-rtl {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] [dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-ltr.png");
-}
-
-[dir="rtl"] [dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-[dir="ltr"] [dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-[dir="rtl"] [dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-ltr.png");
-}"
-`;
-
-exports[`[[Mode: diff]] Prefixed Tests:  Custom prefixes 1`] = `
-".rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .test3 {
-    text-align: right;
-}
-
-[dir="rtl"] .test3 {
-    text-align: left;
-}
-
-.ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-.test6 {
-    left: 5px;
-}
-
-[dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-[dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-ltr.png");
-}"
-`;
-
-exports[`[[Mode: diff]] Prefixed Tests:  Prefixed default 1`] = `
-".rtl .test {
-    left: auto;
-    right: 10px;
-}
-
-.ltr .test {
-    right: auto;
-    left: 10px;
-}
-
-.rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-.ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-.test6 {
-    left: 5px;
-}
-
-.ltr .test7-ltr {
-    background-image: url("/icons/icon-right.png");
-}
-
-.rtl .test7-rtl {
-    background-image: url("/icons/icon-left.png");
-}"
-`;
-
-exports[`[[Mode: diff]] Prefixed Tests:  Prefixed with array 1`] = `
-".rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-.ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-.test6 {
-    left: 5px;
-}"
-`;
-
-exports[`[[Mode: diff]] Prefixed Tests:  ignorePrefixedRules false 1`] = `
-".rtl .test {
-    left: auto;
-    right: 10px;
-}
-
-.ltr .test {
-    right: auto;
-    left: 10px;
-}
-
-.rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .test3 {
-    text-align: right;
-}
-
-[dir="rtl"] .test3 {
-    text-align: left;
-}
-
-.ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-.test6 {
-    left: 5px;
-}
-
-.ltr .test7-ltr {
-    background-image: url("/icons/icon-right.png");
-}
-
-.rtl .test7-rtl {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-[dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-ltr.png");
-}"
-`;
-
-exports[`[[Mode: override]] Prefixed Tests:  Custom prefixes 1`] = `
-".test {
-    color: red;
-}
-
-.rtl .test {
-    left: 10px;
-}
-
-.ltr .test {
-    right: 10px;
-}
-
-.rtlignore .test2 {
-    padding: 2px 4px 8px 16px;
-}
-
-.rtl .rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltrignore .test2 {
-    margin: 2px 4px 8px 16px;
-}
-
-.rtl .ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .test3 {
-    text-align: left;
-}
-
-.rtl [dir="ltr"] .test3 {
-    text-align: right;
-}
-
-[dir="rtl"] .test3 {
-    text-align: right;
-}
-
-.rtl [dir="rtl"] .test3 {
-    text-align: left;
-}
-
-.ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl [dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-.rtl .test6 {
-    left: 5px;
-}
-
-.ltr .test7-ltr {
-    background-image: url("/icons/icon-left.png");
-}
-
-.rtl .test7-rtl {
-    background-image: url("/icons/icon-right.png");
-}
-
-[dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-ltr.png");
-}
-
-.rtl [dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-[dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-.rtl [dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-ltr.png");
-}"
-`;
-
-exports[`[[Mode: override]] Prefixed Tests:  Prefixed default 1`] = `
-".test {
-    color: red;
-}
-
-.rtl .test {
-    left: 10px;
-}
-
-[dir="rtl"] .rtl .test {
-    left: auto;
-    right: 10px;
-}
-
-.ltr .test {
-    right: 10px;
-}
-
-[dir="rtl"] .ltr .test {
-    right: auto;
-    left: 10px;
-}
-
-.rtlignore .test2 {
-    padding: 2px 4px 8px 16px;
-}
-
-[dir="rtl"] .rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltrignore .test2 {
-    margin: 2px 4px 8px 16px;
-}
-
-[dir="rtl"] .ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .test3 {
-    text-align: left;
-}
-
-[dir="rtl"] .test3 {
-    text-align: right;
-}
-
-[dir="rtl"] .ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-[dir="rtl"] .test6 {
-    left: 5px;
-}
-
-.ltr .test7-ltr {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .ltr .test7-ltr {
-    background-image: url("/icons/icon-right.png");
-}
-
-.rtl .test7-rtl {
-    background-image: url("/icons/icon-right.png");
-}
-
-[dir="rtl"] .rtl .test7-rtl {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-ltr.png");
-}
-
-[dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-rtl.png");
-}"
-`;
-
-exports[`[[Mode: override]] Prefixed Tests:  Prefixed with array 1`] = `
-".test {
-    color: red;
-}
-
-.rtl .test {
-    left: 10px;
-}
-
-.ltr .test {
-    right: 10px;
-}
-
-.rtlignore .test2 {
-    padding: 2px 4px 8px 16px;
-}
-
-.rtl .rtlignore .test2, [dir="rtl"] .rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltrignore .test2 {
-    margin: 2px 4px 8px 16px;
-}
-
-.rtl .ltrignore .test2, [dir="rtl"] .ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .test3 {
-    text-align: left;
-}
-
-[dir="rtl"] .test3 {
-    text-align: right;
-}
-
-.ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-.rtl .test6, [dir="rtl"] .test6 {
-    left: 5px;
-}
-
-.ltr .test7-ltr {
-    background-image: url("/icons/icon-left.png");
-}
-
-.rtl .test7-rtl {
-    background-image: url("/icons/icon-right.png");
-}
-
-[dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-ltr.png");
-}
-
-[dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-rtl.png");
-}"
-`;
-
-exports[`[[Mode: override]] Prefixed Tests:  ignorePrefixedRules false 1`] = `
-".test {
-    color: red;
-}
-
-.rtl .test {
-    left: 10px;
-}
-
-[dir="rtl"] .rtl .test {
-    left: auto;
-    right: 10px;
-}
-
-.ltr .test {
-    right: 10px;
-}
-
-[dir="rtl"] .ltr .test {
-    right: auto;
-    left: 10px;
-}
-
-.rtlignore .test2 {
-    padding: 2px 4px 8px 16px;
-}
-
-[dir="rtl"] .rtlignore .test2 {
-    padding: 2px 16px 8px 4px;
-}
-
-.ltrignore .test2 {
-    margin: 2px 4px 8px 16px;
-}
-
-[dir="rtl"] .ltrignore .test2 {
-    margin: 2px 16px 8px 4px;
-}
-
-[dir="ltr"] .test3 {
-    text-align: left;
-}
-
-[dir="rtl"] [dir="ltr"] .test3 {
-    text-align: right;
-}
-
-[dir="rtl"] .test3 {
-    text-align: right;
-}
-
-[dir="rtl"] [dir="rtl"] .test3 {
-    text-align: left;
-}
-
-[dir="rtl"] .ltr .test4 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] [dir="rtl"] .test5 {
-    transform: translate(10px, 20px);
-}
-
-[dir="rtl"] .test6 {
-    left: 5px;
-}
-
-.ltr .test7-ltr {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .ltr .test7-ltr {
-    background-image: url("/icons/icon-right.png");
-}
-
-.rtl .test7-rtl {
-    background-image: url("/icons/icon-right.png");
-}
-
-[dir="rtl"] .rtl .test7-rtl {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-ltr.png");
-}
-
-[dir="rtl"] [dir="ltr"] .test8-ltr {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-[dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-rtl.png");
-}
-
-[dir="rtl"] [dir="rtl"] .test8-rtl {
-    background-image: url("/icons/icon-ltr.png");
-}"
-`;
diff --git a/tests/__snapshots__/prefixed/combined/custom-prefixes.snapshot b/tests/__snapshots__/prefixed/combined/custom-prefixes.snapshot
new file mode 100644
index 00000000..6e6aedcf
--- /dev/null
+++ b/tests/__snapshots__/prefixed/combined/custom-prefixes.snapshot
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Prefixed Tests:  Custom prefixes 1`] = `
+".test {
+    color: red;
+}
+
+.rtl .test {
+    left: 10px;
+}
+
+.ltr .test {
+    right: 10px;
+}
+
+.ltr .rtlignore .test2 {
+    padding: 2px 4px 8px 16px;
+}
+
+.rtl .rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltr .ltrignore .test2 {
+    margin: 2px 4px 8px 16px;
+}
+
+.rtl .ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+.ltr [dir="ltr"] .test3 {
+    text-align: left;
+}
+
+.rtl [dir="ltr"] .test3 {
+    text-align: right;
+}
+
+.ltr [dir="rtl"] .test3 {
+    text-align: right;
+}
+
+.rtl [dir="rtl"] .test3 {
+    text-align: left;
+}
+
+.ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl [dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+.rtl .test6 {
+    left: 5px;
+}
+
+.ltr .test7-ltr {
+    background-image: url("/icons/icon-left.png");
+}
+
+.rtl .test7-rtl {
+    background-image: url("/icons/icon-right.png");
+}
+
+.ltr [dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-ltr.png");
+}
+
+.rtl [dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+.ltr [dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+.rtl [dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-ltr.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/combined/ignore-prefixed-rules-false.snapshot b/tests/__snapshots__/prefixed/combined/ignore-prefixed-rules-false.snapshot
new file mode 100644
index 00000000..2661e3c3
--- /dev/null
+++ b/tests/__snapshots__/prefixed/combined/ignore-prefixed-rules-false.snapshot
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Prefixed Tests:  ignorePrefixedRules false 1`] = `
+".test {
+    color: red;
+}
+
+[dir="ltr"] .rtl .test {
+    left: 10px;
+}
+
+[dir="rtl"] .rtl .test {
+    right: 10px;
+}
+
+[dir="ltr"] .ltr .test {
+    right: 10px;
+}
+
+[dir="rtl"] .ltr .test {
+    left: 10px;
+}
+
+[dir="ltr"] .rtlignore .test2 {
+    padding: 2px 4px 8px 16px;
+}
+
+[dir="rtl"] .rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .ltrignore .test2 {
+    margin: 2px 4px 8px 16px;
+}
+
+[dir="rtl"] .ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] [dir="ltr"] .test3 {
+    text-align: left;
+}
+
+[dir="rtl"] [dir="ltr"] .test3 {
+    text-align: right;
+}
+
+[dir="ltr"] [dir="rtl"] .test3 {
+    text-align: right;
+}
+
+[dir="rtl"] [dir="rtl"] .test3 {
+    text-align: left;
+}
+
+[dir="rtl"] .ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] [dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+[dir="rtl"] .test6 {
+    left: 5px;
+}
+
+[dir="ltr"] .ltr .test7-ltr {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .ltr .test7-ltr {
+    background-image: url("/icons/icon-right.png");
+}
+
+[dir="ltr"] .rtl .test7-rtl {
+    background-image: url("/icons/icon-right.png");
+}
+
+[dir="rtl"] .rtl .test7-rtl {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] [dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-ltr.png");
+}
+
+[dir="rtl"] [dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+[dir="ltr"] [dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+[dir="rtl"] [dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-ltr.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/combined/prefixed-default.snapshot b/tests/__snapshots__/prefixed/combined/prefixed-default.snapshot
new file mode 100644
index 00000000..ae48dbb7
--- /dev/null
+++ b/tests/__snapshots__/prefixed/combined/prefixed-default.snapshot
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Prefixed Tests:  Prefixed default 1`] = `
+".test {
+    color: red;
+}
+
+[dir="ltr"] .rtl .test {
+    left: 10px;
+}
+
+[dir="rtl"] .rtl .test {
+    right: 10px;
+}
+
+[dir="ltr"] .ltr .test {
+    right: 10px;
+}
+
+[dir="rtl"] .ltr .test {
+    left: 10px;
+}
+
+[dir="ltr"] .rtlignore .test2 {
+    padding: 2px 4px 8px 16px;
+}
+
+[dir="rtl"] .rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .ltrignore .test2 {
+    margin: 2px 4px 8px 16px;
+}
+
+[dir="rtl"] .ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .test3 {
+    text-align: left;
+}
+
+[dir="rtl"] .test3 {
+    text-align: right;
+}
+
+[dir="rtl"] .ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+[dir="rtl"] .test6 {
+    left: 5px;
+}
+
+[dir="ltr"] .ltr .test7-ltr {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .ltr .test7-ltr {
+    background-image: url("/icons/icon-right.png");
+}
+
+[dir="ltr"] .rtl .test7-rtl {
+    background-image: url("/icons/icon-right.png");
+}
+
+[dir="rtl"] .rtl .test7-rtl {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-ltr.png");
+}
+
+[dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-rtl.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/combined/prefixed-with-array.snapshot b/tests/__snapshots__/prefixed/combined/prefixed-with-array.snapshot
new file mode 100644
index 00000000..6148f967
--- /dev/null
+++ b/tests/__snapshots__/prefixed/combined/prefixed-with-array.snapshot
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Prefixed Tests:  Prefixed with array 1`] = `
+".test {
+    color: red;
+}
+
+.rtl .test {
+    left: 10px;
+}
+
+.ltr .test {
+    right: 10px;
+}
+
+.ltr .rtlignore .test2, [dir="ltr"] .rtlignore .test2 {
+    padding: 2px 4px 8px 16px;
+}
+
+.rtl .rtlignore .test2, [dir="rtl"] .rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltr .ltrignore .test2, [dir="ltr"] .ltrignore .test2 {
+    margin: 2px 4px 8px 16px;
+}
+
+.rtl .ltrignore .test2, [dir="rtl"] .ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .test3 {
+    text-align: left;
+}
+
+[dir="rtl"] .test3 {
+    text-align: right;
+}
+
+.ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+.rtl .test6, [dir="rtl"] .test6 {
+    left: 5px;
+}
+
+.ltr .test7-ltr {
+    background-image: url("/icons/icon-left.png");
+}
+
+.rtl .test7-rtl {
+    background-image: url("/icons/icon-right.png");
+}
+
+[dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-ltr.png");
+}
+
+[dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-rtl.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/diff/custom-prefixes.snapshot b/tests/__snapshots__/prefixed/diff/custom-prefixes.snapshot
new file mode 100644
index 00000000..5cf0915f
--- /dev/null
+++ b/tests/__snapshots__/prefixed/diff/custom-prefixes.snapshot
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Prefixed Tests:  Custom prefixes 1`] = `
+".rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .test3 {
+    text-align: right;
+}
+
+[dir="rtl"] .test3 {
+    text-align: left;
+}
+
+.ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+.test6 {
+    left: 5px;
+}
+
+[dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+[dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-ltr.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/diff/ignore-prefixed-rules-false.snapshot b/tests/__snapshots__/prefixed/diff/ignore-prefixed-rules-false.snapshot
new file mode 100644
index 00000000..d370cfe2
--- /dev/null
+++ b/tests/__snapshots__/prefixed/diff/ignore-prefixed-rules-false.snapshot
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Prefixed Tests:  ignorePrefixedRules false 1`] = `
+".rtl .test {
+    left: auto;
+    right: 10px;
+}
+
+.ltr .test {
+    right: auto;
+    left: 10px;
+}
+
+.rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .test3 {
+    text-align: right;
+}
+
+[dir="rtl"] .test3 {
+    text-align: left;
+}
+
+.ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+.test6 {
+    left: 5px;
+}
+
+.ltr .test7-ltr {
+    background-image: url("/icons/icon-right.png");
+}
+
+.rtl .test7-rtl {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+[dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-ltr.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/diff/prefixed-default.snapshot b/tests/__snapshots__/prefixed/diff/prefixed-default.snapshot
new file mode 100644
index 00000000..75b5639a
--- /dev/null
+++ b/tests/__snapshots__/prefixed/diff/prefixed-default.snapshot
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Prefixed Tests:  Prefixed default 1`] = `
+".rtl .test {
+    left: auto;
+    right: 10px;
+}
+
+.ltr .test {
+    right: auto;
+    left: 10px;
+}
+
+.rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+.ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+.test6 {
+    left: 5px;
+}
+
+.ltr .test7-ltr {
+    background-image: url("/icons/icon-right.png");
+}
+
+.rtl .test7-rtl {
+    background-image: url("/icons/icon-left.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/diff/prefixed-with-array.snapshot b/tests/__snapshots__/prefixed/diff/prefixed-with-array.snapshot
new file mode 100644
index 00000000..0cd3f431
--- /dev/null
+++ b/tests/__snapshots__/prefixed/diff/prefixed-with-array.snapshot
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Prefixed Tests:  Prefixed with array 1`] = `
+".rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+.ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+.test6 {
+    left: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/override/custom-prefixes.snapshot b/tests/__snapshots__/prefixed/override/custom-prefixes.snapshot
new file mode 100644
index 00000000..597369ff
--- /dev/null
+++ b/tests/__snapshots__/prefixed/override/custom-prefixes.snapshot
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Prefixed Tests:  Custom prefixes 1`] = `
+".test {
+    color: red;
+}
+
+.rtl .test {
+    left: 10px;
+}
+
+.ltr .test {
+    right: 10px;
+}
+
+.rtlignore .test2 {
+    padding: 2px 4px 8px 16px;
+}
+
+.rtl .rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltrignore .test2 {
+    margin: 2px 4px 8px 16px;
+}
+
+.rtl .ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .test3 {
+    text-align: left;
+}
+
+.rtl [dir="ltr"] .test3 {
+    text-align: right;
+}
+
+[dir="rtl"] .test3 {
+    text-align: right;
+}
+
+.rtl [dir="rtl"] .test3 {
+    text-align: left;
+}
+
+.ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl [dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+.rtl .test6 {
+    left: 5px;
+}
+
+.ltr .test7-ltr {
+    background-image: url("/icons/icon-left.png");
+}
+
+.rtl .test7-rtl {
+    background-image: url("/icons/icon-right.png");
+}
+
+[dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-ltr.png");
+}
+
+.rtl [dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+[dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+.rtl [dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-ltr.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/override/ignore-prefixed-rules-false.snapshot b/tests/__snapshots__/prefixed/override/ignore-prefixed-rules-false.snapshot
new file mode 100644
index 00000000..21823b8e
--- /dev/null
+++ b/tests/__snapshots__/prefixed/override/ignore-prefixed-rules-false.snapshot
@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Prefixed Tests:  ignorePrefixedRules false 1`] = `
+".test {
+    color: red;
+}
+
+.rtl .test {
+    left: 10px;
+}
+
+[dir="rtl"] .rtl .test {
+    left: auto;
+    right: 10px;
+}
+
+.ltr .test {
+    right: 10px;
+}
+
+[dir="rtl"] .ltr .test {
+    right: auto;
+    left: 10px;
+}
+
+.rtlignore .test2 {
+    padding: 2px 4px 8px 16px;
+}
+
+[dir="rtl"] .rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltrignore .test2 {
+    margin: 2px 4px 8px 16px;
+}
+
+[dir="rtl"] .ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .test3 {
+    text-align: left;
+}
+
+[dir="rtl"] [dir="ltr"] .test3 {
+    text-align: right;
+}
+
+[dir="rtl"] .test3 {
+    text-align: right;
+}
+
+[dir="rtl"] [dir="rtl"] .test3 {
+    text-align: left;
+}
+
+[dir="rtl"] .ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] [dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+[dir="rtl"] .test6 {
+    left: 5px;
+}
+
+.ltr .test7-ltr {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .ltr .test7-ltr {
+    background-image: url("/icons/icon-right.png");
+}
+
+.rtl .test7-rtl {
+    background-image: url("/icons/icon-right.png");
+}
+
+[dir="rtl"] .rtl .test7-rtl {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-ltr.png");
+}
+
+[dir="rtl"] [dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+[dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-rtl.png");
+}
+
+[dir="rtl"] [dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-ltr.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/override/prefixed-default.snapshot b/tests/__snapshots__/prefixed/override/prefixed-default.snapshot
new file mode 100644
index 00000000..9ae26cb9
--- /dev/null
+++ b/tests/__snapshots__/prefixed/override/prefixed-default.snapshot
@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Prefixed Tests:  Prefixed default 1`] = `
+".test {
+    color: red;
+}
+
+.rtl .test {
+    left: 10px;
+}
+
+[dir="rtl"] .rtl .test {
+    left: auto;
+    right: 10px;
+}
+
+.ltr .test {
+    right: 10px;
+}
+
+[dir="rtl"] .ltr .test {
+    right: auto;
+    left: 10px;
+}
+
+.rtlignore .test2 {
+    padding: 2px 4px 8px 16px;
+}
+
+[dir="rtl"] .rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltrignore .test2 {
+    margin: 2px 4px 8px 16px;
+}
+
+[dir="rtl"] .ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .test3 {
+    text-align: left;
+}
+
+[dir="rtl"] .test3 {
+    text-align: right;
+}
+
+[dir="rtl"] .ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+[dir="rtl"] .test6 {
+    left: 5px;
+}
+
+.ltr .test7-ltr {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .ltr .test7-ltr {
+    background-image: url("/icons/icon-right.png");
+}
+
+.rtl .test7-rtl {
+    background-image: url("/icons/icon-right.png");
+}
+
+[dir="rtl"] .rtl .test7-rtl {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-ltr.png");
+}
+
+[dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-rtl.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixed/override/prefixed-with-array.snapshot b/tests/__snapshots__/prefixed/override/prefixed-with-array.snapshot
new file mode 100644
index 00000000..30908979
--- /dev/null
+++ b/tests/__snapshots__/prefixed/override/prefixed-with-array.snapshot
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Prefixed Tests:  Prefixed with array 1`] = `
+".test {
+    color: red;
+}
+
+.rtl .test {
+    left: 10px;
+}
+
+.ltr .test {
+    right: 10px;
+}
+
+.rtlignore .test2 {
+    padding: 2px 4px 8px 16px;
+}
+
+.rtl .rtlignore .test2, [dir="rtl"] .rtlignore .test2 {
+    padding: 2px 16px 8px 4px;
+}
+
+.ltrignore .test2 {
+    margin: 2px 4px 8px 16px;
+}
+
+.rtl .ltrignore .test2, [dir="rtl"] .ltrignore .test2 {
+    margin: 2px 16px 8px 4px;
+}
+
+[dir="ltr"] .test3 {
+    text-align: left;
+}
+
+[dir="rtl"] .test3 {
+    text-align: right;
+}
+
+.ltr .test4 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .test5 {
+    transform: translate(10px, 20px);
+}
+
+.rtl .test6, [dir="rtl"] .test6 {
+    left: 5px;
+}
+
+.ltr .test7-ltr {
+    background-image: url("/icons/icon-left.png");
+}
+
+.rtl .test7-rtl {
+    background-image: url("/icons/icon-right.png");
+}
+
+[dir="ltr"] .test8-ltr {
+    background-image: url("/icons/icon-ltr.png");
+}
+
+[dir="rtl"] .test8-rtl {
+    background-image: url("/icons/icon-rtl.png");
+}"
+`;
diff --git a/tests/__snapshots__/prefixes.test.ts.snap b/tests/__snapshots__/prefixes.test.ts.snap
deleted file mode 100644
index 57c78644..00000000
--- a/tests/__snapshots__/prefixes.test.ts.snap
+++ /dev/null
@@ -1,7305 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] Prefixes Tests:  custom ltrPrefix and rtlPrefix 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-.ltr .test1, .ltr .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-.rtl .test1, .rtl .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-.ltr .test3 {
-    direction: ltr;
-}
-
-.rtl .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.ltr .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-.rtl .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-.ltr .test5,
-.ltr .test6,
-.ltr .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-.rtl .test5,
-.rtl .test6,
-.rtl .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-.ltr .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.rtl .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-.ltr .test9, .ltr .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-.rtl .test9, .rtl .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-.ltr .test11:hover,
-.ltr .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-.rtl .test11:hover,
-.rtl .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.ltr .test16:hover {
-    padding-right: 20px;
-}
-
-.rtl .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-.ltr .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-.rtl .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-.ltr .test18::after {
-    left: 10px;
-}
-
-.rtl .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    .ltr .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    .rtl .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.ltr .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-.rtl .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-.ltr .test24 {
-    border: 1px solid #FFF;
-}
-
-.rtl .test24 {
-    border: 1px solid #000;
-}
-
-.ltr .test24, .rtl .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.ltr .test25, .ltr .test26-ltr, .ltr .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.rtl .test25, .rtl .test26-ltr, .rtl .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.ltr .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.rtl .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.ltr .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.rtl .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.ltr .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.rtl .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-.ltr .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-.rtl .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.ltr .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-.rtl .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-.ltr .test33 {
-    left: 10px;
-}
-
-.rtl .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.rtl .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-.rtl .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.rtl .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-.ltr .test39 {
-    margin-right: 10px;
-}
-
-.rtl .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-.ltr .test40 {
-    right: 5px;
-}
-
-.rtl .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-.ltr .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl .test41 {
-    left: 10px;
-}
-
-.ltr .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.ltr .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    .ltr .test46 {
-        text-align: left;
-    }
-
-    .rtl .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    .ltr .test48 {
-        text-align: right;
-    }
-
-    .rtl .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-.ltr:root {
-    text-align: right;
-}
-
-.rtl:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html.ltr .test50 {
-    left: 10px;
-}
-
-html.rtl .test50 {
-    right: 10px;
-}
-
-.ltr .test51 {
-    border-left: 1px solid #FFF;
-}
-
-.rtl .test51 {
-    border-right: 1px solid #FFF;
-}
-
-.ltr .test51, .rtl .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] Prefixes Tests:  custom ltrPrefix and rtlPrefix properties as arrays 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-.ltr .test1, .left-to-right .test1, .ltr .test2, .left-to-right .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-.rtl .test1, .right-to-left .test1, .rtl .test2, .right-to-left .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-.ltr .test3, .left-to-right .test3 {
-    direction: ltr;
-}
-
-.rtl .test3, .right-to-left .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.ltr .test4, .left-to-right .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-.rtl .test4, .right-to-left .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-.ltr .test5,
-.left-to-right .test5,
-.ltr .test6,
-.left-to-right .test6,
-.ltr .test7,
-.left-to-right .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-.rtl .test5,
-.right-to-left .test5,
-.rtl .test6,
-.right-to-left .test6,
-.rtl .test7,
-.right-to-left .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-.ltr .test8, .left-to-right .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.rtl .test8, .right-to-left .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-.ltr .test9, .left-to-right .test9, .ltr .test10, .left-to-right .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-.rtl .test9, .right-to-left .test9, .rtl .test10, .right-to-left .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-.ltr .test11:hover,
-.left-to-right .test11:hover,
-.ltr .test11:active,
-.left-to-right .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-.rtl .test11:hover,
-.right-to-left .test11:hover,
-.rtl .test11:active,
-.right-to-left .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.ltr .test16:hover, .left-to-right .test16:hover {
-    padding-right: 20px;
-}
-
-.rtl .test16:hover, .right-to-left .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-.ltr .test18, .left-to-right .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-.rtl .test18, .right-to-left .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-.ltr .test18::after, .left-to-right .test18::after {
-    left: 10px;
-}
-
-.rtl .test18::after, .right-to-left .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    .ltr .test18, .left-to-right .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    .rtl .test18, .right-to-left .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.ltr .test22, .left-to-right .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-.rtl .test22, .right-to-left .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-.ltr .test24, .left-to-right .test24 {
-    border: 1px solid #FFF;
-}
-
-.rtl .test24, .right-to-left .test24 {
-    border: 1px solid #000;
-}
-
-.ltr .test24, .left-to-right .test24, .rtl .test24, .right-to-left .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.ltr .test25, .left-to-right .test25, .ltr .test26-ltr, .left-to-right .test26-ltr, .ltr .test27, .left-to-right .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.rtl .test25, .right-to-left .test25, .rtl .test26-ltr, .right-to-left .test26-ltr, .rtl .test27, .right-to-left .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.ltr .test26-rtl, .left-to-right .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.rtl .test26-rtl, .right-to-left .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.ltr .test28-right::before, .left-to-right .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.rtl .test28-right::before, .right-to-left .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.ltr .testleft30, .left-to-right .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.rtl .testleft30, .right-to-left .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-.ltr .test31, .left-to-right .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-.rtl .test31, .right-to-left .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.ltr .test32, .left-to-right .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-.rtl .test32, .right-to-left .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-.ltr .test33, .left-to-right .test33 {
-    left: 10px;
-}
-
-.rtl .test33, .right-to-left .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl .example34, .right-to-left .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl .example35, .right-to-left .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr .test36, .left-to-right .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.rtl .test36, .right-to-left .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr .test37, .left-to-right .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-.rtl .test37, .right-to-left .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr .test38, .left-to-right .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.rtl .test38, .right-to-left .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-.ltr .test39, .left-to-right .test39 {
-    margin-right: 10px;
-}
-
-.rtl .test39, .right-to-left .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-.ltr .test40, .left-to-right .test40 {
-    right: 5px;
-}
-
-.rtl .test40, .right-to-left .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-.ltr .test41, .left-to-right .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl .test41, .right-to-left .test41 {
-    left: 10px;
-}
-
-.ltr .test42, .left-to-right .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.ltr .test43, .left-to-right .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    .ltr .test46, .left-to-right .test46 {
-        text-align: left;
-    }
-
-    .rtl .test46, .right-to-left .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    .ltr .test48, .left-to-right .test48 {
-        text-align: right;
-    }
-
-    .rtl .test48, .right-to-left .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-.ltr:root, .left-to-right:root {
-    text-align: right;
-}
-
-.rtl:root, .right-to-left:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html.ltr .test50, html.left-to-right .test50 {
-    left: 10px;
-}
-
-html.rtl .test50, html.right-to-left .test50 {
-    right: 10px;
-}
-
-.ltr .test51, .left-to-right .test51 {
-    border-left: 1px solid #FFF;
-}
-
-.rtl .test51, .right-to-left .test51 {
-    border-right: 1px solid #FFF;
-}
-
-.ltr .test51, .left-to-right .test51, .rtl .test51, .right-to-left .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] Prefixes Tests:  custom ltrPrefix, rtlPrefix, and bothPrefix properties as arrays and processUrls: true 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-.ltr .test1, .left-to-right .test1, .ltr .test2, .left-to-right .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-.rtl .test1, .right-to-left .test1, .rtl .test2, .right-to-left .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.ltr .test1, .left-to-right .test1, .rtl .test1, .right-to-left .test1, .ltr .test2, .left-to-right .test2, .rtl .test2, .right-to-left .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-.ltr .test3, .left-to-right .test3 {
-    direction: ltr;
-}
-
-.rtl .test3, .right-to-left .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.ltr .test4, .left-to-right .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-.rtl .test4, .right-to-left .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-.ltr .test5,
-.left-to-right .test5,
-.ltr .test6,
-.left-to-right .test6,
-.ltr .test7,
-.left-to-right .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-.rtl .test5,
-.right-to-left .test5,
-.rtl .test6,
-.right-to-left .test6,
-.rtl .test7,
-.right-to-left .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-.ltr .test8, .left-to-right .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.rtl .test8, .right-to-left .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-.ltr .test9, .left-to-right .test9, .ltr .test10, .left-to-right .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-.rtl .test9, .right-to-left .test9, .rtl .test10, .right-to-left .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-.ltr .test11:hover,
-.left-to-right .test11:hover,
-.ltr .test11:active,
-.left-to-right .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-.rtl .test11:hover,
-.right-to-left .test11:hover,
-.rtl .test11:active,
-.right-to-left .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.ltr .test16:hover, .left-to-right .test16:hover {
-    padding-right: 20px;
-}
-
-.rtl .test16:hover, .right-to-left .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-.ltr .test18, .left-to-right .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-.rtl .test18, .right-to-left .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-.ltr .test18::after, .left-to-right .test18::after {
-    left: 10px;
-}
-
-.rtl .test18::after, .right-to-left .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    .ltr .test18, .left-to-right .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    .rtl .test18, .right-to-left .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.ltr .test22, .left-to-right .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-.rtl .test22, .right-to-left .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-.ltr .test24, .left-to-right .test24 {
-    border: 1px solid #FFF;
-}
-
-.rtl .test24, .right-to-left .test24 {
-    border: 1px solid #000;
-}
-
-.ltr .test24, .left-to-right .test24, .rtl .test24, .right-to-left .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.ltr .test25, .left-to-right .test25, .ltr .test26-ltr, .left-to-right .test26-ltr, .ltr .test27, .left-to-right .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.rtl .test25, .right-to-left .test25, .rtl .test26-ltr, .right-to-left .test26-ltr, .rtl .test27, .right-to-left .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.ltr .test26-rtl, .left-to-right .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.rtl .test26-rtl, .right-to-left .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.ltr .test28-left::before, .left-to-right .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.rtl .test28-left::before, .right-to-left .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.ltr .test28-right::before, .left-to-right .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.rtl .test28-right::before, .right-to-left .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.ltr .testleft30, .left-to-right .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.rtl .testleft30, .right-to-left .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.ltr .testright30, .left-to-right .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.rtl .testright30, .right-to-left .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-.ltr .test31, .left-to-right .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-.rtl .test31, .right-to-left .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.ltr .test32, .left-to-right .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-.rtl .test32, .right-to-left .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-.ltr .test33, .left-to-right .test33 {
-    left: 10px;
-}
-
-.rtl .test33, .right-to-left .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl .example34, .right-to-left .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl .example35, .right-to-left .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr .test36, .left-to-right .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.rtl .test36, .right-to-left .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr .test37, .left-to-right .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-.rtl .test37, .right-to-left .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr .test38, .left-to-right .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.rtl .test38, .right-to-left .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-.ltr .test39, .left-to-right .test39 {
-    margin-right: 10px;
-}
-
-.rtl .test39, .right-to-left .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-.ltr .test40, .left-to-right .test40 {
-    right: 5px;
-}
-
-.rtl .test40, .right-to-left .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-.ltr .test41, .left-to-right .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl .test41, .right-to-left .test41 {
-    left: 10px;
-}
-
-.ltr .test42, .left-to-right .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.ltr .test43, .left-to-right .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    .ltr .test46, .left-to-right .test46 {
-        text-align: left;
-    }
-
-    .rtl .test46, .right-to-left .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    .ltr .test48, .left-to-right .test48 {
-        text-align: right;
-    }
-
-    .rtl .test48, .right-to-left .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-.ltr:root, .left-to-right:root {
-    text-align: right;
-}
-
-.rtl:root, .right-to-left:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html.ltr .test50, html.left-to-right .test50 {
-    left: 10px;
-}
-
-html.rtl .test50, html.right-to-left .test50 {
-    right: 10px;
-}
-
-.ltr .test51, .left-to-right .test51 {
-    border-left: 1px solid #FFF;
-}
-
-.rtl .test51, .right-to-left .test51 {
-    border-right: 1px solid #FFF;
-}
-
-.ltr .test51, .left-to-right .test51, .rtl .test51, .right-to-left .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] Prefixes Tests:  prefixSelectorTransformer with custom ltrPrefix and rtlPrefix 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-.ltr.test1, .ltr.test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-.rtl.test1, .rtl.test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-.ltr.test3 {
-    direction: ltr;
-}
-
-.rtl.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.ltr.test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-.rtl.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-.ltr.test5,
-.ltr.test6,
-.ltr.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-.rtl.test5,
-.rtl.test6,
-.rtl.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-.ltr.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.rtl.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-.ltr.test9, .ltr.test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-.rtl.test9, .rtl.test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-.ltr.test11:hover,
-.ltr.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-.rtl.test11:hover,
-.rtl.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.ltr.test16:hover {
-    padding-right: 20px;
-}
-
-.rtl.test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-.ltr.test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-.rtl.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-.ltr.test18::after {
-    left: 10px;
-}
-
-.rtl.test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    .ltr.test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    .rtl.test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.ltr.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-.rtl.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-.ltr.test24 {
-    border: 1px solid #FFF;
-}
-
-.rtl.test24 {
-    border: 1px solid #000;
-}
-
-.ltr.test24, .rtl.test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.ltr.test25, .ltr.test26-ltr, .ltr.test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.rtl.test25, .rtl.test26-ltr, .rtl.test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.ltr.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.rtl.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.ltr.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.rtl.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.ltr.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.rtl.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-.ltr.test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-.rtl.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.ltr.test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-.rtl.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-.ltr.test33 {
-    left: 10px;
-}
-
-.rtl.test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr.test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.rtl.test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr.test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-.rtl.test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-.ltr.test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.rtl.test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-.ltr.test39 {
-    margin-right: 10px;
-}
-
-.rtl.test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-.ltr.test40 {
-    right: 5px;
-}
-
-.rtl.test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-.ltr.test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl.test41 {
-    left: 10px;
-}
-
-.ltr.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.ltr.test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    .ltr.test46 {
-        text-align: left;
-    }
-
-    .rtl.test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    .ltr.test48 {
-        text-align: right;
-    }
-
-    .rtl.test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-.ltr:root {
-    text-align: right;
-}
-
-.rtl:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html.ltr .test50 {
-    left: 10px;
-}
-
-html.rtl .test50 {
-    right: 10px;
-}
-
-.ltr.test51 {
-    border-left: 1px solid #FFF;
-}
-
-.rtl.test51 {
-    border-right: 1px solid #FFF;
-}
-
-.ltr.test51, .rtl.test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] Prefixes Tests:  prefixSelectorTransformer with default prefixes 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] > .test1, [dir="ltr"] > .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] > .test1, [dir="rtl"] > .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] > .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] > .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] > .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] > .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] > .test5,
-[dir="ltr"] > .test6,
-[dir="ltr"] > .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] > .test5,
-[dir="rtl"] > .test6,
-[dir="rtl"] > .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] > .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] > .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] > .test9, [dir="ltr"] > .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] > .test9, [dir="rtl"] > .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] > .test11:hover,
-[dir="ltr"] > .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] > .test11:hover,
-[dir="rtl"] > .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] > .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] > .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] > .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] > .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] > .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] > .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] > .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] > .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] > .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] > .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] > .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] > .test24 {
-    border: 1px solid #000;
-}
-
-[dir] > .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] > .test25, [dir="ltr"] > .test26-ltr, [dir="ltr"] > .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] > .test25, [dir="rtl"] > .test26-ltr, [dir="rtl"] > .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] > .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] > .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] > .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] > .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] > .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] > .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] > .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] > .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] > .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] > .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] > .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] > .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] > .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] > .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] > .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] > .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] > .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] > .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] > .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] > .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] > .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] > .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] > .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] > .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] > .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] > .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] > .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] > .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] > .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] > .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] > .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] > .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] > .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] > .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] > .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: diff]] Prefixes Tests:  custom ltrPrefix and rtlPrefix 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] Prefixes Tests:  custom ltrPrefix and rtlPrefix properties as arrays 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] Prefixes Tests:  custom ltrPrefix, rtlPrefix, and bothPrefix properties as arrays and processUrls: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] Prefixes Tests:  prefixSelectorTransformer with custom ltrPrefix and rtlPrefix 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] Prefixes Tests:  prefixSelectorTransformer with default prefixes 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: override]] Prefixes Tests:  custom ltrPrefix and rtlPrefix 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-.rtl .test1, .rtl .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-.rtl .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.rtl .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-.rtl .test5,
-.rtl .test6,
-.rtl .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-.rtl .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-.rtl .test9, .rtl .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-.rtl .test11:hover,
-.rtl .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-.rtl .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-.rtl .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-.rtl .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    .rtl .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-.rtl .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-.rtl .test24 {
-    border: 1px solid #000;
-}
-
-.ltr .test24, .rtl .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.rtl .test25, .rtl .test26-ltr, .rtl .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.rtl .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.rtl .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.rtl .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-.rtl .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.rtl .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-.rtl .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.ltr .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.rtl .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-.ltr .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.rtl .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-.ltr .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-.ltr .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-.ltr .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-.ltr .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.ltr .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.ltr .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    .rtl .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    .ltr .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-.ltr:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html.rtl .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-.rtl .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-.ltr .test51, .rtl .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] Prefixes Tests:  custom ltrPrefix and rtlPrefix properties as arrays 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-.rtl .test1, .right-to-left .test1, .rtl .test2, .right-to-left .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-.rtl .test3, .right-to-left .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.rtl .test4, .right-to-left .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-.rtl .test5,
-.right-to-left .test5,
-.rtl .test6,
-.right-to-left .test6,
-.rtl .test7,
-.right-to-left .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-.rtl .test8, .right-to-left .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-.rtl .test9, .right-to-left .test9, .rtl .test10, .right-to-left .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-.rtl .test11:hover,
-.right-to-left .test11:hover,
-.rtl .test11:active,
-.right-to-left .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-.rtl .test16:hover, .right-to-left .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-.rtl .test18, .right-to-left .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-.rtl .test18::after, .right-to-left .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    .rtl .test18, .right-to-left .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-.rtl .test22, .right-to-left .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-.rtl .test24, .right-to-left .test24 {
-    border: 1px solid #000;
-}
-
-.ltr .test24, .left-to-right .test24, .rtl .test24, .right-to-left .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.rtl .test25, .right-to-left .test25, .rtl .test26-ltr, .right-to-left .test26-ltr, .rtl .test27, .right-to-left .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.rtl .test26-rtl, .right-to-left .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.rtl .test28-right::before, .right-to-left .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.rtl .testleft30, .right-to-left .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-.rtl .test31, .right-to-left .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.rtl .test32, .right-to-left .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-.rtl .test33, .right-to-left .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl .example34, .right-to-left .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl .example35, .right-to-left .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.ltr .test36, .left-to-right .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.rtl .test37, .right-to-left .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-.ltr .test37, .left-to-right .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.rtl .test38, .right-to-left .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-.ltr .test38, .left-to-right .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-.ltr .test39, .left-to-right .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-.ltr .test40, .left-to-right .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-.ltr .test41, .left-to-right .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.ltr .test42, .left-to-right .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.ltr .test43, .left-to-right .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    .rtl .test46, .right-to-left .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    .ltr .test48, .left-to-right .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-.ltr:root, .left-to-right:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html.rtl .test50, html.right-to-left .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-.rtl .test51, .right-to-left .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-.ltr .test51, .left-to-right .test51, .rtl .test51, .right-to-left .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] Prefixes Tests:  custom ltrPrefix, rtlPrefix, and bothPrefix properties as arrays and processUrls: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-.rtl .test1, .right-to-left .test1, .rtl .test2, .right-to-left .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.ltr .test1, .left-to-right .test1, .rtl .test1, .right-to-left .test1, .ltr .test2, .left-to-right .test2, .rtl .test2, .right-to-left .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-.rtl .test3, .right-to-left .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.rtl .test4, .right-to-left .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-.rtl .test5,
-.right-to-left .test5,
-.rtl .test6,
-.right-to-left .test6,
-.rtl .test7,
-.right-to-left .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-.rtl .test8, .right-to-left .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-.rtl .test9, .right-to-left .test9, .rtl .test10, .right-to-left .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-.rtl .test11:hover,
-.right-to-left .test11:hover,
-.rtl .test11:active,
-.right-to-left .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-.rtl .test16:hover, .right-to-left .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-.rtl .test18, .right-to-left .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-.rtl .test18::after, .right-to-left .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    .rtl .test18, .right-to-left .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-.rtl .test22, .right-to-left .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-.rtl .test24, .right-to-left .test24 {
-    border: 1px solid #000;
-}
-
-.ltr .test24, .left-to-right .test24, .rtl .test24, .right-to-left .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.rtl .test25, .right-to-left .test25, .rtl .test26-ltr, .right-to-left .test26-ltr, .rtl .test27, .right-to-left .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.rtl .test26-rtl, .right-to-left .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.rtl .test28-left::before, .right-to-left .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.rtl .test28-right::before, .right-to-left .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.rtl .testleft30, .right-to-left .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.rtl .testright30, .right-to-left .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-.rtl .test31, .right-to-left .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.rtl .test32, .right-to-left .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-.rtl .test33, .right-to-left .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl .example34, .right-to-left .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl .example35, .right-to-left .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.ltr .test36, .left-to-right .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.rtl .test37, .right-to-left .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-.ltr .test37, .left-to-right .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.rtl .test38, .right-to-left .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-.ltr .test38, .left-to-right .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-.ltr .test39, .left-to-right .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-.ltr .test40, .left-to-right .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-.ltr .test41, .left-to-right .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.ltr .test42, .left-to-right .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.ltr .test43, .left-to-right .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    .rtl .test46, .right-to-left .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    .ltr .test48, .left-to-right .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-.ltr:root, .left-to-right:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html.rtl .test50, html.right-to-left .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-.rtl .test51, .right-to-left .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-.ltr .test51, .left-to-right .test51, .rtl .test51, .right-to-left .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] Prefixes Tests:  prefixSelectorTransformer with custom ltrPrefix and rtlPrefix 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-.rtl.test1, .rtl.test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-.rtl.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.rtl.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-.rtl.test5,
-.rtl.test6,
-.rtl.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-.rtl.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-.rtl.test9, .rtl.test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-.rtl.test11:hover,
-.rtl.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-.rtl.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-.rtl.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-.rtl.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    .rtl.test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-.rtl.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-.rtl.test24 {
-    border: 1px solid #000;
-}
-
-.ltr.test24, .rtl.test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.rtl.test25, .rtl.test26-ltr, .rtl.test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.rtl.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.rtl.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.rtl.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-.rtl.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.rtl.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-.rtl.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.rtl.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.rtl.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.ltr.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.rtl.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-.ltr.test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.rtl.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-.ltr.test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-.ltr.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-.ltr.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-.ltr.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.ltr.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.ltr.test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    .rtl.test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    .ltr.test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-.ltr:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html.rtl .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-.rtl.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-.ltr.test51, .rtl.test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] Prefixes Tests:  prefixSelectorTransformer with default prefixes 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] > .test1, [dir="rtl"] > .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] > .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] > .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] > .test5,
-[dir="rtl"] > .test6,
-[dir="rtl"] > .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] > .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] > .test9, [dir="rtl"] > .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] > .test11:hover,
-[dir="rtl"] > .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] > .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] > .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] > .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] > .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] > .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] > .test24 {
-    border: 1px solid #000;
-}
-
-[dir] > .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] > .test25, [dir="rtl"] > .test26-ltr, [dir="rtl"] > .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] > .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] > .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] > .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] > .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] > .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] > .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] > .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] > .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] > .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] > .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] > .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] > .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] > .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] > .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] > .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] > .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] > .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] > .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] > .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] > .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] > .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] > .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
diff --git a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot
new file mode 100644
index 00000000..1487113a
--- /dev/null
+++ b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot
@@ -0,0 +1,660 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Prefixes Tests:  custom ltrPrefix and rtlPrefix properties as arrays 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+.ltr .test1, .left-to-right .test1, .ltr .test2, .left-to-right .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+.rtl .test1, .right-to-left .test1, .rtl .test2, .right-to-left .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+.ltr .test3, .left-to-right .test3 {
+    direction: ltr;
+}
+
+.rtl .test3, .right-to-left .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.ltr .test4, .left-to-right .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+.rtl .test4, .right-to-left .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+.ltr .test5,
+.left-to-right .test5,
+.ltr .test6,
+.left-to-right .test6,
+.ltr .test7,
+.left-to-right .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+.rtl .test5,
+.right-to-left .test5,
+.rtl .test6,
+.right-to-left .test6,
+.rtl .test7,
+.right-to-left .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+.ltr .test8, .left-to-right .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.rtl .test8, .right-to-left .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+.ltr .test9, .left-to-right .test9, .ltr .test10, .left-to-right .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+.rtl .test9, .right-to-left .test9, .rtl .test10, .right-to-left .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+.ltr .test11:hover,
+.left-to-right .test11:hover,
+.ltr .test11:active,
+.left-to-right .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+.rtl .test11:hover,
+.right-to-left .test11:hover,
+.rtl .test11:active,
+.right-to-left .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.ltr .test16:hover, .left-to-right .test16:hover {
+    padding-right: 20px;
+}
+
+.rtl .test16:hover, .right-to-left .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+.ltr .test18, .left-to-right .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+.rtl .test18, .right-to-left .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+.ltr .test18::after, .left-to-right .test18::after {
+    left: 10px;
+}
+
+.rtl .test18::after, .right-to-left .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    .ltr .test18, .left-to-right .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    .rtl .test18, .right-to-left .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.ltr .test22, .left-to-right .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+.rtl .test22, .right-to-left .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+.ltr .test24, .left-to-right .test24 {
+    border: 1px solid #FFF;
+}
+
+.rtl .test24, .right-to-left .test24 {
+    border: 1px solid #000;
+}
+
+.ltr .test24, .left-to-right .test24, .rtl .test24, .right-to-left .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.ltr .test25, .left-to-right .test25, .ltr .test26-ltr, .left-to-right .test26-ltr, .ltr .test27, .left-to-right .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.rtl .test25, .right-to-left .test25, .rtl .test26-ltr, .right-to-left .test26-ltr, .rtl .test27, .right-to-left .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.ltr .test26-rtl, .left-to-right .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.rtl .test26-rtl, .right-to-left .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.ltr .test28-right::before, .left-to-right .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.rtl .test28-right::before, .right-to-left .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.ltr .testleft30, .left-to-right .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.rtl .testleft30, .right-to-left .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+.ltr .test31, .left-to-right .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+.rtl .test31, .right-to-left .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.ltr .test32, .left-to-right .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+.rtl .test32, .right-to-left .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+.ltr .test33, .left-to-right .test33 {
+    left: 10px;
+}
+
+.rtl .test33, .right-to-left .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl .example34, .right-to-left .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl .example35, .right-to-left .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr .test36, .left-to-right .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.rtl .test36, .right-to-left .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr .test37, .left-to-right .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+.rtl .test37, .right-to-left .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr .test38, .left-to-right .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.rtl .test38, .right-to-left .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+.ltr .test39, .left-to-right .test39 {
+    margin-right: 10px;
+}
+
+.rtl .test39, .right-to-left .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+.ltr .test40, .left-to-right .test40 {
+    right: 5px;
+}
+
+.rtl .test40, .right-to-left .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+.ltr .test41, .left-to-right .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl .test41, .right-to-left .test41 {
+    left: 10px;
+}
+
+.ltr .test42, .left-to-right .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.ltr .test43, .left-to-right .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    .ltr .test46, .left-to-right .test46 {
+        text-align: left;
+    }
+
+    .rtl .test46, .right-to-left .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    .ltr .test48, .left-to-right .test48 {
+        text-align: right;
+    }
+
+    .rtl .test48, .right-to-left .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+.ltr:root, .left-to-right:root {
+    text-align: right;
+}
+
+.rtl:root, .right-to-left:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html.ltr .test50, html.left-to-right .test50 {
+    left: 10px;
+}
+
+html.rtl .test50, html.right-to-left .test50 {
+    right: 10px;
+}
+
+.ltr .test51, .left-to-right .test51 {
+    border-left: 1px solid #FFF;
+}
+
+.rtl .test51, .right-to-left .test51 {
+    border-right: 1px solid #FFF;
+}
+
+.ltr .test51, .left-to-right .test51, .rtl .test51, .right-to-left .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot
new file mode 100644
index 00000000..0583ab0c
--- /dev/null
+++ b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot
@@ -0,0 +1,650 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Prefixes Tests:  custom ltrPrefix and rtlPrefix 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+.ltr .test1, .ltr .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+.rtl .test1, .rtl .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+.ltr .test3 {
+    direction: ltr;
+}
+
+.rtl .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.ltr .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+.rtl .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+.ltr .test5,
+.ltr .test6,
+.ltr .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+.rtl .test5,
+.rtl .test6,
+.rtl .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+.ltr .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.rtl .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+.ltr .test9, .ltr .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+.rtl .test9, .rtl .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+.ltr .test11:hover,
+.ltr .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+.rtl .test11:hover,
+.rtl .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.ltr .test16:hover {
+    padding-right: 20px;
+}
+
+.rtl .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+.ltr .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+.rtl .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+.ltr .test18::after {
+    left: 10px;
+}
+
+.rtl .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    .ltr .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    .rtl .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.ltr .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+.rtl .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+.ltr .test24 {
+    border: 1px solid #FFF;
+}
+
+.rtl .test24 {
+    border: 1px solid #000;
+}
+
+.ltr .test24, .rtl .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.ltr .test25, .ltr .test26-ltr, .ltr .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.rtl .test25, .rtl .test26-ltr, .rtl .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.ltr .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.rtl .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.ltr .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.rtl .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.ltr .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.rtl .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+.ltr .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+.rtl .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.ltr .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+.rtl .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+.ltr .test33 {
+    left: 10px;
+}
+
+.rtl .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.rtl .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+.rtl .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.rtl .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+.ltr .test39 {
+    margin-right: 10px;
+}
+
+.rtl .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+.ltr .test40 {
+    right: 5px;
+}
+
+.rtl .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+.ltr .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl .test41 {
+    left: 10px;
+}
+
+.ltr .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.ltr .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    .ltr .test46 {
+        text-align: left;
+    }
+
+    .rtl .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    .ltr .test48 {
+        text-align: right;
+    }
+
+    .rtl .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+.ltr:root {
+    text-align: right;
+}
+
+.rtl:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html.ltr .test50 {
+    left: 10px;
+}
+
+html.rtl .test50 {
+    right: 10px;
+}
+
+.ltr .test51 {
+    border-left: 1px solid #FFF;
+}
+
+.rtl .test51 {
+    border-right: 1px solid #FFF;
+}
+
+.ltr .test51, .rtl .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot b/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot
new file mode 100644
index 00000000..bcc8a522
--- /dev/null
+++ b/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot
@@ -0,0 +1,672 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Prefixes Tests:  custom ltrPrefix, rtlPrefix, and bothPrefix properties as arrays and processUrls: true 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+.ltr .test1, .left-to-right .test1, .ltr .test2, .left-to-right .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+.rtl .test1, .right-to-left .test1, .rtl .test2, .right-to-left .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.ltr .test1, .left-to-right .test1, .rtl .test1, .right-to-left .test1, .ltr .test2, .left-to-right .test2, .rtl .test2, .right-to-left .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+.ltr .test3, .left-to-right .test3 {
+    direction: ltr;
+}
+
+.rtl .test3, .right-to-left .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.ltr .test4, .left-to-right .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+.rtl .test4, .right-to-left .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+.ltr .test5,
+.left-to-right .test5,
+.ltr .test6,
+.left-to-right .test6,
+.ltr .test7,
+.left-to-right .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+.rtl .test5,
+.right-to-left .test5,
+.rtl .test6,
+.right-to-left .test6,
+.rtl .test7,
+.right-to-left .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+.ltr .test8, .left-to-right .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.rtl .test8, .right-to-left .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+.ltr .test9, .left-to-right .test9, .ltr .test10, .left-to-right .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+.rtl .test9, .right-to-left .test9, .rtl .test10, .right-to-left .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+.ltr .test11:hover,
+.left-to-right .test11:hover,
+.ltr .test11:active,
+.left-to-right .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+.rtl .test11:hover,
+.right-to-left .test11:hover,
+.rtl .test11:active,
+.right-to-left .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.ltr .test16:hover, .left-to-right .test16:hover {
+    padding-right: 20px;
+}
+
+.rtl .test16:hover, .right-to-left .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+.ltr .test18, .left-to-right .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+.rtl .test18, .right-to-left .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+.ltr .test18::after, .left-to-right .test18::after {
+    left: 10px;
+}
+
+.rtl .test18::after, .right-to-left .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    .ltr .test18, .left-to-right .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    .rtl .test18, .right-to-left .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.ltr .test22, .left-to-right .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+.rtl .test22, .right-to-left .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+.ltr .test24, .left-to-right .test24 {
+    border: 1px solid #FFF;
+}
+
+.rtl .test24, .right-to-left .test24 {
+    border: 1px solid #000;
+}
+
+.ltr .test24, .left-to-right .test24, .rtl .test24, .right-to-left .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.ltr .test25, .left-to-right .test25, .ltr .test26-ltr, .left-to-right .test26-ltr, .ltr .test27, .left-to-right .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.rtl .test25, .right-to-left .test25, .rtl .test26-ltr, .right-to-left .test26-ltr, .rtl .test27, .right-to-left .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.ltr .test26-rtl, .left-to-right .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.rtl .test26-rtl, .right-to-left .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.ltr .test28-left::before, .left-to-right .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.rtl .test28-left::before, .right-to-left .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.ltr .test28-right::before, .left-to-right .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.rtl .test28-right::before, .right-to-left .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.ltr .testleft30, .left-to-right .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.rtl .testleft30, .right-to-left .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.ltr .testright30, .left-to-right .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.rtl .testright30, .right-to-left .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+.ltr .test31, .left-to-right .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+.rtl .test31, .right-to-left .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.ltr .test32, .left-to-right .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+.rtl .test32, .right-to-left .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+.ltr .test33, .left-to-right .test33 {
+    left: 10px;
+}
+
+.rtl .test33, .right-to-left .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl .example34, .right-to-left .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl .example35, .right-to-left .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr .test36, .left-to-right .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.rtl .test36, .right-to-left .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr .test37, .left-to-right .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+.rtl .test37, .right-to-left .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr .test38, .left-to-right .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.rtl .test38, .right-to-left .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+.ltr .test39, .left-to-right .test39 {
+    margin-right: 10px;
+}
+
+.rtl .test39, .right-to-left .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+.ltr .test40, .left-to-right .test40 {
+    right: 5px;
+}
+
+.rtl .test40, .right-to-left .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+.ltr .test41, .left-to-right .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl .test41, .right-to-left .test41 {
+    left: 10px;
+}
+
+.ltr .test42, .left-to-right .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.ltr .test43, .left-to-right .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    .ltr .test46, .left-to-right .test46 {
+        text-align: left;
+    }
+
+    .rtl .test46, .right-to-left .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    .ltr .test48, .left-to-right .test48 {
+        text-align: right;
+    }
+
+    .rtl .test48, .right-to-left .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+.ltr:root, .left-to-right:root {
+    text-align: right;
+}
+
+.rtl:root, .right-to-left:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html.ltr .test50, html.left-to-right .test50 {
+    left: 10px;
+}
+
+html.rtl .test50, html.right-to-left .test50 {
+    right: 10px;
+}
+
+.ltr .test51, .left-to-right .test51 {
+    border-left: 1px solid #FFF;
+}
+
+.rtl .test51, .right-to-left .test51 {
+    border-right: 1px solid #FFF;
+}
+
+.ltr .test51, .left-to-right .test51, .rtl .test51, .right-to-left .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot
new file mode 100644
index 00000000..b6309f41
--- /dev/null
+++ b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot
@@ -0,0 +1,650 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Prefixes Tests:  prefixSelectorTransformer with custom ltrPrefix and rtlPrefix 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+.ltr.test1, .ltr.test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+.rtl.test1, .rtl.test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+.ltr.test3 {
+    direction: ltr;
+}
+
+.rtl.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.ltr.test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+.rtl.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+.ltr.test5,
+.ltr.test6,
+.ltr.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+.rtl.test5,
+.rtl.test6,
+.rtl.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+.ltr.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.rtl.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+.ltr.test9, .ltr.test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+.rtl.test9, .rtl.test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+.ltr.test11:hover,
+.ltr.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+.rtl.test11:hover,
+.rtl.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.ltr.test16:hover {
+    padding-right: 20px;
+}
+
+.rtl.test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+.ltr.test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+.rtl.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+.ltr.test18::after {
+    left: 10px;
+}
+
+.rtl.test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    .ltr.test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    .rtl.test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.ltr.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+.rtl.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+.ltr.test24 {
+    border: 1px solid #FFF;
+}
+
+.rtl.test24 {
+    border: 1px solid #000;
+}
+
+.ltr.test24, .rtl.test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.ltr.test25, .ltr.test26-ltr, .ltr.test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.rtl.test25, .rtl.test26-ltr, .rtl.test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.ltr.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.rtl.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.ltr.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.rtl.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.ltr.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.rtl.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+.ltr.test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+.rtl.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.ltr.test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+.rtl.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+.ltr.test33 {
+    left: 10px;
+}
+
+.rtl.test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr.test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.rtl.test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr.test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+.rtl.test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+.ltr.test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.rtl.test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+.ltr.test39 {
+    margin-right: 10px;
+}
+
+.rtl.test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+.ltr.test40 {
+    right: 5px;
+}
+
+.rtl.test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+.ltr.test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl.test41 {
+    left: 10px;
+}
+
+.ltr.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.ltr.test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    .ltr.test46 {
+        text-align: left;
+    }
+
+    .rtl.test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    .ltr.test48 {
+        text-align: right;
+    }
+
+    .rtl.test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+.ltr:root {
+    text-align: right;
+}
+
+.rtl:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html.ltr .test50 {
+    left: 10px;
+}
+
+html.rtl .test50 {
+    right: 10px;
+}
+
+.ltr.test51 {
+    border-left: 1px solid #FFF;
+}
+
+.rtl.test51 {
+    border-right: 1px solid #FFF;
+}
+
+.ltr.test51, .rtl.test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot
new file mode 100644
index 00000000..2d96d4d9
--- /dev/null
+++ b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot
@@ -0,0 +1,650 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] Prefixes Tests:  prefixSelectorTransformer with default prefixes 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] > .test1, [dir="ltr"] > .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] > .test1, [dir="rtl"] > .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] > .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] > .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] > .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] > .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] > .test5,
+[dir="ltr"] > .test6,
+[dir="ltr"] > .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] > .test5,
+[dir="rtl"] > .test6,
+[dir="rtl"] > .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] > .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] > .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] > .test9, [dir="ltr"] > .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] > .test9, [dir="rtl"] > .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] > .test11:hover,
+[dir="ltr"] > .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] > .test11:hover,
+[dir="rtl"] > .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] > .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] > .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] > .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] > .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] > .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] > .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] > .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] > .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] > .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] > .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] > .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] > .test24 {
+    border: 1px solid #000;
+}
+
+[dir] > .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] > .test25, [dir="ltr"] > .test26-ltr, [dir="ltr"] > .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] > .test25, [dir="rtl"] > .test26-ltr, [dir="rtl"] > .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] > .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] > .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] > .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] > .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] > .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] > .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] > .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] > .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] > .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] > .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] > .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] > .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] > .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] > .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] > .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] > .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] > .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] > .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] > .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] > .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] > .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] > .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] > .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] > .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] > .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] > .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] > .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] > .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] > .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] > .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] > .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] > .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] > .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] > .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] > .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot
new file mode 100644
index 00000000..b65ee09f
--- /dev/null
+++ b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Prefixes Tests:  custom ltrPrefix and rtlPrefix properties as arrays 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot
new file mode 100644
index 00000000..9bad61a0
--- /dev/null
+++ b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Prefixes Tests:  custom ltrPrefix and rtlPrefix 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot b/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot
new file mode 100644
index 00000000..bf4fdf05
--- /dev/null
+++ b/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Prefixes Tests:  custom ltrPrefix, rtlPrefix, and bothPrefix properties as arrays and processUrls: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot
new file mode 100644
index 00000000..e5282c94
--- /dev/null
+++ b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Prefixes Tests:  prefixSelectorTransformer with custom ltrPrefix and rtlPrefix 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot
new file mode 100644
index 00000000..6f9c6703
--- /dev/null
+++ b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] Prefixes Tests:  prefixSelectorTransformer with default prefixes 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot
new file mode 100644
index 00000000..17733644
--- /dev/null
+++ b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot
@@ -0,0 +1,607 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Prefixes Tests:  custom ltrPrefix and rtlPrefix properties as arrays 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+.rtl .test1, .right-to-left .test1, .rtl .test2, .right-to-left .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+.rtl .test3, .right-to-left .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.rtl .test4, .right-to-left .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+.rtl .test5,
+.right-to-left .test5,
+.rtl .test6,
+.right-to-left .test6,
+.rtl .test7,
+.right-to-left .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+.rtl .test8, .right-to-left .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+.rtl .test9, .right-to-left .test9, .rtl .test10, .right-to-left .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+.rtl .test11:hover,
+.right-to-left .test11:hover,
+.rtl .test11:active,
+.right-to-left .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+.rtl .test16:hover, .right-to-left .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+.rtl .test18, .right-to-left .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+.rtl .test18::after, .right-to-left .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    .rtl .test18, .right-to-left .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+.rtl .test22, .right-to-left .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+.rtl .test24, .right-to-left .test24 {
+    border: 1px solid #000;
+}
+
+.ltr .test24, .left-to-right .test24, .rtl .test24, .right-to-left .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.rtl .test25, .right-to-left .test25, .rtl .test26-ltr, .right-to-left .test26-ltr, .rtl .test27, .right-to-left .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.rtl .test26-rtl, .right-to-left .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.rtl .test28-right::before, .right-to-left .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.rtl .testleft30, .right-to-left .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+.rtl .test31, .right-to-left .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.rtl .test32, .right-to-left .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+.rtl .test33, .right-to-left .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl .example34, .right-to-left .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl .example35, .right-to-left .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.ltr .test36, .left-to-right .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.rtl .test37, .right-to-left .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+.ltr .test37, .left-to-right .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.rtl .test38, .right-to-left .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+.ltr .test38, .left-to-right .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+.ltr .test39, .left-to-right .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+.ltr .test40, .left-to-right .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+.ltr .test41, .left-to-right .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.ltr .test42, .left-to-right .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.ltr .test43, .left-to-right .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    .rtl .test46, .right-to-left .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    .ltr .test48, .left-to-right .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+.ltr:root, .left-to-right:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html.rtl .test50, html.right-to-left .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+.rtl .test51, .right-to-left .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+.ltr .test51, .left-to-right .test51, .rtl .test51, .right-to-left .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot
new file mode 100644
index 00000000..125d646a
--- /dev/null
+++ b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot
@@ -0,0 +1,602 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Prefixes Tests:  custom ltrPrefix and rtlPrefix 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+.rtl .test1, .rtl .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+.rtl .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.rtl .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+.rtl .test5,
+.rtl .test6,
+.rtl .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+.rtl .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+.rtl .test9, .rtl .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+.rtl .test11:hover,
+.rtl .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+.rtl .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+.rtl .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+.rtl .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    .rtl .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+.rtl .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+.rtl .test24 {
+    border: 1px solid #000;
+}
+
+.ltr .test24, .rtl .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.rtl .test25, .rtl .test26-ltr, .rtl .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.rtl .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.rtl .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.rtl .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+.rtl .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.rtl .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+.rtl .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.ltr .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.rtl .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+.ltr .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.rtl .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+.ltr .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+.ltr .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+.ltr .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+.ltr .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.ltr .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.ltr .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    .rtl .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    .ltr .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+.ltr:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html.rtl .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+.rtl .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+.ltr .test51, .rtl .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot b/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot
new file mode 100644
index 00000000..59604399
--- /dev/null
+++ b/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot
@@ -0,0 +1,619 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Prefixes Tests:  custom ltrPrefix, rtlPrefix, and bothPrefix properties as arrays and processUrls: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+.rtl .test1, .right-to-left .test1, .rtl .test2, .right-to-left .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.ltr .test1, .left-to-right .test1, .rtl .test1, .right-to-left .test1, .ltr .test2, .left-to-right .test2, .rtl .test2, .right-to-left .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+.rtl .test3, .right-to-left .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.rtl .test4, .right-to-left .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+.rtl .test5,
+.right-to-left .test5,
+.rtl .test6,
+.right-to-left .test6,
+.rtl .test7,
+.right-to-left .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+.rtl .test8, .right-to-left .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+.rtl .test9, .right-to-left .test9, .rtl .test10, .right-to-left .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+.rtl .test11:hover,
+.right-to-left .test11:hover,
+.rtl .test11:active,
+.right-to-left .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+.rtl .test16:hover, .right-to-left .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+.rtl .test18, .right-to-left .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+.rtl .test18::after, .right-to-left .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    .rtl .test18, .right-to-left .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+.rtl .test22, .right-to-left .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+.rtl .test24, .right-to-left .test24 {
+    border: 1px solid #000;
+}
+
+.ltr .test24, .left-to-right .test24, .rtl .test24, .right-to-left .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.rtl .test25, .right-to-left .test25, .rtl .test26-ltr, .right-to-left .test26-ltr, .rtl .test27, .right-to-left .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.rtl .test26-rtl, .right-to-left .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.rtl .test28-left::before, .right-to-left .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.rtl .test28-right::before, .right-to-left .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.rtl .testleft30, .right-to-left .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.rtl .testright30, .right-to-left .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+.rtl .test31, .right-to-left .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.rtl .test32, .right-to-left .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+.rtl .test33, .right-to-left .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl .example34, .right-to-left .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl .example35, .right-to-left .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.ltr .test36, .left-to-right .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.rtl .test37, .right-to-left .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+.ltr .test37, .left-to-right .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.rtl .test38, .right-to-left .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+.ltr .test38, .left-to-right .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+.ltr .test39, .left-to-right .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+.ltr .test40, .left-to-right .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+.ltr .test41, .left-to-right .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.ltr .test42, .left-to-right .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.ltr .test43, .left-to-right .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    .rtl .test46, .right-to-left .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    .ltr .test48, .left-to-right .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+.ltr:root, .left-to-right:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html.rtl .test50, html.right-to-left .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+.rtl .test51, .right-to-left .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+.ltr .test51, .left-to-right .test51, .rtl .test51, .right-to-left .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot
new file mode 100644
index 00000000..57f09930
--- /dev/null
+++ b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot
@@ -0,0 +1,602 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Prefixes Tests:  prefixSelectorTransformer with custom ltrPrefix and rtlPrefix 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+.rtl.test1, .rtl.test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+.rtl.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.rtl.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+.rtl.test5,
+.rtl.test6,
+.rtl.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+.rtl.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+.rtl.test9, .rtl.test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+.rtl.test11:hover,
+.rtl.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+.rtl.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+.rtl.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+.rtl.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    .rtl.test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+.rtl.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+.rtl.test24 {
+    border: 1px solid #000;
+}
+
+.ltr.test24, .rtl.test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.rtl.test25, .rtl.test26-ltr, .rtl.test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.rtl.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.rtl.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.rtl.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+.rtl.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.rtl.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+.rtl.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.rtl.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.rtl.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.ltr.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.rtl.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+.ltr.test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.rtl.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+.ltr.test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+.ltr.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+.ltr.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+.ltr.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.ltr.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.ltr.test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    .rtl.test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    .ltr.test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+.ltr:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html.rtl .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+.rtl.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+.ltr.test51, .rtl.test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot
new file mode 100644
index 00000000..377d20d2
--- /dev/null
+++ b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot
@@ -0,0 +1,602 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] Prefixes Tests:  prefixSelectorTransformer with default prefixes 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] > .test1, [dir="rtl"] > .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] > .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] > .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] > .test5,
+[dir="rtl"] > .test6,
+[dir="rtl"] > .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] > .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] > .test9, [dir="rtl"] > .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] > .test11:hover,
+[dir="rtl"] > .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] > .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] > .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] > .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] > .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] > .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] > .test24 {
+    border: 1px solid #000;
+}
+
+[dir] > .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] > .test25, [dir="rtl"] > .test26-ltr, [dir="rtl"] > .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] > .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] > .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] > .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] > .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] > .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] > .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] > .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] > .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] > .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] > .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] > .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] > .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] > .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] > .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] > .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] > .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] > .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] > .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] > .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] > .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] > .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] > .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names.test.ts.snap b/tests/__snapshots__/rule-names.test.ts.snap
deleted file mode 100644
index bd9642da..00000000
--- a/tests/__snapshots__/rule-names.test.ts.snap
+++ /dev/null
@@ -1,8845 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true with custom string map 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir="rtl"] .test27-prev {
-    background-image: url("/icons/icon-n.png")
-}
-
-[dir="ltr"] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-[dir="rtl"] .test27-next {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true with custom string map and greedy: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir="rtl"] .test27-prev {
-    background-image: url("/icons/icon-n.png")
-}
-
-[dir="ltr"] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-[dir="rtl"] .test27-next {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    [dir="ltr"] .test47left {
-        content: "\\f007";
-    }
-
-    [dir="rtl"] .test47left {
-        content: "\\f010";
-    }
-
-    [dir="ltr"] .test47right {
-        content: "\\f010";
-    }
-
-    [dir="rtl"] .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true with custom string map, source rtl and greedy: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: ltr;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: 10px;
-}
-
-[dir="ltr"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="rtl"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir="ltr"] .test27-prev {
-    background-image: url("/icons/icon-n.png")
-}
-
-[dir="rtl"] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-[dir="ltr"] .test27-next {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test33 {
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    [dir="rtl"] .test47left {
-        content: "\\f007";
-    }
-
-    [dir="ltr"] .test47left {
-        content: "\\f010";
-    }
-
-    [dir="rtl"] .test47right {
-        content: "\\f010";
-    }
-
-    [dir="ltr"] .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="rtl"] .test50 {
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    right: 10px;
-}
-
-[dir="rtl"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true, greedy: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    [dir="ltr"] .test47left {
-        content: "\\f007";
-    }
-
-    [dir="rtl"] .test47left {
-        content: "\\f010";
-    }
-
-    [dir="ltr"] .test47right {
-        content: "\\f010";
-    }
-
-    [dir="rtl"] .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true, with source rtl greedy: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    color: #666;
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: ltr;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: 10px;
-}
-
-[dir="ltr"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="rtl"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test33 {
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    [dir="rtl"] .test47left {
-        content: "\\f007";
-    }
-
-    [dir="ltr"] .test47left {
-        content: "\\f010";
-    }
-
-    [dir="rtl"] .test47right {
-        content: "\\f010";
-    }
-
-    [dir="ltr"] .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="rtl"] .test50 {
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    right: 10px;
-}
-
-[dir="rtl"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true with custom string map 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true with custom string map and greedy: true 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-
-    .test47left {
-        content: "\\f010";
-    }
-
-    .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true with custom string map, source rtl and greedy: true 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-
-    .test47left {
-        content: "\\f010";
-    }
-
-    .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true, greedy: true 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-
-    .test47left {
-        content: "\\f010";
-    }
-
-    .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true, with source rtl greedy: true 1`] = `
-".test1, .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-
-    .test47left {
-        content: "\\f010";
-    }
-
-    .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true with custom string map 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir="rtl"] .test27-prev {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-[dir="rtl"] .test27-next {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true with custom string map and greedy: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir="rtl"] .test27-prev {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-[dir="rtl"] .test27-next {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    [dir="rtl"] .test47left {
-        content: "\\f010";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-
-    [dir="rtl"] .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true with custom string map, source rtl and greedy: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir="ltr"] .test27-prev {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-[dir="ltr"] .test27-next {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    [dir="ltr"] .test47left {
-        content: "\\f010";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-
-    [dir="ltr"] .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true, greedy: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    [dir="rtl"] .test47left {
-        content: "\\f010";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-
-    [dir="rtl"] .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true, with source rtl greedy: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    [dir="ltr"] .test47left {
-        content: "\\f010";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-
-    [dir="ltr"] .test47right {
-        content: "\\f007";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot
new file mode 100644
index 00000000..ef82beb9
--- /dev/null
+++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot
@@ -0,0 +1,658 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true, greedy: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    [dir="ltr"] .test47left {
+        content: "\\f007";
+    }
+
+    [dir="rtl"] .test47left {
+        content: "\\f010";
+    }
+
+    [dir="ltr"] .test47right {
+        content: "\\f010";
+    }
+
+    [dir="rtl"] .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot
new file mode 100644
index 00000000..97ec68d3
--- /dev/null
+++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot
@@ -0,0 +1,658 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true, with source rtl greedy: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: ltr;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: 10px;
+}
+
+[dir="ltr"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="rtl"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test33 {
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    [dir="rtl"] .test47left {
+        content: "\\f007";
+    }
+
+    [dir="ltr"] .test47left {
+        content: "\\f010";
+    }
+
+    [dir="rtl"] .test47right {
+        content: "\\f010";
+    }
+
+    [dir="ltr"] .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="rtl"] .test50 {
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    right: 10px;
+}
+
+[dir="rtl"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot
new file mode 100644
index 00000000..59417897
--- /dev/null
+++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot
@@ -0,0 +1,666 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true with custom string map and greedy: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir="rtl"] .test27-prev {
+    background-image: url("/icons/icon-n.png")
+}
+
+[dir="ltr"] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+[dir="rtl"] .test27-next {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    [dir="ltr"] .test47left {
+        content: "\\f007";
+    }
+
+    [dir="rtl"] .test47left {
+        content: "\\f010";
+    }
+
+    [dir="ltr"] .test47right {
+        content: "\\f010";
+    }
+
+    [dir="rtl"] .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot
new file mode 100644
index 00000000..8af91686
--- /dev/null
+++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot
@@ -0,0 +1,666 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true with custom string map, source rtl and greedy: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: ltr;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: 10px;
+}
+
+[dir="ltr"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="rtl"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir="ltr"] .test27-prev {
+    background-image: url("/icons/icon-n.png")
+}
+
+[dir="rtl"] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+[dir="ltr"] .test27-next {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test33 {
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    [dir="rtl"] .test47left {
+        content: "\\f007";
+    }
+
+    [dir="ltr"] .test47left {
+        content: "\\f010";
+    }
+
+    [dir="rtl"] .test47right {
+        content: "\\f010";
+    }
+
+    [dir="ltr"] .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="rtl"] .test50 {
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    right: 10px;
+}
+
+[dir="rtl"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot
new file mode 100644
index 00000000..7308dda5
--- /dev/null
+++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot
@@ -0,0 +1,658 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true with custom string map 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir="rtl"] .test27-prev {
+    background-image: url("/icons/icon-n.png")
+}
+
+[dir="ltr"] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+[dir="rtl"] .test27-next {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot
new file mode 100644
index 00000000..cf9eea5a
--- /dev/null
+++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot
@@ -0,0 +1,650 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] processRuleNames Tests:  processRuleNames: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot
new file mode 100644
index 00000000..c4dd0920
--- /dev/null
+++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot
@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true, greedy: true 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+
+    .test47left {
+        content: "\\f010";
+    }
+
+    .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot
new file mode 100644
index 00000000..8a354bef
--- /dev/null
+++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot
@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true, with source rtl greedy: true 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+
+    .test47left {
+        content: "\\f010";
+    }
+
+    .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot
new file mode 100644
index 00000000..b81f31a6
--- /dev/null
+++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot
@@ -0,0 +1,215 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true with custom string map and greedy: true 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+
+    .test47left {
+        content: "\\f010";
+    }
+
+    .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot
new file mode 100644
index 00000000..64b12e47
--- /dev/null
+++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot
@@ -0,0 +1,215 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true with custom string map, source rtl and greedy: true 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+
+    .test47left {
+        content: "\\f010";
+    }
+
+    .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot
new file mode 100644
index 00000000..9a493f93
--- /dev/null
+++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot
@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true with custom string map 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot
new file mode 100644
index 00000000..b858cba5
--- /dev/null
+++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] processRuleNames Tests:  processRuleNames: true 1`] = `
+".test1, .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot
new file mode 100644
index 00000000..05702f61
--- /dev/null
+++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot
@@ -0,0 +1,610 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true, greedy: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    [dir="rtl"] .test47left {
+        content: "\\f010";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+
+    [dir="rtl"] .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot
new file mode 100644
index 00000000..c51131bb
--- /dev/null
+++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot
@@ -0,0 +1,604 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true, with source rtl greedy: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    [dir="ltr"] .test47left {
+        content: "\\f010";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+
+    [dir="ltr"] .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot
new file mode 100644
index 00000000..20de4e25
--- /dev/null
+++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot
@@ -0,0 +1,618 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true with custom string map and greedy: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir="rtl"] .test27-prev {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+[dir="rtl"] .test27-next {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    [dir="rtl"] .test47left {
+        content: "\\f010";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+
+    [dir="rtl"] .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot
new file mode 100644
index 00000000..e8743000
--- /dev/null
+++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot
@@ -0,0 +1,612 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true with custom string map, source rtl and greedy: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir="ltr"] .test27-prev {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+[dir="ltr"] .test27-next {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    [dir="ltr"] .test47left {
+        content: "\\f010";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+
+    [dir="ltr"] .test47right {
+        content: "\\f007";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot
new file mode 100644
index 00000000..3737e07b
--- /dev/null
+++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot
@@ -0,0 +1,610 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true with custom string map 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir="rtl"] .test27-prev {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+[dir="rtl"] .test27-next {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot
new file mode 100644
index 00000000..203db44a
--- /dev/null
+++ b/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot
@@ -0,0 +1,602 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] processRuleNames Tests:  processRuleNames: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix.test.ts.snap b/tests/__snapshots__/safe-prefix.test.ts.snap
deleted file mode 100644
index eb6f29d5..00000000
--- a/tests/__snapshots__/safe-prefix.test.ts.snap
+++ /dev/null
@@ -1,6643 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] safeBothPrefix Option Tests:  {safeBothPrefix: true} 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir] .test1, [dir] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-}
-
-[dir] .test2 {
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-[dir] .test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-}
-
-[dir] .test4 {
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir] .test5,
-[dir] .test6,
-[dir] .test7 {
-    border: 1px solid 2px;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir] .test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-[dir] .test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-[dir] .test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    width: 100%;
-}
-
-[dir] .test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-[dir] .test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-[dir] .test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;    
-}
-
-[dir] .test32 {
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-}
-
-[dir] .test40 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-}
-
-[dir] .test52 {
-    padding-block: 1px 2px;
-}
-
-[dir] .test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processKeyFrames: true} 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir] .test1, [dir] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-}
-
-[dir] .test2 {
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-[dir] .test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-}
-
-[dir] .test4 {
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir] .test5,
-[dir] .test6,
-[dir] .test7 {
-    border: 1px solid 2px;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    animation: 5s flip-ltr 1s ease-in-out,
-               3s my-animation-ltr 6s ease-in-out;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    animation: 5s flip-rtl 1s ease-in-out,
-               3s my-animation-rtl 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip-ltr {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@keyframes flip-rtl {
-    from {
-        transform: translateX(-100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-[dir] .test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-timing-function: ease-in-out;
-}
-
-[dir="ltr"] .test19 {
-    animation-name: my-animation-ltr;
-}
-
-[dir="rtl"] .test19 {
-    animation-name: my-animation-rtl;
-}
-
-[dir] .test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-timing-function: ease;
-}
-
-[dir="ltr"] .test20 {
-    animation-name: my-animation-ltr, no-flip;
-}
-
-[dir="rtl"] .test20 {
-    animation-name: my-animation-rtl, no-flip;
-}
-
-@keyframes my-animation-ltr {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-@keyframes my-animation-rtl {
-    from {
-        right: 0%;
-    }
-
-    to {
-        right: 100%;
-    }
-}
-
-.test21 {
-    width: 100%;
-}
-
-[dir] .test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-[dir] .test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-[dir] .test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;    
-}
-
-[dir] .test32 {
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-}
-
-[dir] .test40 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip-ltr {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes normalFlip-rtl {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-[dir="ltr"] .test44 {
-    animation: 5s normalFlip-ltr 1s ease-in-out;
-}
-
-[dir="rtl"] .test44 {
-    animation: 5s normalFlip-rtl 1s ease-in-out;
-}
-
-@keyframes inversedFlip-rtl {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes inversedFlip-ltr {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-[dir="ltr"] .test45 {
-    animation: 5s inversedFlip-ltr 1s ease-in-out;
-}
-
-[dir="rtl"] .test45 {
-    animation: 5s inversedFlip-rtl 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-}
-
-[dir] .test52 {
-    padding-block: 1px 2px;
-}
-
-[dir] .test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processUrls: true} 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-}
-
-[dir] .test2 {
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-[dir] .test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-}
-
-[dir] .test4 {
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir] .test5,
-[dir] .test6,
-[dir] .test7 {
-    border: 1px solid 2px;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir] .test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-[dir] .test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-[dir] .test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    width: 100%;
-}
-
-[dir] .test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-[dir] .test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-[dir] .test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir="ltr"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="ltr"] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir] .test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;    
-}
-
-[dir] .test32 {
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-}
-
-[dir] .test40 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-}
-
-[dir] .test52 {
-    padding-block: 1px 2px;
-}
-
-[dir] .test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {source: rtl} 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir] .test1, [dir] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-}
-
-[dir] .test2 {
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-[dir] .test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: ltr;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-}
-
-[dir] .test4 {
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir] .test5,
-[dir] .test6,
-[dir] .test7 {
-    border: 1px solid 2px;
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir] .test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: 10px;
-}
-
-[dir="ltr"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-[dir] .test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-[dir] .test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    width: 100%;
-}
-
-[dir] .test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="rtl"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-[dir] .test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-[dir] .test24 {
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .test31 {
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;    
-}
-
-[dir] .test32 {
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test33 {
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-}
-
-[dir] .test40 {
-    padding: 10px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test46 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test48 {
-        cursor: wait;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="rtl"] .test50 {
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    right: 10px;
-}
-
-[dir="rtl"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-}
-
-[dir] .test52 {
-    padding-block: 1px 2px;
-}
-
-[dir] .test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: diff]] safeBothPrefix Option Tests:  {safeBothPrefix: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    text-align: center;
-}
-
-.test3 {
-    direction: rtl;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    text-align: center;
-}
-
-.test4 {
-    border-color: red;
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-    padding: 10px;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-    border: 1px solid gray;
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    padding: 10px;
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}
-
-.test52 {
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: diff]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processKeyFrames: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    text-align: center;
-}
-
-.test3 {
-    direction: rtl;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    text-align: center;
-}
-
-.test4 {
-    border-color: red;
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip-rtl 1s ease-in-out,
-               3s my-animation-rtl 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip-rtl {
-    from {
-        transform: translateX(-100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation-rtl;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation-rtl, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation-rtl {
-    from {
-        right: 0%;
-    }
-
-    to {
-        right: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-    padding: 10px;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-    border: 1px solid gray;
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    padding: 10px;
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip-rtl {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip-rtl 1s ease-in-out;
-}
-
-@keyframes inversedFlip-ltr {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip-ltr 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}
-
-.test52 {
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: diff]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processUrls: true} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    text-align: center;
-}
-
-.test3 {
-    direction: rtl;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    text-align: center;
-}
-
-.test4 {
-    border-color: red;
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-    padding: 10px;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-    border: 1px solid gray;
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    padding: 10px;
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}
-
-.test52 {
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: diff]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {source: rtl} 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    text-align: center;
-}
-
-.test3 {
-    direction: rtl;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    text-align: center;
-}
-
-.test4 {
-    border-color: red;
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-    padding: 10px;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-    border: 1px solid gray;
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    padding: 10px;
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}
-
-.test52 {
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] safeBothPrefix Option Tests:  {safeBothPrefix: true} 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir] .test1, [dir] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-}
-
-[dir] .test2 {
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-[dir] .test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-}
-
-[dir] .test4 {
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir] .test5,
-[dir] .test6,
-[dir] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir] .test9, [dir] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-}
-
-[dir] .test11:hover,
-[dir] .test11:active {
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir] .test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-[dir] .test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-[dir] .test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    width: 100%;
-}
-
-[dir] .test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-[dir] .test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-[dir] .test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;    
-}
-
-[dir] .test32 {
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir] .test39 {
-    margin-left: 10px;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-}
-
-[dir] .test40 {
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir]:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-[dir] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-}
-
-[dir] .test52 {
-    padding-block: 1px 2px;
-}
-
-[dir] .test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processKeyFrames: true} 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir] .test1, [dir] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-}
-
-[dir] .test2 {
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-[dir] .test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-}
-
-[dir] .test4 {
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir] .test5,
-[dir] .test6,
-[dir] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir] .test9, [dir] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-}
-
-[dir] .test11:hover,
-[dir] .test11:active {
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir] .test18 {
-    animation: 5s flip-ltr 1s ease-in-out,
-               3s my-animation-ltr 6s ease-in-out;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    animation: 5s flip-rtl 1s ease-in-out,
-               3s my-animation-rtl 6s ease-in-out;
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip-ltr {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@keyframes flip-rtl {
-    from {
-        transform: translateX(-100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-[dir] .test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation-ltr;
-    animation-timing-function: ease-in-out;
-}
-
-[dir="rtl"] .test19 {
-    animation-name: my-animation-rtl;
-}
-
-[dir] .test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation-ltr, no-flip;
-    animation-timing-function: ease;
-}
-
-[dir="rtl"] .test20 {
-    animation-name: my-animation-rtl, no-flip;
-}
-
-@keyframes my-animation-ltr {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-@keyframes my-animation-rtl {
-    from {
-        right: 0%;
-    }
-
-    to {
-        right: 100%;
-    }
-}
-
-.test21 {
-    width: 100%;
-}
-
-[dir] .test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-[dir] .test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-[dir] .test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;    
-}
-
-[dir] .test32 {
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir] .test39 {
-    margin-left: 10px;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-}
-
-[dir] .test40 {
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip-ltr {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes normalFlip-rtl {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test44 {
-    animation: 5s normalFlip-ltr 1s ease-in-out;
-}
-
-[dir="rtl"] .test44 {
-    animation: 5s normalFlip-rtl 1s ease-in-out;
-}
-
-@keyframes inversedFlip-rtl {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-@keyframes inversedFlip-ltr {
-    from {
-        right: 0px;
-        top: 0px;
-    }
-
-    to {
-        right: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test45 {
-    animation: 5s inversedFlip-rtl 1s ease-in-out;
-}
-
-[dir="ltr"] .test45 {
-    animation: 5s inversedFlip-ltr 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir]:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-[dir] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-}
-
-[dir] .test52 {
-    padding-block: 1px 2px;
-}
-
-[dir] .test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processUrls: true} 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir] .test1, [dir] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-}
-
-[dir] .test2 {
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-[dir] .test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-}
-
-[dir] .test4 {
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir] .test5,
-[dir] .test6,
-[dir] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir] .test9, [dir] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-}
-
-[dir] .test11:hover,
-[dir] .test11:active {
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir] .test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-[dir] .test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-[dir] .test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    width: 100%;
-}
-
-[dir] .test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-[dir] .test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-[dir] .test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir] .test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;    
-}
-
-[dir] .test32 {
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir] .test39 {
-    margin-left: 10px;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-}
-
-[dir] .test40 {
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir]:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-[dir] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-}
-
-[dir] .test52 {
-    padding-block: 1px 2px;
-}
-
-[dir] .test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {source: rtl} 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir] .test1, [dir] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-color: #FFF;
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-}
-
-[dir] .test2 {
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-[dir] .test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-}
-
-[dir] .test4 {
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir] .test5,
-[dir] .test6,
-[dir] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir] .test9, [dir] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-}
-
-[dir] .test11:hover,
-[dir] .test11:active {
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    font-size: 10px;
-}
-
-[dir] .test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir] .test18::after {
-    left: 10px;
-}
-
-[dir="ltr"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-[dir] .test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-[dir] .test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    width: 100%;
-}
-
-[dir] .test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="ltr"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-[dir] .test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-[dir] .test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir] .test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-[dir] .test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir] .test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;    
-}
-
-[dir] .test32 {
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir] .test33 {
-    left: 10px;
-}
-
-[dir="ltr"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-[dir="ltr"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir] .test39 {
-    margin-left: 10px;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-}
-
-[dir] .test40 {
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-[dir] .test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    [dir] .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir]:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir] .test50 {
-    left: 10px;
-}
-
-html[dir="ltr"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-[dir] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="ltr"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-}
-
-[dir] .test52 {
-    padding-block: 1px 2px;
-}
-
-[dir] .test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot
new file mode 100644
index 00000000..257979e3
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot
@@ -0,0 +1,736 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processKeyFrames: true} 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir] .test1, [dir] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+}
+
+[dir] .test2 {
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+[dir] .test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+}
+
+[dir] .test4 {
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir] .test5,
+[dir] .test6,
+[dir] .test7 {
+    border: 1px solid 2px;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    animation: 5s flip-ltr 1s ease-in-out,
+               3s my-animation-ltr 6s ease-in-out;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    animation: 5s flip-rtl 1s ease-in-out,
+               3s my-animation-rtl 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip-ltr {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes flip-rtl {
+    from {
+        transform: translateX(-100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+[dir] .test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-timing-function: ease-in-out;
+}
+
+[dir="ltr"] .test19 {
+    animation-name: my-animation-ltr;
+}
+
+[dir="rtl"] .test19 {
+    animation-name: my-animation-rtl;
+}
+
+[dir] .test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-timing-function: ease;
+}
+
+[dir="ltr"] .test20 {
+    animation-name: my-animation-ltr, no-flip;
+}
+
+[dir="rtl"] .test20 {
+    animation-name: my-animation-rtl, no-flip;
+}
+
+@keyframes my-animation-ltr {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+@keyframes my-animation-rtl {
+    from {
+        right: 0%;
+    }
+
+    to {
+        right: 100%;
+    }
+}
+
+.test21 {
+    width: 100%;
+}
+
+[dir] .test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+[dir] .test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+[dir] .test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;    
+}
+
+[dir] .test32 {
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+}
+
+[dir] .test40 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip-ltr {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes normalFlip-rtl {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+[dir="ltr"] .test44 {
+    animation: 5s normalFlip-ltr 1s ease-in-out;
+}
+
+[dir="rtl"] .test44 {
+    animation: 5s normalFlip-rtl 1s ease-in-out;
+}
+
+@keyframes inversedFlip-rtl {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes inversedFlip-ltr {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+[dir="ltr"] .test45 {
+    animation: 5s inversedFlip-ltr 1s ease-in-out;
+}
+
+[dir="rtl"] .test45 {
+    animation: 5s inversedFlip-rtl 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+}
+
+[dir] .test52 {
+    padding-block: 1px 2px;
+}
+
+[dir] .test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot
new file mode 100644
index 00000000..9f3eed2e
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot
@@ -0,0 +1,680 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processUrls: true} 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+}
+
+[dir] .test2 {
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+[dir] .test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+}
+
+[dir] .test4 {
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir] .test5,
+[dir] .test6,
+[dir] .test7 {
+    border: 1px solid 2px;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir] .test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+[dir] .test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+[dir] .test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    width: 100%;
+}
+
+[dir] .test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+[dir] .test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+[dir] .test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir="ltr"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="ltr"] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir] .test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;    
+}
+
+[dir] .test32 {
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+}
+
+[dir] .test40 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+}
+
+[dir] .test52 {
+    padding-block: 1px 2px;
+}
+
+[dir] .test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot
new file mode 100644
index 00000000..6a7cdf96
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot
@@ -0,0 +1,671 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {source: rtl} 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir] .test1, [dir] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+}
+
+[dir] .test2 {
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+[dir] .test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: ltr;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+}
+
+[dir] .test4 {
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir] .test5,
+[dir] .test6,
+[dir] .test7 {
+    border: 1px solid 2px;
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir] .test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: 10px;
+}
+
+[dir="ltr"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+[dir] .test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+[dir] .test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    width: 100%;
+}
+
+[dir] .test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="rtl"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+[dir] .test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+[dir] .test24 {
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .test31 {
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;    
+}
+
+[dir] .test32 {
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test33 {
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+}
+
+[dir] .test40 {
+    padding: 10px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test46 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test48 {
+        cursor: wait;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="rtl"] .test50 {
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    right: 10px;
+}
+
+[dir="rtl"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+}
+
+[dir] .test52 {
+    padding-block: 1px 2px;
+}
+
+[dir] .test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot
new file mode 100644
index 00000000..94443441
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot
@@ -0,0 +1,671 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] safeBothPrefix Option Tests:  {safeBothPrefix: true} 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir] .test1, [dir] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+}
+
+[dir] .test2 {
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+[dir] .test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+}
+
+[dir] .test4 {
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir] .test5,
+[dir] .test6,
+[dir] .test7 {
+    border: 1px solid 2px;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir] .test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+[dir] .test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+[dir] .test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    width: 100%;
+}
+
+[dir] .test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+[dir] .test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+[dir] .test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;    
+}
+
+[dir] .test32 {
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+}
+
+[dir] .test40 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+}
+
+[dir] .test52 {
+    padding-block: 1px 2px;
+}
+
+[dir] .test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot
new file mode 100644
index 00000000..f808b9de
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot
@@ -0,0 +1,330 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processKeyFrames: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    text-align: center;
+}
+
+.test3 {
+    direction: rtl;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    text-align: center;
+}
+
+.test4 {
+    border-color: red;
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip-rtl 1s ease-in-out,
+               3s my-animation-rtl 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip-rtl {
+    from {
+        transform: translateX(-100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation-rtl;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation-rtl, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation-rtl {
+    from {
+        right: 0%;
+    }
+
+    to {
+        right: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+    padding: 10px;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+    border: 1px solid gray;
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    padding: 10px;
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip-rtl {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip-rtl 1s ease-in-out;
+}
+
+@keyframes inversedFlip-ltr {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip-ltr 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}
+
+.test52 {
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot
new file mode 100644
index 00000000..c3b5cc30
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot
@@ -0,0 +1,286 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processUrls: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    text-align: center;
+}
+
+.test3 {
+    direction: rtl;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    text-align: center;
+}
+
+.test4 {
+    border-color: red;
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+    padding: 10px;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+    border: 1px solid gray;
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    padding: 10px;
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}
+
+.test52 {
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot
new file mode 100644
index 00000000..2dc80c13
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot
@@ -0,0 +1,286 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {source: rtl} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    text-align: center;
+}
+
+.test3 {
+    direction: rtl;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    text-align: center;
+}
+
+.test4 {
+    border-color: red;
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+    padding: 10px;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+    border: 1px solid gray;
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    padding: 10px;
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}
+
+.test52 {
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot
new file mode 100644
index 00000000..56509170
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot
@@ -0,0 +1,286 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] safeBothPrefix Option Tests:  {safeBothPrefix: true} 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    text-align: center;
+}
+
+.test3 {
+    direction: rtl;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    text-align: center;
+}
+
+.test4 {
+    border-color: red;
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+    padding: 10px;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+    border: 1px solid gray;
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    padding: 10px;
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}
+
+.test52 {
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot
new file mode 100644
index 00000000..60e517c1
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot
@@ -0,0 +1,722 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processKeyFrames: true} 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir] .test1, [dir] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+}
+
+[dir] .test2 {
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+[dir] .test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+}
+
+[dir] .test4 {
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir] .test5,
+[dir] .test6,
+[dir] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir] .test9, [dir] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+}
+
+[dir] .test11:hover,
+[dir] .test11:active {
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir] .test18 {
+    animation: 5s flip-ltr 1s ease-in-out,
+               3s my-animation-ltr 6s ease-in-out;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    animation: 5s flip-rtl 1s ease-in-out,
+               3s my-animation-rtl 6s ease-in-out;
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip-ltr {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes flip-rtl {
+    from {
+        transform: translateX(-100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+[dir] .test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation-ltr;
+    animation-timing-function: ease-in-out;
+}
+
+[dir="rtl"] .test19 {
+    animation-name: my-animation-rtl;
+}
+
+[dir] .test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation-ltr, no-flip;
+    animation-timing-function: ease;
+}
+
+[dir="rtl"] .test20 {
+    animation-name: my-animation-rtl, no-flip;
+}
+
+@keyframes my-animation-ltr {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+@keyframes my-animation-rtl {
+    from {
+        right: 0%;
+    }
+
+    to {
+        right: 100%;
+    }
+}
+
+.test21 {
+    width: 100%;
+}
+
+[dir] .test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+[dir] .test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+[dir] .test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;    
+}
+
+[dir] .test32 {
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir] .test39 {
+    margin-left: 10px;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+}
+
+[dir] .test40 {
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip-ltr {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes normalFlip-rtl {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test44 {
+    animation: 5s normalFlip-ltr 1s ease-in-out;
+}
+
+[dir="rtl"] .test44 {
+    animation: 5s normalFlip-rtl 1s ease-in-out;
+}
+
+@keyframes inversedFlip-rtl {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+@keyframes inversedFlip-ltr {
+    from {
+        right: 0px;
+        top: 0px;
+    }
+
+    to {
+        right: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test45 {
+    animation: 5s inversedFlip-rtl 1s ease-in-out;
+}
+
+[dir="ltr"] .test45 {
+    animation: 5s inversedFlip-ltr 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir]:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+[dir] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+}
+
+[dir] .test52 {
+    padding-block: 1px 2px;
+}
+
+[dir] .test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot
new file mode 100644
index 00000000..c029a620
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot
@@ -0,0 +1,672 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {processUrls: true} 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir] .test1, [dir] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+}
+
+[dir] .test2 {
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+[dir] .test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+}
+
+[dir] .test4 {
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir] .test5,
+[dir] .test6,
+[dir] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir] .test9, [dir] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+}
+
+[dir] .test11:hover,
+[dir] .test11:active {
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir] .test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+[dir] .test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+[dir] .test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    width: 100%;
+}
+
+[dir] .test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+[dir] .test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+[dir] .test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir] .test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;    
+}
+
+[dir] .test32 {
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir] .test39 {
+    margin-left: 10px;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+}
+
+[dir] .test40 {
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir]:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+[dir] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+}
+
+[dir] .test52 {
+    padding-block: 1px 2px;
+}
+
+[dir] .test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot
new file mode 100644
index 00000000..570a2f54
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot
@@ -0,0 +1,654 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] safeBothPrefix Option Tests:  {safeBothPrefix: true} and {source: rtl} 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir] .test1, [dir] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+}
+
+[dir] .test2 {
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+[dir] .test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+}
+
+[dir] .test4 {
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir] .test5,
+[dir] .test6,
+[dir] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir] .test9, [dir] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+}
+
+[dir] .test11:hover,
+[dir] .test11:active {
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir] .test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir] .test18::after {
+    left: 10px;
+}
+
+[dir="ltr"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+[dir] .test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+[dir] .test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    width: 100%;
+}
+
+[dir] .test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="ltr"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+[dir] .test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+[dir] .test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;    
+}
+
+[dir] .test32 {
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir] .test33 {
+    left: 10px;
+}
+
+[dir="ltr"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir] .test39 {
+    margin-left: 10px;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+}
+
+[dir] .test40 {
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir]:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir] .test50 {
+    left: 10px;
+}
+
+html[dir="ltr"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+[dir] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="ltr"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+}
+
+[dir] .test52 {
+    padding-block: 1px 2px;
+}
+
+[dir] .test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot
new file mode 100644
index 00000000..0c1d712f
--- /dev/null
+++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot
@@ -0,0 +1,660 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] safeBothPrefix Option Tests:  {safeBothPrefix: true} 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir] .test1, [dir] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-color: #FFF;
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+}
+
+[dir] .test2 {
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+[dir] .test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+}
+
+[dir] .test4 {
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir] .test5,
+[dir] .test6,
+[dir] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir] .test9, [dir] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+}
+
+[dir] .test11:hover,
+[dir] .test11:active {
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    font-size: 10px;
+}
+
+[dir] .test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+[dir] .test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+[dir] .test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    width: 100%;
+}
+
+[dir] .test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+[dir] .test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+[dir] .test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir] .test25, [dir] .test26-ltr, [dir] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir] .test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+[dir] .test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir] .test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;    
+}
+
+[dir] .test32 {
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir] .test39 {
+    margin-left: 10px;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+}
+
+[dir] .test40 {
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+[dir] .test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    [dir] .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir]:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+[dir] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+}
+
+[dir] .test52 {
+    padding-block: 1px 2px;
+}
+
+[dir] .test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map.test.ts.snap b/tests/__snapshots__/string-map.test.ts.snap
deleted file mode 100644
index fa2b26b1..00000000
--- a/tests/__snapshots__/string-map.test.ts.snap
+++ /dev/null
@@ -1,5929 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] String Map Tests:  custom no-valid string map and processUrls: true (different lenghts) 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir="ltr"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="ltr"] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] String Map Tests:  custom no-valid string map and processUrls: true (different types) 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir="ltr"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="ltr"] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] String Map Tests:  custom string map and processUrls: true 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir="ltr"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="ltr"] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: combined]] String Map Tests:  custom string map without names and processUrls: true 1`] = `
-".test1, .test2 {
-    color: #666;
-    width: 100%;
-}
-
-[dir="ltr"] .test1, [dir="ltr"] .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="ltr"] .test3 {
-    direction: ltr;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="ltr"] .test4 {
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    border: 1px solid 2px;
-    box-sizing: border-box;
-    position: absolute;
-}
-
-[dir="ltr"] .test5,
-[dir="ltr"] .test6,
-[dir="ltr"] .test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #777 #888 #999;
-    border-width: 1px 2px 3px 4px;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="ltr"] .test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="ltr"] .test9, [dir="ltr"] .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    right: 5px;
-}
-
-[dir="ltr"] .test11:hover,
-[dir="ltr"] .test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-[dir="ltr"] .test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-}
-
-[dir="ltr"] .test18 {
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="ltr"] .test18::after {
-    left: 10px;
-}
-
-[dir="rtl"] .test18::after {
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        width: 100%;
-    }
-
-    [dir="ltr"] .test18 {
-        padding: 1px 2px 3px 4px;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-[dir="ltr"] .test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    padding: 10px;
-}
-
-[dir="ltr"] .test24 {
-    border: 1px solid #FFF;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="ltr"] .test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-[dir="ltr"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="ltr"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="ltr"] .testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    border: 1px solid gray;
-}
-
-[dir="ltr"] .test31 {
-    background-image: url("/icons/icon-left.png");
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="ltr"] .test32 {
-    background-image: url("/icons/icon-left.png");    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test33 {
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test36 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test37 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test37 {
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: right;
-}
-
-[dir="rtl"] .test37 {
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: left;
-}
-
-.test38 {
-    color: #FFF;
-    width: 100%;
-}
-
-[dir="ltr"] .test38 {
-    border-left: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-[dir="rtl"] .test38 {
-    border-right: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-}
-
-.test39 {
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-right: 10px;
-}
-
-[dir="rtl"] .test39 {
-    margin-left: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-}
-
-[dir="ltr"] .test40 {
-    right: 5px;
-}
-
-[dir="rtl"] .test40 {
-    left: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-}
-
-[dir="ltr"] .test41 {
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .test41 {
-    left: 10px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test46 {
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    [dir="rtl"] .test48 {
-        text-align: left;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-[dir="rtl"]:root {
-    text-align: left;
-}
-
-html .test50 {
-    color: red;
-}
-
-html[dir="ltr"] .test50 {
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    right: 10px;
-}
-
-[dir="ltr"] .test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: diff]] String Map Tests:  custom no-valid string map and processUrls: true (different lenghts) 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] String Map Tests:  custom no-valid string map and processUrls: true (different types) 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] String Map Tests:  custom string map and processUrls: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: diff]] String Map Tests:  custom string map without names and processUrls: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-color: #FFF;
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-.test3 {
-    direction: rtl;
-}
-
-.test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-.test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-.test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test22 {
-    right: 5px;
-    left: 10px;
-}
-
-.test24 {
-    border: 1px solid #000;
-    border-bottom-color: #666;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-.test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-.test43 {
-    transform: translate(10px, 20px);
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        text-align: right;
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        text-align: right;
-    }
-}
-
-:root {
-    text-align: right;
-}
-
-html .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-    border: none;
-}"
-`;
-
-exports[`[[Mode: override]] String Map Tests:  custom no-valid string map and processUrls: true (different lenghts) 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] String Map Tests:  custom no-valid string map and processUrls: true (different types) 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] String Map Tests:  custom string map and processUrls: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
-
-exports[`[[Mode: override]] String Map Tests:  custom string map without names and processUrls: true 1`] = `
-".test1, .test2 {
-    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
-    background-position: 10px 20px;
-    border-radius: 0 2px 0 8px;
-    color: #666;
-    padding-right: 20px;
-    text-align: left;
-    transform: translate(-50%, 50%);
-    width: 100%;
-}
-
-[dir="rtl"] .test1, [dir="rtl"] .test2 {
-    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
-    background-position: right 10px top 20px;
-    border-radius: 2px 0 8px 0;
-    padding-right: 0;
-    padding-left: 20px;
-    text-align: right;
-    transform: translate(50%, 50%);
-}
-
-[dir] .test1, [dir] .test2 {
-    background-color: #FFF;
-}
-
-.test2 {
-    color: red;
-    text-align: left;
-    text-align: center;
-}
-
-/* Comment not related to rtl */
-.test3 {
-    direction: ltr;
-    margin: 1px 2px 3px;
-    padding: 10px 20px;
-    /* Property comment not related to rtl */
-    text-align: center;
-}
-
-[dir="rtl"] .test3 {
-    direction: rtl;
-}
-
-.test4 {
-    font-size: 10px;
-    border-color: red;
-    border-radius: 2px 4px 8px 16px;
-    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
-    transform-origin: 10px 20px;
-    transform: scale(0.5, 0.5);
-}
-
-[dir="rtl"] .test4 {
-    border-radius: 4px 2px 16px 8px;
-    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
-}
-
-.test5,
-.test6,
-.test7 {
-    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border: 1px solid 2px;
-    border-color: #666 #777 #888 #999;
-    box-sizing: border-box;
-    border-width: 1px 2px 3px 4px;
-    position: absolute;
-    left: 100px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test5,
-[dir="rtl"] .test6,
-[dir="rtl"] .test7 {
-    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
-    border-color: #666 #999 #888 #777;
-    border-width: 1px 4px 3px 2px;
-    left: auto;
-    right: 100px;
-    transform: translateX(-5px);
-}
-
-/*rtl:novalid:ignore*/
-.test8 {
-    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
-    display: flex;
-    padding-left: 10%;
-}
-
-[dir="rtl"] .test8 {
-    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
-}
-
-.test9, .test10 {
-    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: 5px;
-    padding: 0px 2px 3px 4px;
-}
-
-[dir="rtl"] .test9, [dir="rtl"] .test10 {
-    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-    left: auto;
-    right: 5px;
-}
-
-.test11:hover,
-.test11:active {
-    font-family: Arial, Helvetica;
-    font-size: 20px;
-    color: '#FFF';
-    transform: translateY(10px);
-    padding: 10px;
-}
-
-[dir="rtl"] .test11:hover,
-[dir="rtl"] .test11:active {
-    font-family: "Droid Arabic Kufi", Arial, Helvetica;
-    font-size: 30px;
-    color: #000;
-    transform: translateY(10px) scaleX(-1);
-    padding: 10px 20px;
-}
-
-#test12, #test13 {
-    left: 10px;
-    position: relative;
-    text-align: right;
-}
-
-.test14 .test15 span {
-    border-left-color: #777;
-    margin: 10px 20px 30px 40px;
-    transform: translate(100%, 10%);
-}
-
-.test16 {
-    padding-right: 10px;
-}
-
-.test16:hover {
-    padding-right: 20px;
-}
-
-[dir="rtl"] .test16:hover {
-    padding-right: 0;
-    padding-left: 20px;
-}
-
-.test17 {
-    cursor: pointer;
-    padding: 10px 20px 40px 10px;
-    text-align: right;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test17 {
-        cursor: wait;
-    }
-}
-
-.test18 {
-    animation: 5s flip 1s ease-in-out,
-               3s my-animation 6s ease-in-out;
-    font-size: 10px;
-    padding: 10px 20px 40px 10px;
-}
-
-[dir="rtl"] .test18 {
-    padding: 10px 10px 40px 20px;
-}
-
-.test18::after {
-    content: '';
-    left: 10px;
-    text-align: left;
-    padding-left: 5px;
-    margin-left: 15px;
-    transform: translateX(5px);
-}
-
-[dir="rtl"] .test18::after {
-    left: auto;
-    right: 10px;
-}
-
-@keyframes flip {
-    from {
-        transform: translateX(100px);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test18 {
-        padding: 1px 2px 3px 4px;
-        width: 100%;
-    }
-
-    [dir="rtl"] .test18 {
-        padding: 1px 4px 3px 2px;
-    }
-}
-
-.test19 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: my-animation;
-    animation-timing-function: ease-in-out;
-}
-
-.test20 {
-    animation-delay: 2s;
-    animation-duration: 4s;
-    animation-name: my-animation, no-flip;
-    animation-timing-function: ease;
-}
-
-@keyframes my-animation {
-    from {
-        left: 0%;
-    }
-
-    to {
-        left: 100%;
-    }
-}
-
-.test21 {
-    animation-delay: 1s;
-    animation-duration: 3s;
-    animation-name: no-flip;
-    animation-timing-function: ease-in-out;
-    width: 100%;
-}
-
-@keyframes no-flip {
-    from {
-        color: #000;
-    }
-
-    to {
-        color: #FFF;
-    }
-}
-
-/* Do not add reset values in override mode */
-.test22 {
-    left: 5px;
-    right: 10px;
-}
-
-[dir="rtl"] .test22 {
-    right: 5px;
-    left: 10px;
-}
-
-/* Do not create the RTL version if the result is the same */
-.test23 {
-    left: 10px;
-    right: 10px;
-}
-
-/* Chain override */
-.test24 {
-    border: 1px solid #FFF;
-    padding: 10px;
-}
-
-[dir="rtl"] .test24 {
-    border: 1px solid #000;
-}
-
-[dir] .test24 {
-    border-bottom-color: #666;
-}
-
-/* Automatic rename */
-.test25-ltr {
-    box-sizing: border-box;
-    color: #FFF;
-    font-size: 10px;
-    width: 100%;
-}
-
-.test25, .test26-ltr, .test27 {
-    background-image: url("/icons/icon-l.png")
-}
-
-[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
-    background-image: url("/icons/icon-r.png")
-}
-
-.test26-rtl {
-    background-image: url("/icons/icon-r.png")
-}
-
-[dir="rtl"] .test26-rtl {
-    background-image: url("/icons/icon-l.png")
-}
-
-.test27-prev {
-    background-image: url("/icons/icon-p.png")
-}
-
-.test27-next {
-    background-image: url("/icons/icon-n.png")
-}
-
-.test28 {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-}
-
-.test28-left::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-[dir="rtl"] .test28-left::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-.test28-right::before {
-    background-image: url("/folder/subfolder/arrow-right.png");
-}
-
-[dir="rtl"] .test28-right::before {
-    background-image: url("/folder/subfolder/arrow-left.png");
-}
-
-.testleft29 {
-    border: 1px solid gray;
-}
-
-.testleft30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-[dir="rtl"] .testleft30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-.testright30 {
-    background: url("/folder/subfolder/icon-rtl.png");
-}
-
-[dir="rtl"] .testright30 {
-    background: url("/folder/subfolder/icon-ltr.png");
-}
-
-.test31 {
-    background-image: url("/icons/icon-left.png");
-    border: 1px solid gray;
-}
-
-[dir="rtl"] .test31 {
-    background-image: url("/icons/icon-right.png");
-}
-
-.test32 {
-    align-items: center;
-    background-image: url("/icons/icon-left.png");
-    background-repeat: no-repeat;
-    border: 1px solid gray;    
-}
-
-[dir="rtl"] .test32 {
-    background-image: url("/icons/icon-right.png");    
-}
-
-.test33 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="rtl"] .test33 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="rtl"] .example34 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="rtl"] .example35 {
-    transform: translate(10px, 20px);
-}
-
-.test36 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="ltr"] .test36 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test37 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test37 {
-    border-left: none;
-    border-right: 1px solid #666;
-    padding: 10px 20px 10px 5px;
-}
-
-[dir="ltr"] .test37 {
-    text-align: right;
-}
-
-.test38 {
-    color: #FFF;
-    border-left: 1px solid #666;
-    padding: 10px 5px 10px 20px;
-    text-align: left;
-    width: 100%;
-}
-
-[dir="rtl"] .test38 {
-    border-left: none;
-    border-right: 1px solid #666;
-}
-
-[dir="ltr"] .test38 {
-    padding: 10px 20px 10px 5px;
-    text-align: right;
-}
-
-.test39 {
-    margin-left: 10px;
-    width: 50%;
-}
-
-[dir="ltr"] .test39 {
-    margin-left: 0;
-    margin-right: 10px;
-}
-
-.test40 {
-    color: transparent;
-    padding: 10px;
-    left: 5px;
-}
-
-[dir="ltr"] .test40 {
-    left: auto;
-    right: 5px;
-}
-
-.test41 {
-    color: #EFEFEF;
-    left: 10px;
-}
-
-[dir="ltr"] .test41 {
-    left: auto;
-    right: 10px;
-    height: 50px;
-    width: 100px;
-}
-
-[dir="ltr"] .test42 {
-    color: #EFEFEF;
-    left: 10px;
-    width: 100%;    
-}
-
-[dir="ltr"] .test43 {
-    transform: translate(10px, 20px);
-}
-
-@keyframes normalFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test44 {
-    animation: 5s normalFlip 1s ease-in-out;
-}
-
-@keyframes inversedFlip {
-    from {
-        left: 0px;
-        top: 0px;
-    }
-
-    to {
-        left: 100px;
-        top: -100px;
-    }
-}
-
-.test45 {
-    animation: 5s inversedFlip 1s ease-in-out;
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test46 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="rtl"] .test46 {
-        text-align: right;
-    }
-
-    .test47 {
-        color: white;
-    }
-
-    .test47left {
-        content: "\\f007";
-    }
-
-    .test47right {
-        content: "\\f010";
-    }
-}
-
-@media only screen and (min-device-width: 320px) {
-    .test48 {
-        cursor: wait;
-        text-align: left;
-    }
-
-    [dir="ltr"] .test48 {
-        text-align: right;
-    }
-
-    .test49 {
-        color: white;
-    }
-}
-
-:root {
-    text-align: left;
-}
-
-[dir="ltr"]:root {
-    text-align: right;
-}
-
-html .test50 {
-    color: red;
-    left: 10px;
-}
-
-html[dir="rtl"] .test50 {
-    left: auto;
-    right: 10px;
-}
-
-.test51 {
-    border-left: 1px solid #FFF;
-}
-
-[dir="rtl"] .test51 {
-    border-left: none;
-    border-right: 1px solid #FFF;
-}
-
-[dir] .test51 {
-    border: none;
-}
-
-.test52 {
-    color: red;
-    padding-block: 1px 2px;
-}
-
-.test53 {
-    margin-block-start: 10px;
-    margin-block-end: 5px;
-}"
-`;
diff --git a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot
new file mode 100644
index 00000000..68136d2d
--- /dev/null
+++ b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot
@@ -0,0 +1,662 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] String Map Tests:  custom no-valid string map and processUrls: true (different lenghts) 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir="ltr"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="ltr"] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot
new file mode 100644
index 00000000..e3d13749
--- /dev/null
+++ b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot
@@ -0,0 +1,662 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] String Map Tests:  custom no-valid string map and processUrls: true (different types) 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir="ltr"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="ltr"] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot
new file mode 100644
index 00000000..bb445159
--- /dev/null
+++ b/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot
@@ -0,0 +1,662 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] String Map Tests:  custom string map and processUrls: true 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir="ltr"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="ltr"] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot
new file mode 100644
index 00000000..f7307be7
--- /dev/null
+++ b/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot
@@ -0,0 +1,662 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: combined]] String Map Tests:  custom string map without names and processUrls: true 1`] = `
+".test1, .test2 {
+    color: #666;
+    width: 100%;
+}
+
+[dir="ltr"] .test1, [dir="ltr"] .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="ltr"] .test3 {
+    direction: ltr;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="ltr"] .test4 {
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    border: 1px solid 2px;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+[dir="ltr"] .test5,
+[dir="ltr"] .test6,
+[dir="ltr"] .test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #777 #888 #999;
+    border-width: 1px 2px 3px 4px;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="ltr"] .test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="ltr"] .test9, [dir="ltr"] .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    right: 5px;
+}
+
+[dir="ltr"] .test11:hover,
+[dir="ltr"] .test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+[dir="ltr"] .test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+}
+
+[dir="ltr"] .test18 {
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="ltr"] .test18::after {
+    left: 10px;
+}
+
+[dir="rtl"] .test18::after {
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        width: 100%;
+    }
+
+    [dir="ltr"] .test18 {
+        padding: 1px 2px 3px 4px;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+[dir="ltr"] .test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    padding: 10px;
+}
+
+[dir="ltr"] .test24 {
+    border: 1px solid #FFF;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="ltr"] .test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+[dir="ltr"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="ltr"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="ltr"] .testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    border: 1px solid gray;
+}
+
+[dir="ltr"] .test31 {
+    background-image: url("/icons/icon-left.png");
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="ltr"] .test32 {
+    background-image: url("/icons/icon-left.png");    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test33 {
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test36 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test37 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test37 {
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: right;
+}
+
+[dir="rtl"] .test37 {
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: left;
+}
+
+.test38 {
+    color: #FFF;
+    width: 100%;
+}
+
+[dir="ltr"] .test38 {
+    border-left: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+[dir="rtl"] .test38 {
+    border-right: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+}
+
+.test39 {
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-right: 10px;
+}
+
+[dir="rtl"] .test39 {
+    margin-left: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+}
+
+[dir="ltr"] .test40 {
+    right: 5px;
+}
+
+[dir="rtl"] .test40 {
+    left: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+}
+
+[dir="ltr"] .test41 {
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .test41 {
+    left: 10px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test46 {
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    [dir="rtl"] .test48 {
+        text-align: left;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+[dir="rtl"]:root {
+    text-align: left;
+}
+
+html .test50 {
+    color: red;
+}
+
+html[dir="ltr"] .test50 {
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    right: 10px;
+}
+
+[dir="ltr"] .test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths--map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths--map-process-urls-true.snapshot
new file mode 100644
index 00000000..051ea4ac
--- /dev/null
+++ b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths--map-process-urls-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] String Map Tests:  custom no-valid string map and processUrls: true (different lenghts) 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot
new file mode 100644
index 00000000..051ea4ac
--- /dev/null
+++ b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] String Map Tests:  custom no-valid string map and processUrls: true (different lenghts) 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types--map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types--map-process-urls-true.snapshot
new file mode 100644
index 00000000..44328a80
--- /dev/null
+++ b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types--map-process-urls-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] String Map Tests:  custom no-valid string map and processUrls: true (different types) 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot
new file mode 100644
index 00000000..44328a80
--- /dev/null
+++ b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] String Map Tests:  custom no-valid string map and processUrls: true (different types) 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot
new file mode 100644
index 00000000..fafe3620
--- /dev/null
+++ b/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] String Map Tests:  custom string map and processUrls: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot
new file mode 100644
index 00000000..c641653a
--- /dev/null
+++ b/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: diff]] String Map Tests:  custom string map without names and processUrls: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-color: #FFF;
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+.test3 {
+    direction: rtl;
+}
+
+.test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+.test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+.test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test22 {
+    right: 5px;
+    left: 10px;
+}
+
+.test24 {
+    border: 1px solid #000;
+    border-bottom-color: #666;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+.test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+.test43 {
+    transform: translate(10px, 20px);
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        text-align: right;
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        text-align: right;
+    }
+}
+
+:root {
+    text-align: right;
+}
+
+html .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+    border: none;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths--map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths--map-process-urls-true.snapshot
new file mode 100644
index 00000000..8b36703a
--- /dev/null
+++ b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths--map-process-urls-true.snapshot
@@ -0,0 +1,614 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] String Map Tests:  custom no-valid string map and processUrls: true (different lenghts) 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot
new file mode 100644
index 00000000..8b36703a
--- /dev/null
+++ b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot
@@ -0,0 +1,614 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] String Map Tests:  custom no-valid string map and processUrls: true (different lenghts) 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types--map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types--map-process-urls-true.snapshot
new file mode 100644
index 00000000..155d4c2a
--- /dev/null
+++ b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types--map-process-urls-true.snapshot
@@ -0,0 +1,614 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] String Map Tests:  custom no-valid string map and processUrls: true (different types) 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot
new file mode 100644
index 00000000..155d4c2a
--- /dev/null
+++ b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot
@@ -0,0 +1,614 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] String Map Tests:  custom no-valid string map and processUrls: true (different types) 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot
new file mode 100644
index 00000000..42170535
--- /dev/null
+++ b/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot
@@ -0,0 +1,614 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] String Map Tests:  custom string map and processUrls: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot
new file mode 100644
index 00000000..9caee87b
--- /dev/null
+++ b/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot
@@ -0,0 +1,614 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[[Mode: override]] String Map Tests:  custom string map without names and processUrls: true 1`] = `
+".test1, .test2 {
+    background: url("/folder/subfolder/icons/ltr/chevron-left.png");
+    background-position: 10px 20px;
+    border-radius: 0 2px 0 8px;
+    color: #666;
+    padding-right: 20px;
+    text-align: left;
+    transform: translate(-50%, 50%);
+    width: 100%;
+}
+
+[dir="rtl"] .test1, [dir="rtl"] .test2 {
+    background: url("/folder/subfolder/icons/rtl/chevron-right.png");
+    background-position: right 10px top 20px;
+    border-radius: 2px 0 8px 0;
+    padding-right: 0;
+    padding-left: 20px;
+    text-align: right;
+    transform: translate(50%, 50%);
+}
+
+[dir] .test1, [dir] .test2 {
+    background-color: #FFF;
+}
+
+.test2 {
+    color: red;
+    text-align: left;
+    text-align: center;
+}
+
+/* Comment not related to rtl */
+.test3 {
+    direction: ltr;
+    margin: 1px 2px 3px;
+    padding: 10px 20px;
+    /* Property comment not related to rtl */
+    text-align: center;
+}
+
+[dir="rtl"] .test3 {
+    direction: rtl;
+}
+
+.test4 {
+    font-size: 10px;
+    border-color: red;
+    border-radius: 2px 4px 8px 16px;
+    text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
+    transform-origin: 10px 20px;
+    transform: scale(0.5, 0.5);
+}
+
+[dir="rtl"] .test4 {
+    border-radius: 4px 2px 16px 8px;
+    text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
+}
+
+.test5,
+.test6,
+.test7 {
+    background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border: 1px solid 2px;
+    border-color: #666 #777 #888 #999;
+    box-sizing: border-box;
+    border-width: 1px 2px 3px 4px;
+    position: absolute;
+    left: 100px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test5,
+[dir="rtl"] .test6,
+[dir="rtl"] .test7 {
+    background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C);
+    border-color: #666 #999 #888 #777;
+    border-width: 1px 4px 3px 2px;
+    left: auto;
+    right: 100px;
+    transform: translateX(-5px);
+}
+
+/*rtl:novalid:ignore*/
+.test8 {
+    background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%);
+    display: flex;
+    padding-left: 10%;
+}
+
+[dir="rtl"] .test8 {
+    background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%);
+}
+
+.test9, .test10 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: 5px;
+    padding: 0px 2px 3px 4px;
+}
+
+[dir="rtl"] .test9, [dir="rtl"] .test10 {
+    background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+                linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+                linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    left: auto;
+    right: 5px;
+}
+
+.test11:hover,
+.test11:active {
+    font-family: Arial, Helvetica;
+    font-size: 20px;
+    color: '#FFF';
+    transform: translateY(10px);
+    padding: 10px;
+}
+
+[dir="rtl"] .test11:hover,
+[dir="rtl"] .test11:active {
+    font-family: "Droid Arabic Kufi", Arial, Helvetica;
+    font-size: 30px;
+    color: #000;
+    transform: translateY(10px) scaleX(-1);
+    padding: 10px 20px;
+}
+
+#test12, #test13 {
+    left: 10px;
+    position: relative;
+    text-align: right;
+}
+
+.test14 .test15 span {
+    border-left-color: #777;
+    margin: 10px 20px 30px 40px;
+    transform: translate(100%, 10%);
+}
+
+.test16 {
+    padding-right: 10px;
+}
+
+.test16:hover {
+    padding-right: 20px;
+}
+
+[dir="rtl"] .test16:hover {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+.test17 {
+    cursor: pointer;
+    padding: 10px 20px 40px 10px;
+    text-align: right;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test17 {
+        cursor: wait;
+    }
+}
+
+.test18 {
+    animation: 5s flip 1s ease-in-out,
+               3s my-animation 6s ease-in-out;
+    font-size: 10px;
+    padding: 10px 20px 40px 10px;
+}
+
+[dir="rtl"] .test18 {
+    padding: 10px 10px 40px 20px;
+}
+
+.test18::after {
+    content: '';
+    left: 10px;
+    text-align: left;
+    padding-left: 5px;
+    margin-left: 15px;
+    transform: translateX(5px);
+}
+
+[dir="rtl"] .test18::after {
+    left: auto;
+    right: 10px;
+}
+
+@keyframes flip {
+    from {
+        transform: translateX(100px);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test18 {
+        padding: 1px 2px 3px 4px;
+        width: 100%;
+    }
+
+    [dir="rtl"] .test18 {
+        padding: 1px 4px 3px 2px;
+    }
+}
+
+.test19 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: my-animation;
+    animation-timing-function: ease-in-out;
+}
+
+.test20 {
+    animation-delay: 2s;
+    animation-duration: 4s;
+    animation-name: my-animation, no-flip;
+    animation-timing-function: ease;
+}
+
+@keyframes my-animation {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.test21 {
+    animation-delay: 1s;
+    animation-duration: 3s;
+    animation-name: no-flip;
+    animation-timing-function: ease-in-out;
+    width: 100%;
+}
+
+@keyframes no-flip {
+    from {
+        color: #000;
+    }
+
+    to {
+        color: #FFF;
+    }
+}
+
+/* Do not add reset values in override mode */
+.test22 {
+    left: 5px;
+    right: 10px;
+}
+
+[dir="rtl"] .test22 {
+    right: 5px;
+    left: 10px;
+}
+
+/* Do not create the RTL version if the result is the same */
+.test23 {
+    left: 10px;
+    right: 10px;
+}
+
+/* Chain override */
+.test24 {
+    border: 1px solid #FFF;
+    padding: 10px;
+}
+
+[dir="rtl"] .test24 {
+    border: 1px solid #000;
+}
+
+[dir] .test24 {
+    border-bottom-color: #666;
+}
+
+/* Automatic rename */
+.test25-ltr {
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 10px;
+    width: 100%;
+}
+
+.test25, .test26-ltr, .test27 {
+    background-image: url("/icons/icon-l.png")
+}
+
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
+    background-image: url("/icons/icon-r.png")
+}
+
+.test26-rtl {
+    background-image: url("/icons/icon-r.png")
+}
+
+[dir="rtl"] .test26-rtl {
+    background-image: url("/icons/icon-l.png")
+}
+
+.test27-prev {
+    background-image: url("/icons/icon-p.png")
+}
+
+.test27-next {
+    background-image: url("/icons/icon-n.png")
+}
+
+.test28 {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+}
+
+.test28-left::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+[dir="rtl"] .test28-left::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+.test28-right::before {
+    background-image: url("/folder/subfolder/arrow-right.png");
+}
+
+[dir="rtl"] .test28-right::before {
+    background-image: url("/folder/subfolder/arrow-left.png");
+}
+
+.testleft29 {
+    border: 1px solid gray;
+}
+
+.testleft30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+[dir="rtl"] .testleft30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+.testright30 {
+    background: url("/folder/subfolder/icon-rtl.png");
+}
+
+[dir="rtl"] .testright30 {
+    background: url("/folder/subfolder/icon-ltr.png");
+}
+
+.test31 {
+    background-image: url("/icons/icon-left.png");
+    border: 1px solid gray;
+}
+
+[dir="rtl"] .test31 {
+    background-image: url("/icons/icon-right.png");
+}
+
+.test32 {
+    align-items: center;
+    background-image: url("/icons/icon-left.png");
+    background-repeat: no-repeat;
+    border: 1px solid gray;    
+}
+
+[dir="rtl"] .test32 {
+    background-image: url("/icons/icon-right.png");    
+}
+
+.test33 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="rtl"] .test33 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="rtl"] .example34 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="rtl"] .example35 {
+    transform: translate(10px, 20px);
+}
+
+.test36 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="ltr"] .test36 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test37 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test37 {
+    border-left: none;
+    border-right: 1px solid #666;
+    padding: 10px 20px 10px 5px;
+}
+
+[dir="ltr"] .test37 {
+    text-align: right;
+}
+
+.test38 {
+    color: #FFF;
+    border-left: 1px solid #666;
+    padding: 10px 5px 10px 20px;
+    text-align: left;
+    width: 100%;
+}
+
+[dir="rtl"] .test38 {
+    border-left: none;
+    border-right: 1px solid #666;
+}
+
+[dir="ltr"] .test38 {
+    padding: 10px 20px 10px 5px;
+    text-align: right;
+}
+
+.test39 {
+    margin-left: 10px;
+    width: 50%;
+}
+
+[dir="ltr"] .test39 {
+    margin-left: 0;
+    margin-right: 10px;
+}
+
+.test40 {
+    color: transparent;
+    padding: 10px;
+    left: 5px;
+}
+
+[dir="ltr"] .test40 {
+    left: auto;
+    right: 5px;
+}
+
+.test41 {
+    color: #EFEFEF;
+    left: 10px;
+}
+
+[dir="ltr"] .test41 {
+    left: auto;
+    right: 10px;
+    height: 50px;
+    width: 100px;
+}
+
+[dir="ltr"] .test42 {
+    color: #EFEFEF;
+    left: 10px;
+    width: 100%;    
+}
+
+[dir="ltr"] .test43 {
+    transform: translate(10px, 20px);
+}
+
+@keyframes normalFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test44 {
+    animation: 5s normalFlip 1s ease-in-out;
+}
+
+@keyframes inversedFlip {
+    from {
+        left: 0px;
+        top: 0px;
+    }
+
+    to {
+        left: 100px;
+        top: -100px;
+    }
+}
+
+.test45 {
+    animation: 5s inversedFlip 1s ease-in-out;
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test46 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="rtl"] .test46 {
+        text-align: right;
+    }
+
+    .test47 {
+        color: white;
+    }
+
+    .test47left {
+        content: "\\f007";
+    }
+
+    .test47right {
+        content: "\\f010";
+    }
+}
+
+@media only screen and (min-device-width: 320px) {
+    .test48 {
+        cursor: wait;
+        text-align: left;
+    }
+
+    [dir="ltr"] .test48 {
+        text-align: right;
+    }
+
+    .test49 {
+        color: white;
+    }
+}
+
+:root {
+    text-align: left;
+}
+
+[dir="ltr"]:root {
+    text-align: right;
+}
+
+html .test50 {
+    color: red;
+    left: 10px;
+}
+
+html[dir="rtl"] .test50 {
+    left: auto;
+    right: 10px;
+}
+
+.test51 {
+    border-left: 1px solid #FFF;
+}
+
+[dir="rtl"] .test51 {
+    border-left: none;
+    border-right: 1px solid #FFF;
+}
+
+[dir] .test51 {
+    border: none;
+}
+
+.test52 {
+    color: red;
+    padding-block: 1px 2px;
+}
+
+.test53 {
+    margin-block-start: 10px;
+    margin-block-end: 5px;
+}"
+`;
diff --git a/tests/__snapshots__/variables.test.ts.snap b/tests/__snapshots__/variables.test.ts.snap
deleted file mode 100644
index 27c31a8b..00000000
--- a/tests/__snapshots__/variables.test.ts.snap
+++ /dev/null
@@ -1,753 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`[[Mode: combined]] Variables Tests: aliases default 1`] = `
-":root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --custom-margin: 2px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-}
-
-[dir="ltr"] .test1.large {
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-[dir="ltr"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-[dir="ltr"] .test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: combined]] Variables Tests: aliases map 1`] = `
-":root {
-    --custom-margin: 2px;
-}
-
-[dir="ltr"]:root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-[dir="rtl"]:root {
-    --small-padding: 2px 16px 8px 4px;
-    --large-padding: 4px 32px 16px 8px;
-    --small-margin: 2px 16px 8px 4px;
-    --large-margin: 4px 32px 16px 8px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-}
-
-[dir="ltr"] .test1.large {
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-[dir="ltr"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-[dir="ltr"] .test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: combined]] Variables Tests: processEnv = false 1`] = `
-":root {
-    --custom-margin: 2px;
-}
-
-[dir="ltr"]:root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-[dir="rtl"]:root {
-    --small-padding: 2px 16px 8px 4px;
-    --large-padding: 4px 32px 16px 8px;
-    --small-margin: 2px 16px 8px 4px;
-    --large-margin: 4px 32px 16px 8px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-}
-
-[dir="ltr"] .test1.large {
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-[dir="ltr"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-left, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-right, 20px);
-}
-
-[dir="ltr"] .test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-right, 10px);
-    margin-right: env(safe-area-inset-left, 20px);
-}"
-`;
-
-exports[`[[Mode: combined]] Variables Tests: processEnv = true 1`] = `
-":root {
-    --custom-margin: 2px;
-}
-
-[dir="ltr"]:root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-[dir="rtl"]:root {
-    --small-padding: 2px 16px 8px 4px;
-    --large-padding: 4px 32px 16px 8px;
-    --small-margin: 2px 16px 8px 4px;
-    --large-margin: 4px 32px 16px 8px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-}
-
-[dir="ltr"] .test1.large {
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-[dir="ltr"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-[dir="ltr"] .test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: combined]] Variables Tests: wrong aliases 1`] = `
-":root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --custom-margin: 2px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-}
-
-[dir="ltr"] .test1.large {
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-[dir="ltr"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-[dir="ltr"] .test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: diff]] Variables Tests: aliases default 1`] = `
-".test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-.test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: diff]] Variables Tests: aliases map 1`] = `
-":root {
-    --small-padding: 2px 16px 8px 4px;
-    --large-padding: 4px 32px 16px 8px;
-    --small-margin: 2px 16px 8px 4px;
-    --large-margin: 4px 32px 16px 8px;
-}
-
-.test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-.test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: diff]] Variables Tests: processEnv = false 1`] = `
-":root {
-    --small-padding: 2px 16px 8px 4px;
-    --large-padding: 4px 32px 16px 8px;
-    --small-margin: 2px 16px 8px 4px;
-    --large-margin: 4px 32px 16px 8px;
-}
-
-.test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-left, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-right, 20px);
-}
-
-.test4 {
-    margin-left: env(safe-area-inset-right, 10px);
-    margin-right: env(safe-area-inset-left, 20px);
-}"
-`;
-
-exports[`[[Mode: diff]] Variables Tests: processEnv = true 1`] = `
-":root {
-    --small-padding: 2px 16px 8px 4px;
-    --large-padding: 4px 32px 16px 8px;
-    --small-margin: 2px 16px 8px 4px;
-    --large-margin: 4px 32px 16px 8px;
-}
-
-.test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-.test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: diff]] Variables Tests: wrong aliases 1`] = `
-".test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-.test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: override]] Variables Tests: aliases default 1`] = `
-":root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --custom-margin: 2px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-.test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: override]] Variables Tests: aliases map 1`] = `
-":root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --custom-margin: 2px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-[dir="rtl"]:root {
-    --small-padding: 2px 16px 8px 4px;
-    --large-padding: 4px 32px 16px 8px;
-    --small-margin: 2px 16px 8px 4px;
-    --large-margin: 4px 32px 16px 8px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-.test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: override]] Variables Tests: processEnv = false 1`] = `
-":root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --custom-margin: 2px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-[dir="rtl"]:root {
-    --small-padding: 2px 16px 8px 4px;
-    --large-padding: 4px 32px 16px 8px;
-    --small-margin: 2px 16px 8px 4px;
-    --large-margin: 4px 32px 16px 8px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-left, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-right, 20px);
-}
-
-.test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-right, 10px);
-    margin-right: env(safe-area-inset-left, 20px);
-}"
-`;
-
-exports[`[[Mode: override]] Variables Tests: processEnv = true 1`] = `
-":root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --custom-margin: 2px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-[dir="rtl"]:root {
-    --small-padding: 2px 16px 8px 4px;
-    --large-padding: 4px 32px 16px 8px;
-    --small-margin: 2px 16px 8px 4px;
-    --large-margin: 4px 32px 16px 8px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-.test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
-
-exports[`[[Mode: override]] Variables Tests: wrong aliases 1`] = `
-":root {
-    --small-padding: 2px 4px 8px 16px;
-    --large-padding: 4px 8px 16px 32px;
-    --custom-margin: 2px;
-    --small-margin: 2px 4px 8px 16px;
-    --large-margin: 4px 8px 16px 32px;
-}
-
-.test1 {
-    margin: var(--small-margin);
-    padding: var(--small-padding);
-}
-
-.test1.large {
-    margin: var(--large-margin);
-    padding: var(--large-padding);
-    left: 10px;
-}
-
-[dir="rtl"] .test1.large {
-    left: auto;
-    right: 10px;
-}
-
-.test2 {
-    margin: var(--custom-margin);
-}
-
-.test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 20px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 40px)
-    ;
-}
-
-[dir="rtl"] .test3 {
-    padding:
-        env(safe-area-inset-top, 10px)
-        env(safe-area-inset-right, 40px)
-        env(safe-area-inset-bottom, 30px)
-        env(safe-area-inset-left, 20px);
-}
-
-.test4 {
-    margin-right: env(safe-area-inset-right, 10px);
-    margin-left: env(safe-area-inset-left, 20px);
-}
-
-[dir="rtl"] .test4 {
-    margin-left: env(safe-area-inset-left, 10px);
-    margin-right: env(safe-area-inset-right, 20px);
-}"
-`;
diff --git a/tests/variables.test.ts b/tests/aliases-variables.test.ts
similarity index 67%
rename from tests/variables.test.ts
rename to tests/aliases-variables.test.ts
index 4a4b7280..58a97632 100644
--- a/tests/variables.test.ts
+++ b/tests/aliases-variables.test.ts
@@ -1,8 +1,15 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
 import { aliases } from './constants';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'aliases-variables';
 
 const baseOptions: PluginOptions = { aliases };
 
@@ -19,35 +26,45 @@ runTests(baseOptions, (pluginOptions: PluginOptions): void => {
     it('aliases default', (): void => {
       const options: PluginOptions = { ...pluginOptions, aliases: {} };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'aliases-default', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('aliases map', (): void => {
       const options: PluginOptions = { ...pluginOptions };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'aliases-map', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('wrong aliases', (): void => {
       const options: PluginOptions = { ...pluginOptions, aliases: {base: true, parse: false} as unknown as Record<string, string> };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'wrong-aliases', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
     it('processEnv = true', (): void => {
       const options: PluginOptions = { ...pluginOptions };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'process-env-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
     it('processEnv = false', (): void => {
         const options: PluginOptions = { ...pluginOptions, processEnv: false };
         const output = postcss([postcssRTLCSS(options)]).process(input);
-        expect(output.css).toMatchSnapshot();
+        expect(output.css).toMatchSpecificSnapshot(
+          createSnapshotFileName(BASE_NAME,'process-env-false', pluginOptions.mode)
+        );
         expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/basic-options.test.ts b/tests/basic-options.test.ts
index 9230ea81..071c285c 100644
--- a/tests/basic-options.test.ts
+++ b/tests/basic-options.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions, Source } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'basic-options';
 
 runTests({}, (pluginOptions: PluginOptions): void => {
 
@@ -16,42 +23,54 @@ runTests({}, (pluginOptions: PluginOptions): void => {
     it('Basic', (): void => {
       const options: PluginOptions = { ...pluginOptions };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'basic', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('{source: rtl}', (): void => {
       const options: PluginOptions = { ...pluginOptions, source: Source.rtl };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'source-rtl', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('{processUrls: true}', (): void => {
       const options: PluginOptions = { ...pluginOptions, processUrls: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'process-url-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('{processKeyFrames: true}', (): void => {
       const options: PluginOptions = { ...pluginOptions, processKeyFrames: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'process-keyframes-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('{source: rtl, processKeyFrames: true}', (): void => {
       const options: PluginOptions = { ...pluginOptions, source: Source.rtl, processKeyFrames: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'source-rtl-and-process-keyframes-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('{useCalc: true}', (): void => {
       const options: PluginOptions = { ...pluginOptions, useCalc: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'use-calc-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/empty-rules.test.ts b/tests/empty-rules.test.ts
index a62a4342..23872a89 100644
--- a/tests/empty-rules.test.ts
+++ b/tests/empty-rules.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+    readCSSFile,
+    runTests,
+    createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'empty-rules';
 
 runTests({}, (pluginOptions: PluginOptions): void => {
     describe(`[[Mode: ${pluginOptions.mode}]] Empty Rules Tests: `, () => {
@@ -14,7 +21,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
         it('Basic', (): void => {
             const options: PluginOptions = { ...pluginOptions };
             const output = postcss([postcssRTLCSS(options)]).process(input);
-            expect(output.css).toMatchSnapshot();
+            expect(output.css).toMatchSpecificSnapshot(
+                createSnapshotFileName(BASE_NAME,'basic', pluginOptions.mode)
+            );
             expect(output.warnings()).toHaveLength(0);
           });
     });
diff --git a/tests/nested-rules.test.ts b/tests/nested-rules.test.ts
index ed3d36d9..442478ef 100644
--- a/tests/nested-rules.test.ts
+++ b/tests/nested-rules.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions, Source } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'nested-rules';
 
 runTests({}, (pluginOptions: PluginOptions): void => {
 
@@ -16,28 +23,36 @@ runTests({}, (pluginOptions: PluginOptions): void => {
     it('{source: rtl}', (): void => {
       const options: PluginOptions = { ...pluginOptions, source: Source.rtl };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'source-rtl', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
     it('{source: rtl} processRuleNames: true', (): void => {
       const options: PluginOptions = { ...pluginOptions, source: Source.rtl, processRuleNames: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'source-rtl-process-rule-names-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('{source: ltr}', (): void => {
       const options: PluginOptions = { ...pluginOptions, source: Source.ltr };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'source-ltr', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
     it('{source: ltr} processRuleNames: true', (): void => {
       const options: PluginOptions = { ...pluginOptions, source: Source.ltr, processRuleNames: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'source-ltr-process-rule-names-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/noflip.test.ts b/tests/noflip.test.ts
index 95ce6033..b040a32f 100644
--- a/tests/noflip.test.ts
+++ b/tests/noflip.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions, Mode } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'noflip';
 
 runTests({}, (pluginOptions: PluginOptions): void => {
 
@@ -17,7 +24,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
       const output = pluginOptions.mode === Mode.combined
         ? postcss([postcssRTLCSS()]).process(input)
         : postcss([postcssRTLCSS(pluginOptions)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'no-flip', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/overriding.test.ts b/tests/overriding.test.ts
index 2cd033a4..24d7bca2 100644
--- a/tests/overriding.test.ts
+++ b/tests/overriding.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'overriding';
 
 runTests({}, (pluginOptions: PluginOptions): void => {
 
@@ -16,14 +23,18 @@ runTests({}, (pluginOptions: PluginOptions): void => {
     it('Basic', (): void => {
       const options: PluginOptions = { ...pluginOptions };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'basic', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
     it('With safeBothPrefix', (): void => {
       const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'with-safe-both-prefix', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/prefixed.test.ts b/tests/prefixed.test.ts
index b13c0929..5ac5085c 100644
--- a/tests/prefixed.test.ts
+++ b/tests/prefixed.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'prefixed';
 
 runTests({ processUrls: true }, (pluginOptions: PluginOptions): void => {
 
@@ -16,28 +23,36 @@ runTests({ processUrls: true }, (pluginOptions: PluginOptions): void => {
     it('Prefixed default', (): void => {
       const options: PluginOptions = { ...pluginOptions };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'prefixed-default', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('Custom prefixes', (): void => {
       const options: PluginOptions = { ...pluginOptions, rtlPrefix: '.rtl', ltrPrefix: '.ltr' };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'custom-prefixes', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('Prefixed with array', (): void => {
       const options: PluginOptions = { ...pluginOptions, rtlPrefix: ['.rtl', '[dir="rtl"]'], ltrPrefix: ['.ltr', '[dir="ltr"]'] };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'prefixed-with-array', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('ignorePrefixedRules false', (): void => {
       const options: PluginOptions = { ...pluginOptions, ignorePrefixedRules: false };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'ignore-prefixed-rules-false', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/prefixes.test.ts b/tests/prefixes.test.ts
index 80d3dfb9..adf5dc62 100644
--- a/tests/prefixes.test.ts
+++ b/tests/prefixes.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'prefixes';
 
 runTests({}, (pluginOptions: PluginOptions): void => {
 
@@ -21,7 +28,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
         bothPrefix: ['.ltr', '.rtl']
       };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'custom-ltr-and-rtl-prefix', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
@@ -33,7 +42,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
         bothPrefix: ['.ltr', '.left-to-right', '.rtl', '.right-to-left']
       };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'custom-ltr-and-rtl-prefix-as-arrays', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
@@ -46,7 +57,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
         processUrls: true
       };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
@@ -58,7 +71,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
       };
       const options: PluginOptions = { ...pluginOptions, prefixSelectorTransformer: transformer };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'prefix-selector-transformer-with-default-prefixes', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
@@ -76,7 +91,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
         bothPrefix: ['.ltr', '.rtl']
       };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/rule-names.test.ts b/tests/rule-names.test.ts
index 460b40d3..772a7a43 100644
--- a/tests/rule-names.test.ts
+++ b/tests/rule-names.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions, Source } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'rule-names';
 
 runTests({}, (pluginOptions: PluginOptions): void => {
 
@@ -16,21 +23,27 @@ runTests({}, (pluginOptions: PluginOptions): void => {
     it('processRuleNames: true', (): void => {
       const options: PluginOptions = { ...pluginOptions, processRuleNames: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'process-rules-names-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('processRuleNames: true, greedy: true', (): void => {
       const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'process-rules-names-true-greedy-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
     it('processRuleNames: true, with source rtl greedy: true', (): void => {
       const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true, source: Source.rtl };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'process-rules-names-true-source-rtl-greedy-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
@@ -41,7 +54,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
       ];
       const options: PluginOptions = { ...pluginOptions, processRuleNames: true, stringMap };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'process-rules-names-true-with-custom-string-map', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
@@ -52,7 +67,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
       ];
       const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true, stringMap };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'process-rules-names-true-with-custom-string-map-and-greedy-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
 
@@ -63,7 +80,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
       ];
       const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true, stringMap, source: Source.rtl };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'process-rules-names-true-with-custom-string-map-rtl-and-greedy-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/safe-prefix.test.ts b/tests/safe-prefix.test.ts
index f106d879..136a08ea 100644
--- a/tests/safe-prefix.test.ts
+++ b/tests/safe-prefix.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions, Source } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'safe-prefix';
 
 runTests({}, (pluginOptions: PluginOptions): void => {
 
@@ -16,28 +23,36 @@ runTests({}, (pluginOptions: PluginOptions): void => {
     it('{safeBothPrefix: true}', (): void => {
       const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'safe-both-prefix-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('{safeBothPrefix: true} and {source: rtl}', (): void => {
       const options: PluginOptions = { ...pluginOptions, source: Source.rtl, safeBothPrefix: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'safe-both-prefix-true-rtl', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('{safeBothPrefix: true} and {processUrls: true}', (): void => {
       const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true, processUrls: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'safe-both-prefix-true-process-urls-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
     it('{safeBothPrefix: true} and {processKeyFrames: true}', (): void => {
       const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true, processKeyFrames: true };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'safe-both-prefix-true-process-keyframes-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/string-map.test.ts b/tests/string-map.test.ts
index 45b8de6c..5241af41 100644
--- a/tests/string-map.test.ts
+++ b/tests/string-map.test.ts
@@ -1,7 +1,14 @@
 import postcss from 'postcss';
 import postcssRTLCSS from '../src';
 import { PluginOptions } from '../src/@types';
-import { readCSSFile, runTests } from './utils';
+import {
+  readCSSFile,
+  runTests,
+  createSnapshotFileName
+} from './utils';
+import 'jest-specific-snapshot';
+
+const BASE_NAME = 'string-map';
 
 runTests({}, (pluginOptions: PluginOptions): void => {
 
@@ -21,7 +28,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
       ];
       const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'custom-string-map-process-urls-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
@@ -33,7 +42,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
       ];
       const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'custom-string-map-without-names-process-urls-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
@@ -43,7 +54,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
       ];
       const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'custom-non-valid-string-different-types-map-process-urls-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
@@ -53,7 +66,9 @@ runTests({}, (pluginOptions: PluginOptions): void => {
       ];
       const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap };
       const output = postcss([postcssRTLCSS(options)]).process(input);
-      expect(output.css).toMatchSnapshot();
+      expect(output.css).toMatchSpecificSnapshot(
+        createSnapshotFileName(BASE_NAME,'custom-non-valid-string-different-lengths-map-process-urls-true', pluginOptions.mode)
+      );
       expect(output.warnings()).toHaveLength(0);
     });
   
diff --git a/tests/utils/index.ts b/tests/utils/index.ts
index c865deb7..961df9ff 100644
--- a/tests/utils/index.ts
+++ b/tests/utils/index.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import { PluginOptions, Mode } from '../../src/@types';
 
-export const readCSSFile = (name: string): Promise<string> => new Promise((resolve, reject) => {
+export const readCSSFile = (name: string): Promise<string> => new Promise((resolve) => {
     fs.readFile(`${__dirname}/../css/${name}`, 'utf8', (error, data): void => {
         if (error) {
             resolve('');
@@ -15,4 +15,13 @@ export const runTests = (options: PluginOptions, callback: (options: PluginOptio
     callback({...options, mode: Mode.combined});
     callback({...options, mode: Mode.override});
     callback({...options, mode: Mode.diff});
+};
+
+export const createSnapshotFileName = (baseFileName: string, testName: string, mode: string | undefined): string => {
+    const folder = './__snapshots__';
+    const extension = 'snapshot';
+    if (mode) {
+        return `${folder}/${baseFileName}/${mode}/${testName}.${extension}`;
+    }
+    return `${folder}/${baseFileName}/${testName}.${extension}`;
 };
\ No newline at end of file