Re-order shorthand properties

less · Feb 18, 2015 · cdd8318 · cdd8318
1 parent 23b2e72
commit cdd8318
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/lib/rtl-plugin.js b/lib/rtl-plugin.js
@@ -1,5 +1,7 @@
 module.exports = function(less) {
 
+    var shortHandProperties = ["margin", "border-width", "padding", "border-radius", "border", "border-style"];
+
     function RTLPlugin() {
         this._visitor = new less.visitors.Visitor(this);
     };
@@ -39,19 +41,31 @@ module.exports = function(less) {
                     ruleNode.currentFileInfo,
                     ruleNode.inline,
                     ruleNode.variable);
-            } else if (ruleNode.name === "float") {
+            } else
+            if (ruleNode.name === "float") {
                 this._reverseKeywords = true;
+            } else
+            if (shortHandProperties.indexOf(ruleNode.name) >= 0) {
+                this._shortHandReorder = true;
             }
             return ruleNode;
         },
         visitRuleOut: function () {
             this._reverseKeywords = false;
+            this._shortHandReorder = false;
         },
         visitAnonymous: function(anonNode, visitArgs) {
             return reverseKeyword(this._reverseKeywords, anonNode);
         },
         visitKeyword: function (keywordNode, visitArgs) {
             return reverseKeyword(this._reverseKeywords, keywordNode);
+        },
+        visitExpression: function (expressionNode, visitArgs) {
+            if (this._shortHandReorder && expressionNode.value.length === 4) {
+                this._shortHandReorder = false;
+                return new less.tree.Expression([expressionNode.value[0], expressionNode.value[3], expressionNode.value[2], expressionNode.value[1]]);
+            }
+            return expressionNode;
         }
     };
     return RTLPlugin;

diff --git a/test/css/rtl/test.css b/test/css/rtl/test.css
@@ -8,3 +8,9 @@
   right: 3px;
   border-right-style: dashed;
 }
+.shorthands {
+  margin: 5px;
+  margin: 6px 7px;
+  margin: 1px 7px 3px;
+  margin: 1px 4px 3px 2px;
+}
diff --git a/test/less/rtl/test.less b/test/less/rtl/test.less
@@ -7,3 +7,17 @@
   left: 3px;
   border-left-style: dashed;
 }
+.shorthands {
+  @top: 1px;
+  @right: 2px;
+  @bottom: 3px;
+  @left: 4px;
+  @all: 5px;
+  @vertical: 6px;
+  @horizontal: 7px;
+
+  margin: @all;
+  margin: @vertical @horizontal;
+  margin: @top @horizontal @bottom;
+  margin: @top @right @bottom @left;
+}