Socket
Socket
Sign inDemoInstall

less-plugin-rtl

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

less-plugin-rtl - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

test/css/properties-ltr/test.css

45

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 @@ },

79

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 @@ },

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc