Add RTLCSS compiler in react-create-app

If you want to transform your LTR CSS into RTL style, one way is using the RTLCSS library. Now without any overhead, we will add the pipeline in the package.json without any ejecting script.

1- Add these libraries

yarn add rtlcss nodemon concurrently

2- Add these scripts into the script section of your package.json file.

"scripts": {
    "less-rtl": "rtlcss src/main.css src/main.rtl.css",
    "less-rtl-watch": "nodemon --quiet --watch src/main.css -x \"npm run less-rtl\"",
    "prestart": "npm run less-rtl",
    "prebuild": "npm run less-rtl",
    "start": "concurrently --kill-others \"npm run less-rtl-watch\" \"react-scripts start\"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Note: the ‘src/main.css’ is the default source style file, and the ‘src/main.rtl.css’ the compiled RTL file. You can change it based on your needs.

Note: the concurrently npm will run multiple commands in different treads. And ‘kill-others’ parameter will kill the processes if one of them has been terminated.