mohammadyounes / rtlcss

Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)

RTLCSS

RTLCSS is a framework for converting Left-To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL).

Documentation

Visit https://rtlcss.com/learn/

Playground

Visit https://rtlcss.com/playground/

Bugs and Issues

Have a bug or a feature request? please feel free to open a new issue.

Release Notes

To view changes in recent versions, see the CHANGELOG.

Support

RTLCSS is saving you and your team a tremendous amount of time and effort? Buy Me a Coffee ☕

rtlcss's Issues

support `border-color`

property doesn't seem to be supported. feature missing compared to https://github.com/twitter/css-flip

Usage with Webpack

It's not an issue but rather a question on how to use it with Webpack and postcss. My scenario is to produce two different packages one with RTL and the other is with LTR and to request one of them based on interface switching.

Any idea would be highly appreciated!

Feature: Ability to remove rule(s) or declaration(s)

Unlike ignore, a new directive to remove the rules from RTL version.

Upgrade to postcss 4.0

Likely to involve some small changes to support 4.0 API

Remove non-override code

Hello there,

Firstly, I would like to thank you for the great plugin it make things easier to build an rtl version of any css file.

Secondly, I would like to suggest a feature or a flag that only export the reflected rules/properties only into the output file instead exporting all the rules/properties into the output file. Some CMSs e.g Drupal uses the convention of style.css for all ltr languages and style-rtl.css for rtl, basically when viewing the drupal site as a ltr language the style.css only is called and if viewing the site using a rtl language the style.css get included first and the style-rtl.css get included second where the rtl file only overrides the properties that needs to be reflected to rtl. That option will benefit such systems without any need to remove the original style.css file from the rtl version.

It will be great if we could have an option to export only the overridden css properties, I am using gulp-rtlcss with less to compile my css.

Thank You.

OPTION: enable auto rename only when a pair exist

i.e:
while the example with i.icon.angle.left:before and i.icon.angle.right:before show it potential,
this can get out of hand fast, consider the following:

<div class="left-item"">...</div>

.left-item { background-color: blue;}

but without a matching right-item class in the markup.

auto rename will replace the class in the css, leaving the markup pointing nowhere.

and since unfortunately this is frequent, i would like an option for auto rename to not only limit replacing when there is a directional content, but also (or even instead) when he can NOT find a mirror selector.

i know this is a big feature, but without that ... auto rename will be mostly disabled.

other option is allowing to run auto rename on its own?
this way, one can turn it off, run trough RTLCSS,
than run the rtl-ed results through auto rename,
making the diff to inspect such cases in the markup a lot smaller.
(this will work when one have control over the markup)

Selectors with directional substring are not being renamed

Hi,
I'm new to this library, and I can't understand how I turn on selector renaming (from the docs I understood it's given by default, but I can't make it work).

For example:
rtlcss.process(".navbar-right { float: right !important; }", {greedy: true});
Will create the following:
.navbar-right { float: left !important; }

The value is being converted, but the selector isn't.
I would like the above example to create this string:
.navbar-left { float: left !important; }

How can it be? Am I doing something wrong?

Thanks,
Tomer

problem with non-static positioning

hi there is something about rtling a css file that usually is ignored.
when there is a left or right rule for a selector with non-static position in rtl proccessing that rule first : must take auto value. and second must be filliped.ie:

left: 10px;

must convert into:

left: auto;
right: 10px;

if not that selector now have 2 rule:

left: 10px;
right: 10px;

Feature: Ability to ignore a set of rules

Add the ability to surround a set of rules with a directive to prevent rtl conversion.(details)

CLI: Support for input source maps

Maybe I've missed sommething, but input source maps don't seem to be taken into account. Our compiled Sass code has a source map, but rtlcss only maps back to the Sass' CSS output instead of the original Sass files.

Also, the generated source map file only contains the text "undefined" and the source map itself is inlined as a data URI in the output CSS.

I guess something is wrong here!

Could you please check this behaviour?

require("rtlcss").process(`.text-left {
  text-align: left;
}`, {
  autoRename: false
});
// output: '.text-left { text-align: right; }'

