less-plugin-rtl

less-plugin-rtl

Reverses less from ltr to rtl

.reverse {
  float: left;
  margin-left: 5px;
  margin: 1px 2px 3px 4px;
  & when (@rtl) {
    color: green;
  }
}

Becomes...

.reverse {
  float: right;
  margin-right: 5px;
  margin: 1px 4px 3px 2px;
  color: green;
}

To use with lessc

$ npm install -g less-plugin-rtl
$ lessc --rtl file.less out.css

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

$ 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.