From 2eb7e19f462bf8bfc85399c9c9ba6e77508fc338 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Pereira=20Mu=C3=B1oz?= <elchininet@gmail.com>
Date: Sat, 30 Dec 2023 14:16:07 +0100
Subject: [PATCH] Implement new directives to control processRuleNames option

---
 CHANGELOG.md                                  |   4 +
 README.md                                     | 137 +++++++++++++-
 src/constants/index.ts                        |   1 +
 src/parsers/declarations.ts                   |  15 +-
 src/parsers/rules.ts                          |   1 +
 .../__snapshots__/basic-options.test.ts.snap  | 168 ++++++++++++++++--
 tests/__snapshots__/prefixes.test.ts.snap     | 140 +++++++++++++--
 tests/__snapshots__/string-map.test.ts.snap   | 112 +++++++++++-
 tests/css/input.css                           |   4 +
 9 files changed, 542 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7da2d756..aa2cd282 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [5.1.0] - 2023-12-30
+
+- New directives to set the option `processRuleNames`: `/*rtl:rules*/`, `/*rtl:begin:rules*/`, and `/*rtl:end:rules*/`
+
 ## [5.0.0] - 2023-12-30
 
 - Breaking change: removed `autoRename` option and `/*rtl:rename*/`, `/*rtl:begin:rename*/`, and `/*rtl:end:rename*/` directives
diff --git a/README.md b/README.md
index 4e3e34e7..b73b20d9 100644
--- a/README.md
+++ b/README.md
@@ -1445,9 +1445,12 @@ Control directives are placed between rules or declarations. They can target a s
 | `/*rtl:ignore*/`         | Ignores processing of the following rule or declaration                                                           |
 | `/*rtl:begin:ignore*/`   | Starts an ignoring block                                                                                          |
 | `/*rtl:end:ignore*/`     | Ends an ignoring block                                                                                            |
-| `/*rtl:urls*/`         | This directive set the `processUrls` option to `true` in the next declaration or in the declarations of the next rule no mattering the value of the global `processUrls` option  |
-| `/*rtl:begin:urls*/`   | Starts a `processUrls` block block                                                                                           |
-| `/*rtl:end:urls*/`     | Ends a `processUrls` block block                                                                                             |
+| `/*rtl:urls*/`           | This directive set the `processUrls` option to `true` in the next declaration or in the declarations of the next rule no mattering the value of the global `processUrls` option  |
+| `/*rtl:begin:urls*/`     | Starts a `processUrls` block block                                                                                           |
+| `/*rtl:end:urls*/`       | Ends a `processUrls` block block                                                                                             |
+| `/*rtl:rules*/`          | This directive set the `processRuleNames` option to `true` in the next rule no mattering the value of the global `processRuleNames` option  |
+| `/*rtl:begin:rules*/`    | Starts a `processRuleNames` block block |
+| `/*rtl:end:rules*/`      | Ends a `processRuleNames` block block   | 
 | `/*rtl:source:{source}*/`| Set the source of a rule or a declaration no mattering the value of the `source` property                         |
 | `/*rtl:begin:source:{source}*/` | Starts a source block                                                                                      |
 | `/*rtl:end:source*/`     | Ends a source block                                                                                               |
@@ -1705,6 +1708,134 @@ These directives should be used together, they will provide the beginning and th
 
 ---
 
