How to process 3rd party dependency's CSS in a Create React App application

user_1341535 0
Viewed 569

I'm making a web application based on CRA 3.4.1 with a component library PrimeReact 4.1.2.

My own CSS gets processed thanks to CRA's PostCSS setup, e.g. each display: flex in the sources gets the prefixed -ms-flexbox version added in the built files (main.<hash>.chunk.css), enabling IE10 support.

The problem is PrimeReact components have their own CSS bundled, and this CSS does not get processed when I'm building my app. As a result, the built 2.<hash>.chunk.css doesn't have the vendor prefixed rules.

How do I enable the processing of such 3rd party CSS? Preferably without ejecting. Can it be configured? I don't see anything about this in the official docs.
Maybe there is a way to exclude 3rd party CSS, and then I'll just import '../node_modules/primereact/resources/primereact.css' to have it processed as my own CSS?

react-scripts create-react-app reactjs css
1 Answers

This is a specific issue of primereact package and it happens because inside package.json there is a browserslist rule for "not ie <= 11":

"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]

You'll have to hardcode the file inside node_modules/primereact/package.json and change "not ie <= 11" to "ie 10-11". PostCSS Normalize does not add borwser prefixes for IE11 so you'll have to set a browserslist value of ie 10-11.

After that change you'll have all primereact/resources/primereact.css rules to generate -ms-flex prefixes.

I'm not sure if that is a real primereact issue; if they don't or they can't support IE11, then it's not an issue because their package.json is strict to that rule not supporting IE11.

You can use patch-package to create a patch and apply that fix/change after each npm/yarn modification (be careful as it does exclude package.json by default).

So, normally CRA and react-scripts do add the prefixes for browser if you setup "browserslist" inside your project package.json but PostCSS Normalize does check each module package.json and overrides the default project settings. If you face again such issues, you first go and check the contents of the regarding module package.json file and specifically for the "browserslist" option.

user_18896850
Related