Create-react-app Integration Question

[dsuriano]

I'm developing an app that I would like to integrate rtlcss into that uses create-react-app and its default settings. I'm trying to avoid ejecting or installing a new task manager or build system (ie: grunt/gulp).

My goal is to have rtlcss run whenever a change is detected within any .scss or .css file, in order to simultaneously dev/test without having to manually run the rtlcss from the CLI every time.

Does anyone have recommendations on what is the best way to achieve this goal?

[masanzsa]

Version the app in GitHub or SVN or any other similar repo, then create a script to monitor the changes by updating it to a folder regularly; upon there is an addition or an update of any of the mentioned files trigger a rule to process them as desired and push the changes back to your repo.

[dsuriano]

@masanzsa That would work fine for a production build process using webhooks, but not so well for a local development environment while constantly tweaking code and testing the results.

I specifically need something for local development that integrates into create-react-app.

[Shaker-Hamdi]

@dsuriano Did you find a solution to this? I'm facing the same issue, I need to use this package with create-react-app, and I would like to have two CSS files to switch between them based on a state prop in both development and production.

[dsuriano]

@Shaker-Hamdi Unfortunately my deadlines prevented me from implementing a solution. I ended up manually converting 15-20 files and it helped put me into the habit of writing any future styles with RTL support in mind from the start.

My initial thoughts for a solution were something along the lines of writing a small Node script, using npm-watch, or something like Rollup.js that would watch for changes in scss or css files, then run rtlcss with the desired configs. Once you have that working, you could add the new script to your package.json scripts definition. Something like:

{
  "scripts": {
    "start": "react-scripts start && add-the-new-script-here"
  }
}

Good luck! And if you stumble across a solution, let me know.

[m-ahmadi]

Here's a solution using craco:

1. create a craco.config.js in root of your project and put the following in it:

const rtlcss = require('rtlcss');

module.exports = {
  style: {
    postcss: {
      plugins: [rtlcss]
    }
  }
};

2. edit the scripts field of your project's package.json:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
},

3. install needed packages: npm i @craco/craco rtlcss sass -D

4. run npm start

Done.

[iamshaheenumar]

Problem with the above solution is that, RTLCSS requires PostCSS 8.
create-react-app is not supporting PostCSS 8 now. Hence its throwing an error

[musaab-abdalla]

Problem with the above solution is that, RTLCSS requires PostCSS 8.
create-react-app is not supporting PostCSS 8 now. Hence its throwing an error

Downgrade your rtlcss to use version 2.6.2

[parsagholipour]

Here's a solution using craco:

1. create a craco.config.js in root of your project and put the following in it:

const rtlcss = require('rtlcss');

module.exports = {
  style: {
    postcss: {
      plugins: [rtlcss]
    }
  }
};

2. edit the scripts field of your project's package.json:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
},

3. install needed packages: npm i @craco/craco rtlcss sass -D
4. run npm start

Done.

It doesn't work.
craco: 7.0.0-alpha.7
rtlcss: 3.5.0