CSS Error when including the ckeditor5.css with Webpack 4

[werner-schindling]

We are having trouble including the ckeditor5.css file in React from the npm package dist folder (we're using version 43.3.1).
I found the reason to be missing calc() functions in the following places of ckeditor5.css:

Line 1886
--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-spacing-medium);
Line 2748:
--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
Line 3656:
--ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px);
Line 3994:
--ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px);

I was able to compile the CSS finally by adding the calc functions in these 4 cases and including the changed file in our src folder instead of the one in the node_modules folder.

We're using Node 16.16.0, react-scripts 4.0.3 and therefore also these versions of webpack and the loaders:

    "webpack": "4.44.2",
    "style-loader": "1.3.0",
    "postcss-loader": "3.0.0",
    "css-loader": "4.3.0",

We cannot update easily to a different webpack version so I wanted to ask how you view this issue here?
Would it be possible to get a fix for this with the next version?

I wasn't sure where to report this, in the main CKEditor 5 repo or here in the React one, I hope it's fine.

[Witoso]

Hmm, thanks for posting, this is definitely more suitable ckeditor5 issue tracker. But let's keep it here. You mention you cannot update webpack. But this most likely relates to postcss-loader or css-loader. Have you tried updating and tweaking those?

[werner-schindling]

The versions of postcss-loader and css-loader are tied to the webpack version, unfortunately. Adding newer versions to the package.json doesn't help as they will not be used.