less-plugin-rtl
Advanced tools
Comparing version 0.1.0 to 1.0.0
@@ -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 @@ }, |
@@ -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 @@ }, |
@@ -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; |
{ | ||
"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", |
@@ -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. |
@@ -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(); | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
28441
16
294
0
108