New ag-grid CSS import path throws error during build process in my react app - ag-grid

Question

I'm doing some changes to my React project (React version: 16.13.1, created with CRA) in order to upgrade from v27 to v28 of Ag-Grid. One of the changes requested is the new way to import the css files. It used to be
import 'ag-grid-community/dist/styles/ag-grid.css'
and now it has to be like this:
import 'ag-grid-community/styles/ag-grid.css'
This is generates an error during the build process:
Failed to compile.
./node_modules/ag-grid-community/styles/ag-grid.css
ParserError: Syntax Error at line: 1, column 83
error Command failed with exit code 1.
This makes me think it is a webpack problem, maybe a loader?. If it is the case, is there a way to handle this error without ejecting the webpack config?
Other clues I explored:
is it because I try to import CSS from a module?
is it a problem with the react version (16.13.1)?
Any ideas and solutions will be much appreciated.

Answer 1

You can find more details on this issue on the following Github Issue which is related to a known issue with CRA 3.x
The main thing to note is that we will be applying a fix in v28.2 which is due out next week.
AG-7222 Add Post Processing of CSS for CRA 3.x/4.x Compatibility which should help address this issue will be released as part of our next release 28.2 and should resolve these issues without the need for a workaround.

Answer 2

CSS file ag-grid.css has two syntax errors. Calc() function is missing in two places.
line-height: min(var(--ag-line-height, calc(var(--ag-row-height) - 2px)), var(--ag-row-height) - 2px);
This should be:
line-height: min(var(--ag-line-height, calc(var(--ag-row-height) - 2px)), calc(var(--ag-row-height) - 2px));
And..
height: min(var(--ag-line-height, calc(var(--ag-row-height) - 2px)), var(--ag-row-height) - 2px);
should be:
height: min(var(--ag-line-height, calc(var(--ag-row-height) - 2px)), calc(var(--ag-row-height) - 2px));
Correcting these issues resolved above build error in my case.