Bug: RTL has inverted scroll direction

[JanStevens]

Hi,

I noticed in RTL mode the scroll direction is inversted. Looking at the code I see why, since in RTL everything is flipped using transform.

A better solution would be to rely more on the native browser capabilities like direction: rtl and dir=rtl, additionally for emotion there is a stylis plugin: https://github.com/styled-components/stylis-plugin-rtl

Which can be used like so when creating a emotion cache, you will need 2 different caches (one for ltr and one for rtl). If the user specifies isRTL you can use the different cache for example.

import rtlPlugin from 'stylis-plugin-rtl';

const cacheRtl = createCache({
  key: 'rtl',
  stylisPlugins: [rtlPlugin],
});

Regards

[karolkozer]

@JanStevens
This is currently the solution that is in Planby but the one with dir=rtl I will add to the TOD list because it has a better approach to this. I will also see this package from emotion.