Implement new directives to control processRuleNames option

elchininet · Dec 30, 2023 · f900892 · f900892
1 parent 349e04f
commit f900892
Show file tree

Hide file tree

Showing 9 changed files with 542 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -113,6 +113,7 @@ export const parseRules = (
                     rule,
                     hasParentRule,
                     sourceDirectiveValue,
+                    checkDirective(controlDirectives, CONTROL_DIRECTIVE.RULES),
                     checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS)
                 );
             }