+#### `/*rtl:rules*/`
+
+<details><summary>Expand</summary>
+<p>
+
+This directive set the `processRuleNames` option to `true` in the next rule no mattering the value of the global `processRuleNames` option:
+
+##### input
+
+```css
+/*rtl:rules*/
+.test1-ltr {
+    background-image: url('/images/test1-l.png');
+}
+
+/*rtl:rules*/
+.test1-rtl {
+    background-image: url('/images/test1-r.png');
+}
+
+/*rtl:rules*/
+.test2-left::before {
+    content: "\f007";
+}
+
+.test2-right::before {
+    content: "\f010";
+}
+```
+
+##### output
+
+```css
+[dir="ltr"] .test1-ltr {
+    background-image: url('/images/test1-l.png');
+}
+
+[dir="rtl"] .test1-ltr {
+    background-image: url('/images/test1-r.png');
+}
+
+[dir="ltr"] .test1-rtl {
+    background-image: url('/images/test1-r.png');
+}
+
+[dir="rtl"] .test1-rtl {
+    background-image: url('/images/test1-l.png');
+}
+
+/* These selectors will not be processed because only one of them has the rtl:rules directive */
+.test2-left::before {
+    content: "\f007";
+}
+
+.test2-right::before {
+    content: "\f010";
+}
+```
+
+</p>
+
+</details>
+
+---
+
+#### `/*rtl:begin:rules*/` and `/*rtl:end:rules*/`
+
+<details><summary>Expand</summary>
+<p>
+
+These directives should be used together, they will provide the beginning and the end for `processRuleNames` blocks.
+
+##### input
+
+```css
+.test1-ltr {
+    background-image: url('/images/test1-l.png');
+}
+
+.test1-rtl {
+    background-image: url('/images/test1-r.png');
+}
+
+/*rtl:begin:rules*/
+.test2-left::before {
+    content: "\f007";
+}
+
+.test2-right::before {
+    content: "\f010";
+}
+/*rtl:begin:rules*/
+```
+
+##### output
+
+```css
+.test1-ltr {
+    background-image: url('/images/test1-l.png');
+}
+
+.test1-rtl {
+    background-image: url('/images/test1-r.png');
+}
+
+[dir="ltr"] .test2-left::before {
+    content: "\f007";
+}
+
+[dir="rtl"] .test2-left::before {
+    content: "\f010";
+}
+
+[dir="ltr"] .test2-right::before {
+    content: "\f010";
+}
+
+[dir="rtl"] .test2-right::before {
+    content: "\f007";
+}
+```
+
+</p>
+
+</details>
+
+---
+
 #### `/*rtl:source:{source}*/`
 
 <details><summary>Expand</summary>
diff --git a/src/constants/index.ts b/src/constants/index.ts
index eb0ef189..9f4384a1 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -20,6 +20,7 @@ export const LAST_WORD_CHARACTER_REG_EXP = /\w$/;
 export enum CONTROL_DIRECTIVE {
     IGNORE = 'ignore',
     URLS = 'urls',
+    RULES = 'rules',
     SOURCE = 'source',
     RAW = 'raw'
 }
diff --git a/src/parsers/declarations.ts b/src/parsers/declarations.ts
index 6fef99c6..022d4cd0 100644
--- a/src/parsers/declarations.ts
+++ b/src/parsers/declarations.ts
@@ -45,7 +45,8 @@ export const parseDeclarations = (
     rule: Rule,
     hasParentRule: boolean,
     ruleSourceDirectiveValue: string,
-    renamed: boolean
+    processRule: boolean,
+    rename: boolean
 ): void => {
 
     const {
@@ -153,7 +154,7 @@ export const parseDeclarations = (
             const decl = node as Declaration;
             const declString = `${decl.toString()};`;
             const declFlippedString = rtlcss.process(declString, {
-                processUrls: renamed || processUrls || processUrlDirective,
+                processUrls: processUrls || processUrlDirective || rename,
                 processEnv,
                 useCalc,
                 stringMap,
@@ -397,17 +398,17 @@ export const parseDeclarations = (
             );
         }
     } else if (
-        processRuleNames &&
+        (
+            processRuleNames ||
+            processRule
+        ) &&
         !simetricRules
     ) {
         store.unmodifiedRules.push({
             rule,
             hasParentRule
         });
-    } else if (
-        mode === Mode.diff &&
-        !renamed
-    ) {
+    } else if (mode === Mode.diff) {
         store.rulesToRemove.push(rule);
     }
 
diff --git a/src/parsers/rules.ts b/src/parsers/rules.ts
index 268932d7..bdc48f3d 100644
--- a/src/parsers/rules.ts
+++ b/src/parsers/rules.ts
@@ -113,6 +113,7 @@ export const parseRules = (
                     rule,
                     hasParentRule,
                     sourceDirectiveValue,
+                    checkDirective(controlDirectives, CONTROL_DIRECTIVE.RULES),
                     checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS)
                 );
             }
diff --git a/tests/__snapshots__/basic-options.test.ts.snap b/tests/__snapshots__/basic-options.test.ts.snap
index 83c76355..f9c6fba5 100644
--- a/tests/__snapshots__/basic-options.test.ts.snap
+++ b/tests/__snapshots__/basic-options.test.ts.snap
@@ -351,14 +351,22 @@ exports[`[[Mode: combined]] Basic Options Tests:  {processKeyFrames: true} 1`] =
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -1028,14 +1036,22 @@ exports[`[[Mode: combined]] Basic Options Tests:  {processUrls: true} 1`] = `
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -1713,14 +1729,22 @@ exports[`[[Mode: combined]] Basic Options Tests:  {source: rtl, processKeyFrames
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -2386,14 +2410,22 @@ exports[`[[Mode: combined]] Basic Options Tests:  {source: rtl} 1`] = `
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -3028,14 +3060,22 @@ exports[`[[Mode: combined]] Basic Options Tests:  {useCalc: true} 1`] = `
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -3669,14 +3709,22 @@ exports[`[[Mode: combined]] Basic Options Tests:  Basic 1`] = `
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -4106,6 +4154,14 @@ exports[`[[Mode: diff]] Basic Options Tests:  {processKeyFrames: true} 1`] = `
     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");
 }
@@ -4330,6 +4386,14 @@ exports[`[[Mode: diff]] Basic Options Tests:  {processUrls: true} 1`] = `
     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");
 }
@@ -4558,6 +4622,14 @@ exports[`[[Mode: diff]] Basic Options Tests:  {source: rtl, processKeyFrames: tr
     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");
 }
@@ -4780,6 +4852,14 @@ exports[`[[Mode: diff]] Basic Options Tests:  {source: rtl} 1`] = `
     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");
 }
@@ -4971,6 +5051,14 @@ exports[`[[Mode: diff]] Basic Options Tests:  {useCalc: true} 1`] = `
     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");
 }
@@ -5161,6 +5249,14 @@ exports[`[[Mode: diff]] Basic Options Tests:  Basic 1`] = `
     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");
 }
@@ -5592,10 +5688,18 @@ exports[`[[Mode: override]] Basic Options Tests:  {processKeyFrames: true} 1`] =
     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")
 }
@@ -6221,10 +6325,18 @@ exports[`[[Mode: override]] Basic Options Tests:  {processUrls: true} 1`] = `
     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")
 }
@@ -6852,10 +6964,18 @@ exports[`[[Mode: override]] Basic Options Tests:  {source: rtl, processKeyFrames
     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")
 }
@@ -7471,10 +7591,18 @@ exports[`[[Mode: override]] Basic Options Tests:  {source: rtl} 1`] = `
     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")
 }
@@ -8059,10 +8187,18 @@ exports[`[[Mode: override]] Basic Options Tests:  {useCalc: true} 1`] = `
     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")
 }
@@ -8652,10 +8788,18 @@ exports[`[[Mode: override]] Basic Options Tests:  Basic 1`] = `
     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")
 }
diff --git a/tests/__snapshots__/prefixes.test.ts.snap b/tests/__snapshots__/prefixes.test.ts.snap
index d5ad32e6..57c78644 100644
--- a/tests/__snapshots__/prefixes.test.ts.snap
+++ b/tests/__snapshots__/prefixes.test.ts.snap
@@ -315,14 +315,22 @@ exports[`[[Mode: combined]] Prefixes Tests:  custom ltrPrefix and rtlPrefix 1`]
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+.ltr .test25, .ltr .test26-ltr, .ltr .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+.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")
 }
@@ -966,14 +974,22 @@ exports[`[[Mode: combined]] Prefixes Tests:  custom ltrPrefix and rtlPrefix prop
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+.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")
 }
 
-.test26-rtl {
+.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")
 }
@@ -1621,14 +1637,22 @@ exports[`[[Mode: combined]] Prefixes Tests:  custom ltrPrefix, rtlPrefix, and bo
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+.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")
 }
 
-.test26-rtl {
+.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")
 }
@@ -2270,14 +2294,22 @@ exports[`[[Mode: combined]] Prefixes Tests:  prefixSelectorTransformer with cust
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+.ltr.test25, .ltr.test26-ltr, .ltr.test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+.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")
 }
@@ -2911,14 +2943,22 @@ exports[`[[Mode: combined]] Prefixes Tests:  prefixSelectorTransformer with defa
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="ltr"] > .test25, [dir="ltr"] > .test26-ltr, [dir="ltr"] > .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -3318,6 +3358,14 @@ exports[`[[Mode: diff]] Prefixes Tests:  custom ltrPrefix and rtlPrefix 1`] = `
     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");
 }
@@ -3508,6 +3556,14 @@ exports[`[[Mode: diff]] Prefixes Tests:  custom ltrPrefix and rtlPrefix properti
     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");
 }
