Issue with postcss plugin when I try to use AGGrid component

[linkmagic]

I have faced one problem during building the project with AGGrid community component.

In general a problem is regarding to compilation CSS which included into AGGrid. I tried several solutions but it didn't help.

Problem with this files, which should be included in the project (like import in TSX module or in the main app.scss file):
@ag-grid-community/styles/ag-grid.css
@ag-grid-community/styles/ag-theme-quartz.css

Depending where to specify these imports, various errors occur.

If specify this imports in the TSX module - so the build system shows an error on specific lines in the ag-grid.css file:

[INFO]   Failed to compile.
[INFO] 
[INFO] Syntax error: from "postcss-image-set-polyfill" plugin: /home/.../src/main/frontend/node_modules/@ag-grid-community/styles/ag-grid.css Incorrect size value (992:3)
[INFO] 
[INFO]   990 | 
[INFO]   991 | .ag-icon-settings::after {
[INFO] > 992 |   background-image: var(--ag-icon-image-settings, var(--ag-icon-image));
[INFO]       |   ^
[INFO]   993 |   display: var(--ag-icon-image-display-settings, var(--ag-icon-image-display));
[INFO]   994 |   opacity: var(--ag-icon-image-opacity-settings, var(--ag-icon-image-opacity, 0.9));
[INFO] 
[INFO]   Δt 7519ms ✖ 1 problem (1 error, 0 warnings)

If I comment this lines in ag-grid.css file - build is green, but it's not correct solution, because I changed css from node_modules, this fix valid only for development process, and not valid for prod.

If specify this imports in the app.scss file - so the build system shows an error "asset size limit" (looks like module is very large and build system have a restriction for performance optimization):

[INFO]   Compiled with warnings.
[INFO] 
[INFO] asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
[INFO] This can impact web performance.
[INFO] Assets: 
[INFO]   35.app.min.js (1.03 MiB)
[INFO] 
[INFO]   Δt 6812ms ⚠  1 problem (0 errors, 1 warning)

I also tried change webpack performance configuration (I found this config in SQ github):
performance: {
maxEntrypointSize: 912000,
maxAssetSize: 9812000
}

I found a several projects on SQ github and all these projects use two approaches which I have already tried - importing CSS in TSX, or in the main app.scss file, and everything works, but it does not work for me. Although I checked all the configuration files line by line, found minimal differences, tried to apply them to live-trade-reco, but that didn't help either.

What else can I try to fix this problem?

[onigoetz]

Hi, I released a fix in version 1.26.0-alpha.1 can you try it out ?

[onigoetz]

Fix released in https://github.com/swissquote/crafty/releases/tag/v1.26.0