Skip to content

CSS Error when including the ckeditor5.css with Webpack 4 #565

Description

@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.

Activity

  1. Witoso commented on Dec 13, 2024

    @Witoso
    Member

    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?

  2. werner-schindling commented on Dec 16, 2024

    @werner-schindling
    Author

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    pending:feedbackThis issue is blocked by necessary feedback.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions