Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
werner-schindling opened this issue Dec 12, 2024 · 2 comments
Open

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

werner-schindling opened this issue Dec 12, 2024 · 2 comments
Labels
pending:feedback This issue is blocked by necessary feedback.

Comments

@werner-schindling
Copy link

werner-schindling commented Dec 12, 2024

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
Copy link
Member

Witoso commented Dec 13, 2024

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?

@Witoso Witoso added the pending:feedback This issue is blocked by necessary feedback. label Dec 16, 2024
@werner-schindling
Copy link
Author

werner-schindling commented Dec 16, 2024

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
Labels
pending:feedback This issue is blocked by necessary feedback.
Projects
None yet
Development

No branches or pull requests

2 participants