title: Generate RTL CSS file in create-react-app and switch between them based on change in state
body: <p>I'm using create-react-app for a multi-language project.
  I want to use some library like "cssJanus" or "rtlcss" to convert the Sass generated CSS file into a separate file and then use that newly generated file when I switch to another language.</p>
  
  <p>Here's how my index.js looks like ...</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import * as serviceWorker from "./serviceWorker";
  import { BrowserRouter as Router } from "react-router-dom";
  import { Provider } from "react-redux";
  import App from "./App";
  import { configureStore } from "./store/configureStore";
  
  const store = configureStore();
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;Router&gt;
              &lt;App /&gt;
          &lt;/Router&gt;
      &lt;/Provider&gt;,
      document.getElementById("root")
  );
  
  serviceWorker.unregister();
  </code></pre>
  
  <p>And here's how my "App.js" looks like ...</p>
  
  <pre><code>import React, { Component } from "react";
  import "./App.scss";
  import { Route, Switch } from "react-router-dom";
  import SignIn from "./features/signin/SignIn";
  
  class App extends Component {
      render() {
          return (
              &lt;&gt;
                  &lt;Switch&gt;
                      &lt;Route path="/" exact component={SignIn} /&gt;
                  &lt;/Switch&gt;
              &lt;/&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>As you can see I'm using "./App.scss" file that simply have a bunch of @import statements to another ".scss" files in the "./src/css/" directory ...</p>
  
  <pre><code>/* autoprefixer grid: on */
  @import "css/reset";
  @import "css/variables";
  @import "css/global";
  </code></pre>
  
  <p>I need your advice on how to do that. How to convert the generated CSS from App.scss to RTL into their own .css file and switch between them and the original generated CSS based on a change in the global state.</p>
  
  <p>I searched a lot for something like this but with no luck.</p>
  
  <p>Or if you have a better approach I'm all ears.</p>