Multiple changes:

- Improve the output formatting
- Refactored multiple utility methods to make them simpler
- Created a CHANGELOG

CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+## [1.0.2] - 2020-04-12
+
+- Improve the output formatting
+- Refactored multiple utility methods to make them simpler
+- Created a CHANGELOG
+
+## [1.0.1] - 2020-04-11
+
+- Refactored the exported module to be a named exported instead of a default one
+
+## [1.0.0] - 2020-04-11
+
+- Created the postcss-rtlcss package

README.md

@@ -733,7 +733,9 @@ In the next block only the `left` property will be ignored:
 <details><summary>Expand</summary>
 <p>
 
-These directives should be used together, they will provide the beginning and the end for ignoring rules or declarations:
+These directives should be used together, they will provide the beginning and the end for ignoring rules or declarations.
+
+>**Note:** The directives inserted between these blocks will be ignored and maintained in the final output.
 
 Ignoring multiple rules:
 

src/index.ts

@@ -2,7 +2,7 @@ import postcss, { Root, Transformer } from 'postcss';
 import { PluginOptions, RulesObject, Mode } from '@types';
 import { parseOptions } from '@utilities/options';
 import { parseRules } from '@rules/parser';
-import { parseRule } from '@utilities/rules';
+import { cleanRules } from '@utilities/rules';
 export { PluginOptions, Mode, Source, PluginStringMap,  } from '@types';
 
 const transformer = (options: PluginOptions = {}): Transformer  => (
@@ -12,16 +12,14 @@ const transformer = (options: PluginOptions = {}): Transformer  => (
         appends.forEach(({rule, ruleLTR, ruleRTL}): void => {
             if (optionsParsed.mode === Mode.combined) {
                 rule.after(ruleRTL);
-                parseRule(ruleRTL);
-                rule.after(ruleLTR);                
-                parseRule(ruleLTR);  
+                rule.after(ruleLTR);
             } else {                
-                rule.after(ruleLTR || ruleRTL);
-                parseRule(ruleLTR || ruleRTL);                
+                rule.after(ruleLTR || ruleRTL);               
             }
             if (rule.nodes.length === 0) {
                 rule.remove();
             }
+            cleanRules(rule, ruleLTR, ruleRTL);
         });    
     }
 );

src/rules/parser.ts

@@ -1,8 +1,8 @@
 import { Root, Comment, Node, Rule } from 'postcss';
 import { RulesObject, PluginOptionsParsed, Mode } from '@types';
 import { COMMENT_TYPE, IGNORE_MODE, IGNORE_BEGIN, IGNORE_END, RULE_TYPE } from '@constants';
-import { getIgnoreComment, removeRTLComments } from '@utilities/comments';
-import { parseRule } from '@utilities/rules';
+import { getIgnoreComment } from '@utilities/comments';
+import { cleanRuleBefore } from '@utilities/rules';
 import { insertCombinedRules } from './rules-combined';
 import { insertOverrideRules } from './rules-override';
 
@@ -21,7 +21,8 @@ export const parseRules = (css: Root, options: PluginOptionsParsed): RulesObject
             const ignore = getIgnoreComment(comment);
 
             if (ignore) {
-                comment.remove();
+                cleanRuleBefore(comment.next());
+                comment.remove();             
                 switch (ignore) {
                     case IGNORE_BEGIN:
                         ignoreMode = IGNORE_MODE.BLOCK_MODE;
@@ -40,27 +41,23 @@ export const parseRules = (css: Root, options: PluginOptionsParsed): RulesObject
 
         if (node.type === RULE_TYPE) {
 
-            parseRule(node);
-
             if (ignoreMode === IGNORE_MODE.NEXT_RULE) {                
                 ignoreMode = IGNORE_MODE.DISABLED;
-                removeRTLComments(node);
                 return;
             }
 
             if (ignoreMode === IGNORE_MODE.BLOCK_MODE) {
-                removeRTLComments(node);
                 return;
             }
 
             const rule = node as Rule;
 
-            if (options.mode === Mode.override) {
-                insertOverrideRules(appends, rule, options);
-            }
             if (options.mode == Mode.combined) {
                 insertCombinedRules(appends, rule, options);
             }
+            if (options.mode === Mode.override) {
+                insertOverrideRules(appends, rule, options);
+            }            
 
         }
 

src/rules/rules-combined.ts

@@ -2,7 +2,6 @@ import postcss, { Rule, Declaration } from 'postcss';
 import rtlcss from 'rtlcss';
 import { RulesObject, PluginOptionsParsed, Source } from '@types';
 import { DECLARATION_TYPE, COMMENT_TYPE } from '@constants';
-import { removeRTLComments } from '@utilities/comments';
 import { addSelectorPrefixes } from '@utilities/selectors';
 import { getRTLCSSStringMap } from '@utilities/options';
 
@@ -19,7 +18,6 @@ export const insertCombinedRules = (appends: RulesObject[], rule: Rule, options:
     });
 
     if (ruleStr === ruleFlippedtring) {
-        removeRTLComments(rule);
         return;
     }        
 
@@ -57,10 +55,7 @@ export const insertCombinedRules = (appends: RulesObject[], rule: Rule, options:
     });
 
     addSelectorPrefixes(ruleFlipped, source === Source.ltr ? ltrPrefix : rtlPrefix);
