less-plugin-rtl - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

test/css/properties-ltr/test.css

+.reverse {
+  float: right;
+  float: left;
+  float: left;
+  margin-right: 5px;
+  margin-left: 5px;
+  margin-left: 5px;
+  font-size: 12px;
+  /* unchanged*/
+  right: 3px;
+  left: 3px;
+  left: 3px;
+}
+.shorthands {
+  margin: 5px;
+  margin: 6px 7px;
+  margin: 1px 7px 3px;
+  margin: 1px 4px 3px 2px;
+  margin: 5px;
+  margin: 6px 7px;
+  margin: 1px 7px 3px;
+  margin: 1px 2px 3px 4px;
+  margin: 5px;
+  margin: 6px 7px;
+  margin: 1px 7px 3px;
+  margin: 1px 2px 3px 4px;
+}

test/css/properties-rtl/test.css

+.reverse {
+  float: left;
+  float: right;
+  float: right;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-right: 5px;
+  font-size: 12px;
+  /* unchanged*/
+  left: 3px;
+  right: 3px;
+  right: 3px;
+}
+.shorthands {
+  margin: 5px;
+  margin: 6px 7px;
+  margin: 1px 7px 3px;
+  margin: 1px 2px 3px 4px;
+  margin: 5px;
+  margin: 6px 7px;
+  margin: 1px 7px 3px;
+  margin: 1px 4px 3px 2px;
+  margin: 5px;
+  margin: 6px 7px;
+  margin: 1px 7px 3px;
+  margin: 1px 4px 3px 2px;
+}

test/less/properties-ltr/test.less

+.reverse {
+  -ltr-reverse-float: left;
+  -ltr-float: left;
+  -rtl-reverse-float: left;
+  -rtl-float: left;
+
+  -ltr-reverse-margin-left: 5px;
+  -ltr-margin-left: 5px;
+  -rtl-reverse-margin-left: 5px;
+  -rtl-margin-left: 5px;
+
+  font-size: 12px; /* unchanged*/
+
+  -ltr-reverse-left: 3px;
+  -ltr-left: 3px;
+  -rtl-reverse-left: 3px;
+  -rtl-left: 3px;
+}
+.shorthands {
+  @top: 1px;
+  @right: 2px;
+  @bottom: 3px;
+  @left: 4px;
+  @all: 5px;
+  @vertical: 6px;
+  @horizontal: 7px;
+
+  -ltr-reverse-margin: @all;
+  -ltr-reverse-margin: @vertical @horizontal;
+  -ltr-reverse-margin: @top @horizontal @bottom;
+  -ltr-reverse-margin: @top @right @bottom @left;
+
+  -ltr-margin: @all;
+  -ltr-margin: @vertical @horizontal;
+  -ltr-margin: @top @horizontal @bottom;
+  -ltr-margin: @top @right @bottom @left;
+
+  -rtl-reverse-margin: @all;
+  -rtl-reverse-margin: @vertical @horizontal;
+  -rtl-reverse-margin: @top @horizontal @bottom;
+  -rtl-reverse-margin: @top @right @bottom @left;
+
+  -rtl-margin: @all;
+  -rtl-margin: @vertical @horizontal;
+  -rtl-margin: @top @horizontal @bottom;
+  -rtl-margin: @top @right @bottom @left;
+}

test/less/properties-rtl/test.less

+.reverse {
+  -ltr-reverse-float: left;
+  -ltr-float: left;
+  -rtl-reverse-float: left;
+  -rtl-float: left;
+
+  -ltr-reverse-margin-left: 5px;
+  -ltr-margin-left: 5px;
+  -rtl-reverse-margin-left: 5px;
+  -rtl-margin-left: 5px;
+
+  font-size: 12px; /* unchanged*/
+
+  -ltr-reverse-left: 3px;
+  -ltr-left: 3px;
+  -rtl-reverse-left: 3px;
+  -rtl-left: 3px;
+}
+.shorthands {
+  @top: 1px;
+  @right: 2px;
+  @bottom: 3px;
+  @left: 4px;
+  @all: 5px;
+  @vertical: 6px;
+  @horizontal: 7px;
+
+  -ltr-reverse-margin: @all;
+  -ltr-reverse-margin: @vertical @horizontal;
+  -ltr-reverse-margin: @top @horizontal @bottom;
+  -ltr-reverse-margin: @top @right @bottom @left;
+
+  -ltr-margin: @all;
+  -ltr-margin: @vertical @horizontal;
+  -ltr-margin: @top @horizontal @bottom;
+  -ltr-margin: @top @right @bottom @left;
+
+  -rtl-reverse-margin: @all;
+  -rtl-reverse-margin: @vertical @horizontal;
+  -rtl-reverse-margin: @top @horizontal @bottom;
+  -rtl-reverse-margin: @top @right @bottom @left;
+
+  -rtl-margin: @all;
+  -rtl-margin: @vertical @horizontal;
+  -rtl-margin: @top @horizontal @bottom;
+  -rtl-margin: @top @right @bottom @left;
+}