require("rtlcss").process(`.text-left {
  text-align: left;
}`, {
  autoRename: true
});
// output: '.text-left { text-align: right; }'

How could I get it to rename them both or ignore them both?

Auto-generate RTL styles in same stylesheet

Awesome project here! At Mozilla, we've been writing RTL styles by hand for years for all our fully localised sites. It's great to now have a tool that can auto-generate styles from LTR stylesheets (though, it'd be great it RTL stylesheets could be generated from LTR stylesheets).

Instead of having to conditionally load in RTL stylesheets, we treat RTL languages as first-class citizens and actually include [dir=rtl] for only RTL style overrides. Here's an example lifted from the Firefox Marketplace CSS:

.category-header-icon {
  display: inline-block;
  margin-left: 6px;
}

[dir=rtl] .category-header-icon {
  margin-left: 0;
  margin-right: 6px;
}

rtlcss is awesome, but would it be possible to, instead of generating a separate RTL stylesheet, to auto-generate the RTL in the same stylesheet? Here are two suggested sample uses I can think of:

RTL styles extend LTR styles

input

.category-header-icon {
  display: inline-block;
  margin-left: 6px;
}

output

[dir=rtl] .category-header-icon {
  margin-left: 0;
  margin-right: 6px;
}

target LTR and RTL separately

When the direction style needs to be different, you can just target [dir].

input

[dir=ltr] .category-header-icon {
  display: inline-block;
  margin-left: 6px;
}

output

[dir=rtl] .category-header-icon {
  display: inline-block;
  margin-right: 6px;
}

Thanks!

Support Flex

Hi, thanks as always Mohammad for your hard work with RTLCSS.

Since we swapped many components to flex in 2.0, I've noticed rtlcss does not modify flex positioning rules. Would you consider adding support for swapping rules like flex-direction and align-items in rtlcss?

RTLing with directive

Sometimes we need not only to RTL the css, but to change the value as well; For example here is my source css

.somediv {
    right : 0px /*rtl:5px*/;
}

Desired Output:

.somediv {
    left:5px;
}

Actual Output (Not desired):

.somediv {
    right:5px;
}

Is there anyway I can achieve this in current version?

Not working with postcss-js?

It seems rtlcss isn't working with postcss-js:

var postcss = require('postcss-js');
var rtlcss = require('rtlcss');
var autoprefixer = require('autoprefixer');

var process = postcss.sync([ rtlcss, autoprefixer ]);

var css = {'.foo': {
  borderColor: 'red green blue black',
  left: '5px',
  transition: 'width 5s'
}};

console.log(process(css));
/*
{'.foo': {
  borderColor: 'red green blue black',
  left: '5px',
  WebkitTransition: width 5s ease,
  transition: 'width 5s ease'
}}
*/

Example:
http://requirebin.com/?gist=df4a18c20ba922ad02c2

Processing declarations without comments

Right now RTLCSS only processes declarations with comments in the value

// rtlcss.js
for (var x = 0; x < config.instructions.declarations.length; x++) {
  var pi = config.instructions.declarations[x];
  if (decl._value && decl._value.raw && decl._value.raw.match(pi.expr) && pi.action(decl)) {
    util.logDeclAction(decl, pi);
    return;
  }
}

decl._value is only populated by postcss when the value is not clean

// postcss/lib/parser.js
// Parser.prototype.raw
for (token of tokens) {
  if (token[0] === 'comment') {
    clean = false;
  } else {
    value += token[1];
  }
}
if (!clean) {
  let origin = '';
  for (token of tokens) origin += token[1];
  node['_' + prop] = {
    value: value,
    raw: origin
  };
}

I propose that we run the PI on all declarations with or without comments

my use case:
Sass strips out comments inside declarations, rendering declaration PIs useless.
my workaround is to use escaped sequences of the original PIs and introduce new regex to RTLCSS

Semantic UI problem with pointing labels

Hi.
There is a problem with pointing basic labels in newer versions of Semantic-UI rtl build. Semantic UI version is 2.1.8.

<div class="field">
    <label for="id_contact_name">نام</label>
    <input id="id_contact_name" maxlength="100" name="contact_name" type="text">
    <div class="ui pointing red basic label">این فیلد لازم است.</div>                    
</div>

JSFiddle: https://jsfiddle.net/ty6j8ee5/

support `background-position-x`

Feature is missing compared to https://github.com/twitter/css-flip

drop nav-left/right support

Not supported in any contemporary browsers. I think Opera 15 dropped support and it was never implemented elsewhere.

support `border-style`

doesn't seem to get flipped. feature missing compared to https://github.com/twitter/css-flip

Should flip multiple transforms

Semantic-Org/Semantic-UI#3732

Feature: Ability to add rule(s) or declaration(s)

Adds new rules or declarations to the RTL version.

support three-part values for certain properties

margin, padding, border properties etc. missing this feature compared to https://github.com/twitter/css-flip

cli issue on Mac OS X

I think this has to do with the line endings of your CLI. See:
nwutils/nw-builder#75

Thoughts?

Issue when css has some errors (May be unrelated)

I came across a strange issue that may be of interest to you or may be someone else can face such issue and come here and will find it useful.

I am using SASS for my css, and there was some typo in a file I included... The source css generated was as follows:

.something {
    background: ligthen(#eee, 25%);
}
/* some more css here */
.elm1{
    background : url('../img/abc.jpg');
}
/* some more css here */
.elm2{
     background : #666;
 }

Now I applied RTLCSS on this file... and the result was strange. All background attributes were shifted. and the declaration with typo was containing a temp in it. i.e.

.something {
    background: ligthen(temp, 25%);
}
/* some more css here */
.elm1{
    background : #eee;
}
/* some more css here */
.elm2{
    background : url('../img/abc.jpg');
}

Though removing the error in css solved the issue, but at least RTLCSS should not propagate the error in a strange way .. :)

Thanks

Use rtlcss with Grunt

Hi. Can you help me to use rtlcss with grunt-postcss ? How to set settings?

Is there a way to omit unchanged css rule in the output file?

I've noticed that unchanged rules (eg. ignored rules) are written to the output file. Is there a way to avoid this duplication?

style.css:

body{ 
font-family:"Droid Sans", "Helvetica Neue", Arial/*rtl:prepend:"Droid Arabic Kufi", */; 
font-size:16px/*rtl:14px*/;
}
/*rtl:ignore*/
.ignored{ 
font-size:16px;
color:red;
}

style.rtl.css:

body{ 
font-family:"Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial; 
font-size:14px;
}
.ignored{ 
font-size:16px;
color:red;
}

Expected style.rtl.css:

body{ 
font-family:"Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial; 
font-size:14px;
}

what is the `background-image` support?

Not sure why background-image needs to be handled by this tool. What's the reason?

Process all css files in a folder recursively.

Processing all css files in a folder will be a great feature. I started working on a PR but I'm new to nodejs and my code was ugly :-)

What features do you want to see in RTLCSS 2?

Planning RTLCSS 2, Your input is very much appreciated!

About "tranform" rule support

Sometimes I want declare transform: scaleX(1) to make sure a element won't be scaled，so I expect rtlcss could replace 1 to -1. Then this element will flipX.

A Bug with `background: #FF0;`

Hi Mohammad,

Please check these processes:

> require('rtlcss').process(`body { color: #ff0; }`);
// output: 'body { color: #ff0; }'

> require('rtlcss').process(`body { background: #ff0; }`);
// output: 'body { background: #ff100%; }' WRONG

> require('rtlcss').process(`body { background: #ff1; }`);
// output: 'body { background: #ff1; }'

> require('rtlcss').process(`body { background: #ee0; }`);
// output: 'body { background: #ee100%; }' WRONG

> require('rtlcss').process(`body { background: #f00; }`);
// output: 'body { background: #f00; }'

> require('rtlcss').process(`body { background: #f0f; }`);
// output: 'body { background: #f100%f; }' WRONG

> require('rtlcss').process(`body { background: #0ff; }`);
// output: 'body { background: #100%ff; }' WRONG

> require('rtlcss').process(`body { background: #fffff0; }`)
// output: 'body { background: #fffff100%; }' WRONG

It seems like if there was one zero digit in hex-colors it would be converted weirdly. Only with one zero, and only with background property.

Plugins without a `directives` attribute aren't allowed?

(I'm not sure if this is an issue with the grunt plugin or rtlcss.)

Hi, I'm trying to convert an old property rule to a plugin for 2.0.

The old code:

properties : [
    {
        name: 'swap-dashicons-left-right-arrows',
        expr: /content/im,
        action: function( prop, value ) {
            if ( value === '"\\f141"' ) { // dashicons-arrow-left
                value = '"\\f139"';
            } else if ( value === '"\\f340"' ) { // dashicons-arrow-left-alt
                value = '"\\f344"';
            } else if ( value === '"\\f341"' ) { // dashicons-arrow-left-alt2
                value = '"\\f345"';
            } else if ( value === '"\\f139"' ) { // dashicons-arrow-right
                value = '"\\f141"';
            } else if ( value === '"\\f344"' ) { // dashicons-arrow-right-alt
                value = '"\\f340"';
            } else if ( value === '"\\f345"' ) { // dashicons-arrow-right-alt2
                value = '"\\f341"';
            }
            return { prop: prop, value: value };
        }
    }
],

What I currently have:

plugins: [
    {
        name: 'swap-dashicons-left-right-arrows',
        priority: 10,
        processors: { // The docs mention an array here, but it needs to be an object?
            'property': [
                {
                    expr: /content/im,
                    action: function( prop, value ) {
                        console.log(arguments);
                        if ( value === '"\\f141"' ) { // dashicons-arrow-left
                            value = '"\\f139"';
                        } else if ( value === '"\\f340"' ) { // dashicons-arrow-left-alt
                            value = '"\\f344"';
                        } else if ( value === '"\\f341"' ) { // dashicons-arrow-left-alt2
                            value = '"\\f345"';
                        } else if ( value === '"\\f139"' ) { // dashicons-arrow-right
                            value = '"\\f141"';
                        } else if ( value === '"\\f344"' ) { // dashicons-arrow-right-alt
                            value = '"\\f340"';
                        } else if ( value === '"\\f345"' ) { // dashicons-arrow-right-alt2
                            value = '"\\f341"';
                        }
                        return { prop: prop, value: value };
                    }
                }
            ]
        }
    }
]

When I run the task I get a "Warning: Cannot read property 'value' of undefined Use --force to continue." error. After adding the directives: {}, attribute I get "Warning: Cannot read property 'length' of undefined Use --force to continue."

Here is the output when running the grunt task in verbose mode:

// …
Files: src/wp-includes/css/wp-pointer.css -> build/wp-includes/css/wp-pointer-rtl.css
Options: map=false, opts={"autoRename":false,"clean":false,"processUrls":{"atrule":true,"decl":false},"stringMap":[{"name":"import-rtl-stylesheet","exclusive":true,"search":[".css"],"replace":["-rtl.css"],"options":{"scope":"url","ignoreCase":false}}]}, plugins=[{"name":"swap-dashicons-left-right-arrows","priority":10,"directives":{},"processors":{"property":[{"expr":{}}]}}], saveUnmodified=false
Reading src/wp-admin/css/about.css...OK
Warning: Cannot read property 'length' of undefined Use --force to continue.

Any idea what's wrong here?

Feature: Ability to set options inside CSS

The new options directives, allows settings RTLCSS options inside the CSS document. With support for nested options overrides.

The new syntax will be as follows:

/*rtl:begin:options:
{
  "autoRename": true,
  "stringMap":[
    {
      "name"    : "prev-next",
      "search"  : ["prev", "Prev", "PREV"],
      "replace" : ["next", "Next", "NEXT"],
      "options" : {"ignoreCase":false}
    }]
}
*/

.demo-prev, .demo-Prev, .demo-PREV { content: 'p'; }
.demo-next, .demo-Next, .demo-NEXT { content: 'n'; }

/*rtl:end:options*/

Support for flexbox properties

As layout with flexbox becomes more common, RTL support for flexbox properties will be useful. For example, reversing the flex-direction and content alignment.

Document new "!" comments

Good feature.

Semantic UI rtl build

Hi there, I have found that popup in Semantic UI which use rtl not working. Is that issue in rtlcss or in Semantic UI?

Thanks

Auto rename will work only for declartion

var rtlcss = require('rtlcss');

var result = rtlcss.process(".text-right { text-align: right; }");

But the result is: .text-right { text-align: left; };
As you see the selector name will not change on the process

Can I output changes only?

Can I output changes only using CLI?
Wordpress uses rtl.css file for RTL languages, so adding that file instead of changing the main css file is very helpful.

more options as `false` by default

This plugin is quite aggressive in what in changes in selectors and urls. I think almost all the options should be false by default, especially swapLeftRightInUrl, swapLtrRtlInUrl, swapWestEastInUrl, and autoRename because you have to intentionally agree to those conventions for it to work for you. I don't think we'd have use for autoRename at Twitter; that one seems particularly tied to one way of writing CSS.

It might be nice to merge the url options into a single one that takes a map of strings to swap (i18n friendly too, as people can define their own non-english words if necessary).

Stripping only changed property to new file

Is there any option for stripping newly changed props to new file. So the newly created css will output the changed property and selector not all the styles with different direction value.

Renaming of Selector with "right" or "left"

Hey. there may be a workaround but my selector is getting overwritten using the gulp rtlcss package.
Is this a bug?
Is there a way to suppress this without having to use rtl:ignore or having to change my classname?

ie.

/*rtl:rename*/
.glomo-right-now
    width: 305px

gets renamed to:

.glomo-left-now
    width: 305px

Thanks in advance.

stringMap: Unexpected replacement when search value includes dot

I have this map:

{
    name: 'import-rtl-stylesheet',
    search: [ '.css' ],
    replace: [ '-rtl.css' ],
    options: {
        scope: 'url',
        ignoreCase: false
    }
}

The map should replace @import url(common.css); with @import url(common-rtl.css);. That works great.
But the map also changes
@import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600,700");
to
@import url("//fonts.googleapis.com.css?family=Open+Sans:400italic,700italic,400,600,700");
(Note the slash which is replaced with a dot.)

Since search and replace is passed to RegExp I have escaped the dot (search: [ '\.css' ]) but stil getting the same output.

Any idea what the issue is?

Ignore another props

Is there an option to ignore another props which have noting to do to rtl?

For example

.selector{
background: red;
 display:inline-block;
padding:5px 10px 15px 20px;
}

OUTPUTS

.selector{
padding:5px 20px 15px 10px;
}

Thanks :)

Implement configuration file lookup

Requested by @am11

Web Essentials requires rtlcss to handle its configuration lookup on its own, searching current working folder all the way up to the root.

Support PostCSS processor

You really should add a public interface that can be used in PostCSS's use() function. For example:

    var processed = postcss().use(
      autoprefixer.postcss
    ).use(
      rtlcss.process
    ).process(css);

See differences between node-css-mqpacker 0.0.2 and 0.0.3

Is there a way to rename each css class?

I would like to add a ".rtl" to the name of all my classes that are generated with the rtlcss tool, is there a way to do this with the rtlcss tool?

Thanks

Feature Request: configurable file renaming scheme

configurable file renaming scheme for the rtl will be useful
(i.e some projects require file-rtl.css some file_rtl.css some file.rtl.css etc.

Better README

RTLCSS is awesome. I want to use as example of PostCSS power. But I can puut a link, because RTLCSS’s README doesn’t tell what plugin does (many of users doesn’t know what is RTL is).

Maybe you put a CSS input/output example and some before/after screenshot?

Feature Request: ability to save output log per file in a configurable dir

I would like the ability to specify a log folder so when using rtlcss -d source-folder dest-folder
it will save the rtlcss logs per file like the sourcemap
and also to be able to set it in the config file.

so for example:

ltr-dir1/file1.css
ltr-dir2//file1.css

will output an optional additional:

log-dir1/file1.log
log-dir2//file1.log