-    addSelectorPrefixes(ruleFlippedSecond, source === Source.rtl ? ltrPrefix : rtlPrefix);            
-    removeRTLComments(rule);
-    removeRTLComments(ruleFlipped);
-    removeRTLComments(ruleFlippedSecond);
+    addSelectorPrefixes(ruleFlippedSecond, source === Source.rtl ? ltrPrefix : rtlPrefix);
 
     appends.push({
         rule,

src/rules/rules-override.ts

@@ -2,7 +2,6 @@ import postcss, { Rule, Declaration } from 'postcss';
 import rtlcss from 'rtlcss';
 import { RulesObject, PluginOptionsParsed, Source } from '@types';
 import { DECLARATION_TYPE, FLIP_PROPERTY_REGEXP, COMMENT_TYPE } from '@constants';
-import { removeRTLComments } from '@utilities/comments';
 import { addSelectorPrefixes } from '@utilities/selectors';
 import { getRTLCSSStringMap } from '@utilities/options';
 
@@ -20,7 +19,6 @@ export const insertOverrideRules = (appends: RulesObject[], rule: Rule, options:
     });
 
     if (ruleStr === ruleFlippedtring) {
-        removeRTLComments(rule);
         return;
     }        
 
@@ -50,8 +48,6 @@ export const insertOverrideRules = (appends: RulesObject[], rule: Rule, options:
     });
 
     addSelectorPrefixes(ruleFlipped, prefixes);