@@ -3700,6 +3756,14 @@ exports[`[[Mode: diff]] Prefixes Tests:  custom ltrPrefix, rtlPrefix, and bothPr
     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");
 }
@@ -3898,6 +3962,14 @@ exports[`[[Mode: diff]] Prefixes Tests:  prefixSelectorTransformer with custom l
     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");
 }
@@ -4088,6 +4160,14 @@ exports[`[[Mode: diff]] Prefixes Tests:  prefixSelectorTransformer with default
     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");
 }
@@ -4489,10 +4569,18 @@ exports[`[[Mode: override]] Prefixes Tests:  custom ltrPrefix and rtlPrefix 1`]
     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")
 }
@@ -5087,10 +5175,18 @@ exports[`[[Mode: override]] Prefixes Tests:  custom ltrPrefix and rtlPrefix prop
     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")
 }
@@ -5689,10 +5785,18 @@ exports[`[[Mode: override]] Prefixes Tests:  custom ltrPrefix, rtlPrefix, and bo
     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")
 }
@@ -6290,10 +6394,18 @@ exports[`[[Mode: override]] Prefixes Tests:  prefixSelectorTransformer with cust
     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")
 }
@@ -6883,10 +6995,18 @@ exports[`[[Mode: override]] Prefixes Tests:  prefixSelectorTransformer with defa
     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")
 }
diff --git a/tests/__snapshots__/string-map.test.ts.snap b/tests/__snapshots__/string-map.test.ts.snap
index adeee625..fa2b26b1 100644
--- a/tests/__snapshots__/string-map.test.ts.snap
+++ b/tests/__snapshots__/string-map.test.ts.snap
@@ -319,14 +319,22 @@ exports[`[[Mode: combined]] String Map Tests:  custom no-valid string map and pr
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -972,14 +980,22 @@ exports[`[[Mode: combined]] String Map Tests:  custom no-valid string map and pr
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -1625,14 +1641,22 @@ exports[`[[Mode: combined]] String Map Tests:  custom string map and processUrls
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -2278,14 +2302,22 @@ exports[`[[Mode: combined]] String Map Tests:  custom string map without names a
     width: 100%;
 }
 
-.test25, .test26-ltr, .test27 {
+[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 {
     background-image: url("/icons/icon-l.png")
 }
 
-.test26-rtl {
+[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")
 }
@@ -2695,6 +2727,14 @@ exports[`[[Mode: diff]] String Map Tests:  custom no-valid string map and proces
     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");
 }
@@ -2895,6 +2935,14 @@ exports[`[[Mode: diff]] String Map Tests:  custom no-valid string map and proces
     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");
 }
@@ -3095,6 +3143,14 @@ exports[`[[Mode: diff]] String Map Tests:  custom string map and processUrls: tr
     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");
 }
@@ -3295,6 +3351,14 @@ exports[`[[Mode: diff]] String Map Tests:  custom string map without names and p
     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");
 }
@@ -3708,10 +3772,18 @@ exports[`[[Mode: override]] String Map Tests:  custom no-valid string map and pr
     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")
 }
@@ -4313,10 +4385,18 @@ exports[`[[Mode: override]] String Map Tests:  custom no-valid string map and pr
     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")
 }
@@ -4918,10 +4998,18 @@ exports[`[[Mode: override]] String Map Tests:  custom string map and processUrls
     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")
 }
@@ -5523,10 +5611,18 @@ exports[`[[Mode: override]] String Map Tests:  custom string map without names a
     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")
 }
diff --git a/tests/css/input.css b/tests/css/input.css
index fff87c15..32ef5713 100644
--- a/tests/css/input.css
+++ b/tests/css/input.css
@@ -210,6 +210,7 @@
     width: 100%;
 }
 
+/*rtl:begin:rules*/
 .test25, .test26-ltr, .test27 {
     background-image: url("/icons/icon-l.png")
 }
@@ -217,6 +218,7 @@
 .test26-rtl {
     background-image: url("/icons/icon-r.png")
 }
+/*rtl:end:rules*/
 
 .test27-prev {
     background-image: url("/icons/icon-p.png")
@@ -401,9 +403,11 @@
     .test47 {
         color: white;
     }
+    /*rtl:rules*/
     .test47left {
         content: "\f007";
     }
+    /*rtl:rules*/
     .test47right {
         content: "\f010";
     }