Material-ui: Support RTL

[oliviertassinari]

Description

The master branch is implementing a partial handling of the RTL handling, partially thanks to rtl.js.
The support of that feature isn't documented and far from being perfect. From time to time, we have people submit PR to improve it, e.g. #6856.

We haven't any story on that part for the v1-beta branch. I think that it would be nice to have that support and documented, especially as we have the styling infrastructure to make the implement simple as we have on the master branch.

Images & references

• Bootstrap's mess
• jss-rtl
• master solution
• react native solution
• CSS toolchain

[NaamanTsur]

I'm starting to look into beginning a RTL solution implementation. @oliviertassinari , do you have a certain idea or direction you want the RTL implementation to look like?

[oliviertassinari]

@NOblivion This is good to hear. I haven't looked much into what would be a good solution. All I know so far is the solution used on the v0.x version. I would definitely start by looking at how others are handling the issue as it's an already solved problem. https://github.com/cssinjs/jss/issues/410 is a good starting point.

[NaamanTsur]

Having a first look into that issue, I think using the rtl-css-js library might be the best solution. Wrapping said library to a jss plugin though might not be a good decision considering that false positives might arise in the conversion, causing components not to be converted correctly. I'm just speculating though and would love some input in this.

[alitaheri]

I'm working on this one. Although, rtl-css-js needs camelCase props, which is a problem. This plugin should run last, and cannot be directly after jss-camel-case. I'll fix this on the rtl-css-js side first then move on to building the plugin for jss

[alitaheri]

@NaamanTsur That is through. For That, I'll do 2 things:

1. Support opting out of rtl transformation via flip: false in the styles object.
2. Add support for direction: 'rtl' in the theme object so that complex styles can be manually modified when rtl is enabled.

[smmoosavi]

this is bad idea to support rtl manually. we will have many issue in feature.

Add support for direction: 'rtl' in the theme object so that complex styles can be manually modified when rtl is enabled.

rtl support must be some middleware for jss. like what rtllcss do. maybe in withStyles function
http://rtlcss.com/learn/getting-started/why-rtlcss/#css-level-3

[alitaheri]

@smmoosavi I guess I didn't phrase that too well 😅 What I mean is, I'm building a plugin for jss which you can opt-out in case the styling is too complex for the plugin to handle on it's own.

[oliviertassinari]

@alitaheri This plan sounds great :).

[alitaheri]

Step one is almost done: https://github.com/kentcdodds/rtl-css-js/pull/29

[alitaheri]

Step two is done jss-rtl 🎉 🎉

I'm working on rtl support on the v1 branch