Upgrading react-scripts from 3 to 4 breaks inline CSS styles

[martinfoakes]

Hi all, so I've posted a question on Stack Overflow with much more of the specific details of the issue I'm having ->

https://stackoverflow.com/questions/68649984/cra-react-scripts-update-from-3-4-breaks-inline-css-style-usage

But in general, I have a Typescript project setup with CRA, making use of LESS and Craco, where I recently upgraded react-scripts from 3.x.x to latest 4.0.3 to fix a package security warning.

In doing so this has meant that all inline CSS styles being used across the app are no longer generated onto any elements

Have been attempting to find a solution for this for a couple of days.

I've gone through the entire process of updating react / react-dom, Typescript, Craco, all to latest versions, to no success.
Updating the craco-less, babel-loader etc. packages too, also to no success.

There is more info in the SO question, but my assumption right now is it has something to do with a css-loader, or less-loader, or some part of the webpack setup, being affected by the change in react-scripts version.

Anyone got any ideas?