Linaria: RTL support

[jpnelson]

Describe the feature

It would be nice to have some form of RTL support for the library. For example, you can see how react native web handles this – the requirement is that there are different static styles compiled that can be switched between at runtime, particularly the LTR and RTL styles. https://github.com/kentcdodds/rtl-css-js is a library that does the actual "style flipping" logic.

Motivation

We'd like to be able to support languages that have a RTL flow.

Related Issues

I couldn't find any but let me know if this has been talked about before!

As a side note, I'm interested in whether this is something that you'd be open to PR's for. Thanks!

[umarmw]

I'm also looking for the RTL support. :)

[lencioni]

It looks like Linaria can be configured to use PostCSS as a custom preprocessor, and there are PostCSS plugins like postcss-rtl to do RTL transformations. I haven't tried it, but it seems that this could be accomplished by configuring Linaria in that way.

[rmarkins-godaddy]

@jayu would like to see this supported as currently we use linaria for our library of components but the /* rtl */ comments are removed upon build. Do we have a base idea of what is needed to support this? I would be happy to contribute a change to add this support

[jayu]

This is really tricky thing. Since we compile styles into CSS files, rtl could be achieved in the following ways

1. compile two different stylesheets and load one of them depending on user locale

   • additionally, we will have to care about flipping styles that are loaded dynamically based on props and attached to CSS variables

2. compile one stylesheets, but produce different class names for RTL and LTR

   • there has to be an additional util function that selects the proper class name
     
     
     
     • probably it could be added on babel-level based on some flag in config
     
     
     • otherwise, users will have to modify codebase to use this util explicitly
     
     
     • additionally, we will have to care about flipping styles that are loaded dynamically based on props that are attached to CSS
     
     

First would not work well for statically hosted pages, the decision which stylesheet should be chosen will have to be made on client-side, it will require additional work on bundlers level to produce two style sheets.

Second, add additional complexity into linaria core, will require implementing some react context to define user locale. For non-react applications, some other solution has to be exposed to let the util know which class name should it choose which would effectively mean that some global variable will be involved if we decide to do it on the babel level.

Personally I would prefer second option