Skip to content

Commit 9b62113

Browse files
lukeapagelukeapage
committed
enhancements - support dot less rtl plugin like property names
1 parent 2fe6b89 commit 9b62113

File tree

11 files changed

+207
-29
lines changed

11 files changed

+207
-29
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,6 @@ node_modules
2626

2727
# Users Environment Variables
2828
.lock-wscript
29+
30+
#Webstorm
31+
.idea

‎lib/index.js

+36-9
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ function LessPluginRTL(options) {
77

88
LessPluginRTL.prototype = {
99
install: function(less, pluginManager) {
10-
if (this.options.dir === "RTL") {
11-
var RTLPlugin = getRTLPlugin(less);
12-
pluginManager.addVisitor(new RTLPlugin());
10+
var RTLPlugin = getRTLPlugin(less);
11+
pluginManager.addVisitor(new RTLPlugin(this.options));
12+
13+
if (this.options.vars !== false) {
14+
pluginManager.addPreProcessor(new RTLVariablePlugin(this.options.dir === "RTL"));
1315
}
14-
pluginManager.addPreProcessor(new RTLVariablePlugin(this.options.dir === "RTL"));
1516
},
1617
printUsage: function () {
1718
console.log("RTL Plugin");
@@ -25,12 +26,38 @@ LessPluginRTL.prototype = {
2526
options = {dir: "RTL"};
2627
}
2728
if (typeof options === "string") {
28-
var args = options.match(/dir=(RTL|LTR)/);
29-
if (!args) {
30-
throw new Error("Invalid options for ");
31-
}
32-
options = {dir: args[1]};
29+
var spaceSepOptions = options.split(" ");
30+
options = { };
31+
spaceSepOptions.forEach(function(arg) {
32+
var match = arg.match(/^(--)?dir=(RTL|LTR)$/);
33+
if (match) {
34+
options.dir = match[1];
35+
return;
36+
}
37+
match = arg.match(/^(--)?vars(=(true|false))?$/);
38+
if (match) {
39+
options.vars = match[1] !== false;
40+
return;
41+
}
42+
43+
match = arg.match(/^(--)?auto-reverse(=(true|false))?$/);
44+
if (match) {
45+
options.autoReverse = match[1] !== false;
46+
return;
47+
}
48+
49+
throw new Error("Invalid options - '" + arg + "'");
50+
});
3351
}
52+
53+
options.autoReverse = options.autoReverse !== false;
54+
options.vars = options.vars !== false;
55+
options.dir = options.dir || "LTR";
56+
57+
if (options.dir !== "LTR" && options.dir !== "RTL") {
58+
throw new Error("Bad direction - use LTR or RTL");
59+
}
60+
3461
return options;
3562
},
3663
minVersion: [2, 4, 0]

‎lib/rtl-plugin.js

+63-16
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ module.exports = function(less) {
33
var shortHandProperties = ["margin", "border-width", "padding", "border-radius", "border", "border-style"];
44
var keywordProperties = ["float", "text-align"];
55

6-
function RTLPlugin() {
6+
function RTLPlugin(options) {
7+
this._options = options;
78
this._visitor = new less.visitors.Visitor(this);
89
};
910

@@ -25,30 +26,76 @@ module.exports = function(less) {
2526
return this._visitor.visit(root);
2627
},
2728
visitRule: function (ruleNode, visitArgs) {
28-
if (!ruleNode.variable && ruleNode.name.match(/(^|-)(left|right)($|-)/)) {
29+
30+
if (ruleNode.variable) {
31+
return ruleNode;
32+
}
33+
34+
var nodeName = ruleNode.name,
35+
wantedDir = this._options.dir,
36+
doReverse = this._options.autoReverse && wantedDir === "RTL",
37+
doRemove = false,
38+
match;
39+
40+
if (match = nodeName.match(/^-rtl-reverse-(.*)$/)) {
41+
doReverse = wantedDir === "RTL";
42+
nodeName = match[1];
43+
}
44+
else if (match = nodeName.match(/^-ltr-reverse-(.*)$/)) {
45+
doReverse = wantedDir === "LTR";
46+
nodeName = match[1];
47+
}
48+
else if (match = nodeName.match(/^(-rtl-ltr-|-ltr-rtl-)(.*)$/)) {
49+
doReverse = false;
50+
nodeName = match[1];
51+
}
52+
else if (match = nodeName.match(/^-ltr-(.*)$/)) {
53+
doRemove = wantedDir === "RTL";
54+
nodeName = match[1];
55+
}
56+
else if (match = nodeName.match(/^-rtl-(.*)$/)) {
57+
doRemove = wantedDir === "LTR";
58+
nodeName = match[1];
59+
}
60+
61+
if (doRemove) {
62+
return;
63+
}
64+
65+
if (!doReverse && !doRemove && nodeName === ruleNode.name) {
66+
return ruleNode;
67+
}
68+
69+
if (doReverse && nodeName.match(/(^|-)(left|right)($|-)/)) {
70+
nodeName = nodeName.replace(/(^|-)(left|right)($|-)/, function(allOfMatch, leftPart, replacePart, rightPart) {
71+
if (replacePart === "left") {
72+
replacePart = "right";
73+
} else {
74+
replacePart = "left";
75+
}
76+
return leftPart + replacePart + rightPart;
77+
});
78+
}
79+
80+
if (doReverse && keywordProperties.indexOf(nodeName) >= 0) {
81+
this._reverseKeywords = true;
82+
}
83+
else if (doReverse && shortHandProperties.indexOf(nodeName) >= 0) {
84+
this._shortHandReorder = true;
85+
}
86+
87+
if (nodeName !== ruleNode.name) {
2988
return new less.tree.Rule(
30-
ruleNode.name.replace(/(^|-)(left|right)($|-)/, function(allOfMatch, leftPart, replacePart, rightPart) {
31-
if (replacePart === "left") {
32-
replacePart = "right";
33-
} else {
34-
replacePart = "left";
35-
}
36-
return leftPart + replacePart + rightPart;
37-
}),
89+
nodeName,
3890
ruleNode.value,
3991
ruleNode.important,
4092
ruleNode.merge,
4193
ruleNode.index,
4294
ruleNode.currentFileInfo,
4395
ruleNode.inline,
4496
ruleNode.variable);
45-
} else
46-
if (keywordProperties.indexOf(ruleNode.name) >= 0) {
47-
this._reverseKeywords = true;
48-
} else
49-
if (shortHandProperties.indexOf(ruleNode.name) >= 0) {
50-
this._shortHandReorder = true;
5197
}
98+
5299
return ruleNode;
53100
},
54101
visitRuleOut: function () {

‎lib/rtl-variable-plugin.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ function RTLVariablePlugin(isRTL) {
33
}
44

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

‎test/css/ltr/test.css

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.reverse {
22
float: left;
33
float: right /*comment*/;
4+
float: left !important;
45
margin-left: 5px;
56
padding-right: 3px;
67
font-size: 12px;
@@ -13,4 +14,8 @@
1314
margin: 6px 7px;
1415
margin: 1px 7px 3px;
1516
margin: 1px 2px 3px 4px;
17+
margin: 1px 2px 3px 4px !important;
18+
}
19+
.ltr-only {
20+
padding: 4px;
1621
}

‎test/css/properties-rtl/test.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.reverse {
2+
float: right;
3+
float: left;
4+
float: left;
5+
margin-right: 5px;
6+
margin-left: 5px;
7+
margin-left: 5px;
8+
font-size: 12px;
9+
/* unchanged*/
10+
right: 3px;
11+
left: 3px;
12+
left: 3px;
13+
}
14+
.shorthands {
15+
margin: 5px;
16+
margin: 6px 7px;
17+
margin: 1px 7px 3px;
18+
margin: 1px 4px 3px 2px;
19+
margin: 5px;
20+
margin: 6px 7px;
21+
margin: 1px 7px 3px;
22+
margin: 1px 2px 3px 4px;
23+
margin: 5px;
24+
margin: 6px 7px;
25+
margin: 1px 7px 3px;
26+
margin: 1px 2px 3px 4px;
27+
}

‎test/css/rtl/test.css

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.reverse {
22
float: right;
33
float: left /*comment*/;
4+
float: right !important;
45
margin-right: 5px;
56
padding-left: 3px;
67
font-size: 12px;
@@ -13,6 +14,7 @@
1314
margin: 6px 7px;
1415
margin: 1px 7px 3px;
1516
margin: 1px 4px 3px 2px;
17+
margin: 1px 4px 3px 2px !important;
1618
}
1719
.rtl-only {
1820
margin: 3px;

‎test/index.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ var less = require("less"),
33
lessTester = lessTest(),
44
Plugin = require('../lib'),
55
rtlPlugin = new Plugin(),
6-
ltrPlugin = new Plugin("dir=LTR"),
6+
ltrPlugin = new Plugin("dir=LTR --auto-reverse vars=true"),
7+
propertiesRtlPlugin = new Plugin("dir=RTL --auto-reverse=false"),
78
stylize = less.lesscHelper.stylize;
89

910
console.log("\n" + stylize("LESS - RTL", 'underline') + "\n");
@@ -13,7 +14,12 @@ lessTester.runTestSet(
1314
"rtl/");
1415
lessTester.runTestSet(
1516
{strictMath: true, relativeUrls: true, silent: true, plugins: [ltrPlugin] },
16-
"ltr/")
17+
"ltr/");
18+
19+
lessTester.runTestSet(
20+
{strictMath: true, relativeUrls: true, silent: true, plugins: [propertiesRtlPlugin] },
21+
"properties-rtl/");
22+
1723

1824
if (lessTester.finish) {
1925
lessTester.finish();

‎test/less/ltr/test.less

+7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.reverse {
22
float: left;
33
float: right/*comment*/;
4+
float: left !important;
45
margin-left: 5px;
56
padding-right: 3px;
67
font-size: 12px; /* unchanged*/
@@ -20,9 +21,15 @@
2021
margin: @vertical @horizontal;
2122
margin: @top @horizontal @bottom;
2223
margin: @top @right @bottom @left;
24+
margin: @top @right @bottom @left !important;
2325
}
2426
& when (@rtl) {
2527
.rtl-only {
2628
margin: 3px;
2729
}
30+
}
31+
& when (@dir = ltr) {
32+
.ltr-only {
33+
padding: 4px;
34+
}
2835
}

‎test/less/properties-rtl/test.less

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.reverse {
2+
-ltr-reverse-float: left;
3+
-ltr-float: left;
4+
-rtl-reverse-float: left;
5+
-rtl-float: left;
6+
7+
-ltr-reverse-margin-left: 5px;
8+
-ltr-margin-left: 5px;
9+
-rtl-reverse-margin-left: 5px;
10+
-rtl-margin-left: 5px;
11+
12+
font-size: 12px; /* unchanged*/
13+
14+
-ltr-reverse-left: 3px;
15+
-ltr-left: 3px;
16+
-rtl-reverse-left: 3px;
17+
-rtl-left: 3px;
18+
}
19+
.shorthands {
20+
@top: 1px;
21+
@right: 2px;
22+
@bottom: 3px;
23+
@left: 4px;
24+
@all: 5px;
25+
@vertical: 6px;
26+
@horizontal: 7px;
27+
28+
-ltr-reverse-margin: @all;
29+
-ltr-reverse-margin: @vertical @horizontal;
30+
-ltr-reverse-margin: @top @horizontal @bottom;
31+
-ltr-reverse-margin: @top @right @bottom @left;
32+
33+
-ltr-margin: @all;
34+
-ltr-margin: @vertical @horizontal;
35+
-ltr-margin: @top @horizontal @bottom;
36+
-ltr-margin: @top @right @bottom @left;
37+
38+
-rtl-reverse-margin: @all;
39+
-rtl-reverse-margin: @vertical @horizontal;
40+
-rtl-reverse-margin: @top @horizontal @bottom;
41+
-rtl-reverse-margin: @top @right @bottom @left;
42+
43+
-rtl-margin: @all;
44+
-rtl-margin: @vertical @horizontal;
45+
-rtl-margin: @top @horizontal @bottom;
46+
-rtl-margin: @top @right @bottom @left;
47+
}

‎test/less/rtl/test.less

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.reverse {
22
float: left;
33
float: right/*comment*/;
4+
float: right !important;
45
margin-left: 5px;
56
padding-right: 3px;
67
font-size: 12px; /* unchanged*/
@@ -20,9 +21,15 @@
2021
margin: @vertical @horizontal;
2122
margin: @top @horizontal @bottom;
2223
margin: @top @right @bottom @left;
24+
margin: @top @right @bottom @left !important;
2325
}
2426
& when (@rtl) {
2527
.rtl-only {
2628
margin: 3px;
2729
}
28-
}
30+
}
31+
& when (@dir = ltr) {
32+
.ltr-only {
33+
padding: 4px;
34+
}
35+
}

0 commit comments

Comments
 (0)