-    removeRTLComments(rule);
-    removeRTLComments(ruleFlipped);
 
     appends.push({
         rule,

src/utilities/comments.ts

@@ -1,12 +1,9 @@
-import { Comment, Rule, Node } from 'postcss';
+import { Comment } from 'postcss';
 import {
-    COMMENT_TYPE,
-    DECLARATION_TYPE,
-    RTL_COMMENT_REGEXP,
     RTL_COMMENT_IGNORE_REGEXP,
     IGNORE_NEXT,
     IGNORE_BEGIN,
-    IGNORE_END,
+    IGNORE_END
 } from '@constants';
 
 export const getIgnoreComment = (comment: Comment): string | null => {
@@ -20,22 +17,4 @@ export const getIgnoreComment = (comment: Comment): string | null => {
         }
     }
     return null;
-};
-
-export const removeRTLComments = (rule: Rule): void => {
-    rule.walk((node: Node): void => {
-        if (node.type === COMMENT_TYPE) {
-            if (RTL_COMMENT_REGEXP.test(node.toString())) {
-                node.remove();
-            }
-        }
-        if (node.type === DECLARATION_TYPE) {
-            // @ts-ignore
-            if (node.raws && node.raws.value && RTL_COMMENT_REGEXP.test(node.raws.value.raw)) {
-                // @ts-ignore
-                delete node.raws.value;
-                node.value = node.value.trim();
-            }
-        }
-    });
 };

src/utilities/rules.ts

@@ -1,9 +1,34 @@
-import { Rule } from 'postcss';
+import { Rule, Node } from 'postcss';
+import { COMMENT_TYPE, RTL_COMMENT_REGEXP, DECLARATION_TYPE, RULE_TYPE } from '@constants';
 
-export const parseRule = (rule: Rule): void => {
-    // @ts-ignore
-    rule.cleanRaws();
-    if (rule.root().index(rule) > 0) {
-        rule.raws.before = '\n\n';
+export const cleanRuleBefore = (node: Node | void): void => {
+    if (node && node.type === RULE_TYPE) {
+        node.raws.before = '\n\n';
     }
+};
+
+export const cleanRules = (...rules: (Rule | undefined | null)[]): void => {
+    rules.forEach((rule: Rule | undefined | null): void | undefined => {
+        if (rule) {
+            const prev = rule.prev();
+            if (prev && prev.type !== COMMENT_TYPE) {
+                cleanRuleBefore(rule);
+            }
+            rule.walk((node: Node): void => {
+                if (node.type === COMMENT_TYPE) {
+                    if (RTL_COMMENT_REGEXP.test(node.toString())) {
+                        node.remove();                
+                    }
+                }
+                if (node.type === DECLARATION_TYPE) {
+                    // @ts-ignore
+                    if (node.raws && node.raws.value && RTL_COMMENT_REGEXP.test(node.raws.value.raw)) {
+                        // @ts-ignore
+                        delete node.raws.value;
+                        node.value = node.value.trim();
+                    }
+                }
+            });
+        }
+    });
 };

tests/__snapshots__/combined.test.ts.snap

@@ -25,11 +25,9 @@ exports[`Combined Tests Combined {processUrls: true} 1`] = `
 }
 
 /* Comment not related to rtl */
-
 .test3 {
     margin: 1px 2px 3px;
     padding: 10px 20px;
-
     /* Property comment not related to rtl */
     text-align: center;
 }
@@ -88,7 +86,6 @@ exports[`Combined Tests Combined {processUrls: true} 1`] = `
 }
 
 /* rtl:novalid:ignore */
-
 .test8 {
     display: flex;
     padding-left: 10%;
@@ -194,11 +191,9 @@ exports[`Combined Tests Combined {source: rtl} 1`] = `
 }
 
 /* Comment not related to rtl */
-
 .test3 {
     margin: 1px 2px 3px;
     padding: 10px 20px;
-
     /* Property comment not related to rtl */
     text-align: center;
 }
@@ -257,7 +252,6 @@ exports[`Combined Tests Combined {source: rtl} 1`] = `
 }
 
 /* rtl:novalid:ignore */
-
 .test8 {
     display: flex;
     padding-left: 10%;
@@ -364,11 +358,9 @@ exports[`Combined Tests Combined {useCalc: true} 1`] = `
 }
 
 /* Comment not related to rtl */
-
 .test3 {
     margin: 1px 2px 3px;
     padding: 10px 20px;
-
     /* Property comment not related to rtl */
     text-align: center;
 }
@@ -428,7 +420,6 @@ exports[`Combined Tests Combined {useCalc: true} 1`] = `
 }
 
 /* rtl:novalid:ignore */
-
 .test8 {
     display: flex;
     padding-left: 10%;
@@ -534,11 +525,9 @@ exports[`Combined Tests Combined Basic 1`] = `
 }
 
 /* Comment not related to rtl */
-
 .test3 {
     margin: 1px 2px 3px;
     padding: 10px 20px;
-
     /* Property comment not related to rtl */
     text-align: center;
 }
@@ -597,7 +586,6 @@ exports[`Combined Tests Combined Basic 1`] = `
 }
 
 /* rtl:novalid:ignore */
-
 .test8 {
     display: flex;
     padding-left: 10%;
@@ -703,11 +691,9 @@ exports[`Combined Tests Combined custom ltrPrefix and rtlPrefix properties 1`] =
 }
 
 /* Comment not related to rtl */
-
 .test3 {
     margin: 1px 2px 3px;
     padding: 10px 20px;
-
     /* Property comment not related to rtl */
     text-align: center;
 }
@@ -766,7 +752,6 @@ exports[`Combined Tests Combined custom ltrPrefix and rtlPrefix properties 1`] =
 }
 
 /* rtl:novalid:ignore */
-
 .test8 {
     display: flex;
     padding-left: 10%;
@@ -872,11 +857,9 @@ exports[`Combined Tests Combined custom ltrPrefix and rtlPrefix properties as ar
 }
 
 /* Comment not related to rtl */
-
 .test3 {
     margin: 1px 2px 3px;
     padding: 10px 20px;
-
     /* Property comment not related to rtl */
     text-align: center;
 }
@@ -941,7 +924,6 @@ exports[`Combined Tests Combined custom ltrPrefix and rtlPrefix properties as ar
 }
 
 /* rtl:novalid:ignore */
-
 .test8 {
     display: flex;
     padding-left: 10%;
@@ -1051,11 +1033,9 @@ exports[`Combined Tests Combined custom string map 1`] = `
 }
 
 /* Comment not related to rtl */
-
 .test3 {
     margin: 1px 2px 3px;
     padding: 10px 20px;
-
     /* Property comment not related to rtl */
     text-align: center;
 }
@@ -1114,7 +1094,6 @@ exports[`Combined Tests Combined custom string map 1`] = `
 }
 
 /* rtl:novalid:ignore */
-
 .test8 {
     display: flex;
     padding-left: 10%;