lib/index.js

@@ -10,7 +10,8 @@ var getRTLPlugin = require("./rtl-plugin"),
     install: function(less, pluginManager) {
-        if (this.options.dir === "RTL") {
-            var RTLPlugin = getRTLPlugin(less);
-            pluginManager.addVisitor(new RTLPlugin());
+        var RTLPlugin = getRTLPlugin(less);
+        pluginManager.addVisitor(new RTLPlugin(this.options));
+
+        if (this.options.vars !== false) {
+            pluginManager.addPreProcessor(new RTLVariablePlugin(this.options.dir === "RTL"));
         }
-        pluginManager.addPreProcessor(new RTLVariablePlugin(this.options.dir === "RTL"));
     },
@@ -29,8 +30,34 @@ printUsage: function () {
         if (typeof options === "string") {
-            var args = options.match(/dir=(RTL|LTR)/);
-            if (!args) {
-                throw new Error("Invalid options for ");
-            }
-            options = {dir: args[1]};
+            var spaceSepOptions = options.split(" ");
+            options = { };
+            spaceSepOptions.forEach(function(arg) {
+                var match = arg.match(/^(--)?dir=(RTL|LTR)$/);
+                if (match) {
+                    options.dir = match[2];
+                    return;
+                }
+                match = arg.match(/^(--)?vars(=(true|false))?$/);
+                if (match) {
+                    options.vars = match[2] !== "false";
+                    return;
+                }
+
+                match = arg.match(/^(--)?auto-reverse(=(true|false))?$/);
+                if (match) {
+                    options.autoReverse = match[2] !== "false";
+                    return;
+                }
+
+                throw new Error("Invalid options - '" + arg + "'");
+            });
         }
+
+        options.autoReverse = options.autoReverse !== false;
+        options.vars = options.vars !== false;
+        options.dir = options.dir || "RTL";
+
+        if (options.dir !== "LTR" && options.dir !== "RTL") {
+            throw new Error("Bad direction - use LTR or RTL");
+        }
+
         return options;
@@ -37,0 +64,0 @@ },

lib/rtl-plugin.js

@@ -6,3 +6,4 @@ module.exports = function(less) {
     
-    function RTLPlugin() {
+    function RTLPlugin(options) {
+        this._options = options;
         this._visitor = new less.visitors.Visitor(this);
@@ -29,12 +30,63 @@ };
         visitRule: function (ruleNode, visitArgs) {
-            if (!ruleNode.variable && ruleNode.name.match(/(^|-)(left|right)($|-)/)) {
+
+            if (ruleNode.variable) {
+                return ruleNode;
+            }
+
+            var nodeName = ruleNode.name,
+              wantedDir = this._options.dir,
+              doReverse = this._options.autoReverse && wantedDir === "RTL",
+              doRemove = false,
+              match;
+
+            if (match = nodeName.match(/^-rtl-reverse-(.*)$/)) {
+                doReverse = wantedDir === "RTL";
+                nodeName = match[1];
+            }
+            else if (match = nodeName.match(/^-ltr-reverse-(.*)$/)) {
+                doReverse = wantedDir === "LTR";
+                nodeName = match[1];
+            }
+            else if (match = nodeName.match(/^(-rtl-ltr-|-ltr-rtl-)(.*)$/)) {
+                doReverse = false;
+                nodeName = match[1];
+            }
+            else if (match = nodeName.match(/^-ltr-(.*)$/)) {
+                doRemove = wantedDir === "RTL";
+                nodeName = match[1];
+            }
+            else if (match = nodeName.match(/^-rtl-(.*)$/)) {
+                doRemove = wantedDir === "LTR";
+                nodeName = match[1];
+            }
+
+            if (doRemove) {
+                return;
+            }
+
+            if (!doReverse && !doRemove && nodeName === ruleNode.name) {
+                return ruleNode;
+            }
+
+            if (doReverse && nodeName.match(/(^|-)(left|right)($|-)/)) {
+                nodeName = nodeName.replace(/(^|-)(left|right)($|-)/, function(allOfMatch, leftPart, replacePart, rightPart) {
+                    if (replacePart === "left") {
+                        replacePart = "right";
+                    } else {
+                        replacePart = "left";
+                    }
+                    return leftPart + replacePart + rightPart;
+                });
+            }
+
+            if (doReverse && keywordProperties.indexOf(nodeName) >= 0) {
+                this._reverseKeywords = true;
+            }
+            else if (doReverse && shortHandProperties.indexOf(nodeName) >= 0) {
+                this._shortHandReorder = true;
+            }
+
+            if (nodeName !== ruleNode.name) {
                 return new less.tree.Rule(
-                    ruleNode.name.replace(/(^|-)(left|right)($|-)/, function(allOfMatch, leftPart, replacePart, rightPart) {
-                        if (replacePart === "left") {
-                            replacePart = "right";
-                        } else {
-                            replacePart = "left";
-                        }
-                        return leftPart + replacePart + rightPart;
-                    }),
+                    nodeName,
                     ruleNode.value,
@@ -47,9 +99,4 @@ ruleNode.important,
                     ruleNode.variable);
-            } else
-            if (keywordProperties.indexOf(ruleNode.name) >= 0) {
-                this._reverseKeywords = true;
-            } else
-            if (shortHandProperties.indexOf(ruleNode.name) >= 0) {
-                this._shortHandReorder = true;
             }
+
             return ruleNode;
@@ -56,0 +103,0 @@ },

lib/rtl-variable-plugin.js

@@ -6,3 +6,3 @@ function RTLVariablePlugin(isRTL) {
 RTLVariablePlugin.prototype.process = function(src, extra) {
-    var variable = "@rtl: " + String(this.isRTL) + "; @ltr: " + String(!this.isRTL) + ";\n";
+    var variable = "@rtl: " + String(this.isRTL) + "; @ltr: " + String(!this.isRTL) + ";\n" + "@dir:" + (this.isRTL ? "rtl" : "ltr") + ";\n";
     var contentsIgnoredChars = extra.imports.contentsIgnoredChars;
@@ -9,0 +9,0 @@ var filename = extra.fileInfo.filename;

package.json

 {
     "name": "less-plugin-rtl",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "description": "ltr to rtl less plugin",
@@ -5,0 +5,0 @@ "homepage": "http://lesscss.org",

README.md

@@ -37,6 +37,72 @@ [![NPM version](https://badge.fury.io/js/less-plugin-rtl.svg)](http://badge.fury.io/js/less-plugin-rtl) [![Dependencies](https://david-dm.org/less/less-plugin-rtl.svg)](https://david-dm.org/less/less-plugin-rtl) [![devDependency Status](https://david-dm.org/less/less-plugin-rtl/dev-status.svg)](https://david-dm.org/less/less-plugin-rtl#info=devDependencies) [![optionalDependency Status](https://david-dm.org/less/less-plugin-rtl/optional-status.svg)](https://david-dm.org/less/less-plugin-rtl#info=optionalDependencies)
 
-and to run in LTR mode..
+Variables
+=========
 
+Three variables are injected `ltr` and `rtl` which will be set to true or false and `dir` which will be set to `rtl` or `ltr`.
+
+Property Reversing
+==================
+
+To be more in control of properties that get reversed, you can specify property directives
+ 
+```
+.test {
+    -ltr-padding: 0; // rule only appears in LTR
+    -rtl-margin: 3px; // rule only appears in RTL
+    -ltr-rtl-float: left; // rule does not get reversed in either direction if autoReverse is on
+    -rtl-ltr-float: left; // rule does not get reversed in either direction if autoReverse is on
+    -ltr-reverse-text-align: left; // rule gets reversed for LTR, so in this case RTL = left, LTR = right
+    -rtl-reverse-text-align: left; // rule gets reversed for RTL, so in this case RTL = right, LTR = left
+}
+```
+
+Note: The reverse rules only make sense if autoreverse is off.
+
+And this produces in RTL..
+```
+.test {
+    margin: 3px;
+    float: left;
+    float: left;
+    text-align: left;
+    text-align: right;
+}
+```
+
+and in LTR...
+```
+.test {
+    padding: 0;
+    float: left;
+    float: left;
+    text-align: right;
+    text-align: left;
+}
+```
+
+CLI Options
+===========
+
 ```bash
-$ lessc --rtl="dir=LTR" file.less out.css
-```
+$ lessc --rtl="dir=LTR auto-reverse=false vars=false" file.less out.css
+```
+
+auto-reverse
+------------
+
+Whether rules should be auto reversed or require property directives as above. Defaults to true.
+
+vars
+----
+
+Whether the variables should be available. Defaults to true.
+
+dir
+---
+
+The intended direction. Defaults to RTL.
+
+Programmatic Options
+====================
+
+As above, but use `dir`, `vars` and `autoReverse` on the options object.

test/css/ltr/test.css

 .reverse {
   float: left;
   float: right /*comment*/;
+  float: left !important;
   margin-left: 5px;
@@ -16,2 +17,6 @@ padding-right: 3px;
   margin: 1px 2px 3px 4px;
+  margin: 1px 2px 3px 4px !important;
 }
+.ltr-only {
+  padding: 4px;
+}

test/css/rtl/test.css

 .reverse {
   float: right;
   float: left /*comment*/;
+  float: right !important;
   margin-right: 5px;
@@ -16,2 +17,3 @@ padding-left: 3px;
   margin: 1px 4px 3px 2px;
+  margin: 1px 4px 3px 2px !important;
 }
@@ -18,0 +20,0 @@ .rtl-only {

test/index.js

@@ -6,3 +6,5 @@ var less = require("less"),
     rtlPlugin = new Plugin(),
-    ltrPlugin = new Plugin("dir=LTR"),
+    ltrPlugin = new Plugin("dir=LTR --auto-reverse vars=true"),
+    propertiesRtlPlugin = new Plugin("dir=RTL --auto-reverse=false"),
+    propertiesLtrPlugin = new Plugin("dir=LTR --auto-reverse=false"),
     stylize = less.lesscHelper.stylize;
@@ -17,6 +19,14 @@
     {strictMath: true, relativeUrls: true, silent: true, plugins: [ltrPlugin] },
-    "ltr/")
+    "ltr/");
 
+lessTester.runTestSet(
+  {strictMath: true, relativeUrls: true, silent: true, plugins: [propertiesRtlPlugin] },
+  "properties-rtl/");
+
+lessTester.runTestSet(
+  {strictMath: true, relativeUrls: true, silent: true, plugins: [propertiesLtrPlugin] },
+  "properties-ltr/");
+
 if (lessTester.finish) {
 	lessTester.finish();
 }

test/less/ltr/test.less

 .reverse {
   float: left;
   float: right/*comment*/;
+  float: left !important;
   margin-left: 5px;
@@ -23,2 +24,3 @@ padding-right: 3px;
   margin: @top @right @bottom @left;
+  margin: @top @right @bottom @left !important;
 }
@@ -29,2 +31,7 @@ & when (@rtl) {
   }
+}
+& when (@dir = ltr) {
+  .ltr-only {
+    padding: 4px;
+  }
 }

test/less/rtl/test.less

 .reverse {
   float: left;
   float: right/*comment*/;
+  float: right !important;
   margin-left: 5px;
@@ -23,2 +24,3 @@ padding-right: 3px;
   margin: @top @right @bottom @left;
+  margin: @top @right @bottom @left !important;
 }
@@ -29,2 +31,7 @@ & when (@rtl) {
   }
-}
+}
+& when (@dir = ltr) {
+  .ltr-only {
+    padding: 4px;
+  }
+}

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28441

38.94%

Number of package files

16

33.33%

Lines of code

294

77.11%

Number of low quality alerts

0

-100%

Number of lines in readme file

108

163.41%

No dependency changes