#StackBounty: #css #ckeditor #ckeditor5 Sharing the common CSS rules of CK Editor for correct displaying of the formatted text outside …

Bounty: 50

Suppose we added the image in CKEdtitor and aligned it to right:

CKEditor will add image and image-style-align-right classes to figure element:

<p>Lorem ipsum of something like this&nbsp;</p>
<figure class="image image-style-align-right">
    <img src="https://XXXXX.com/116cc956-4cf4-4d2a-98cf-ffa69ab0eb3c.jpeg">
</figure>

Now we want the inputted HTML will be submitted by email? Above HTML must be submitted to the backend, then all styles must be converted to inline CSS. But how the backend will know about .image, .image-style-align-right and similar CSS rules?

There are below styles in theme/imagestyle.css file of @ckeditor/ckeditor5-image package:

/*
 * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

:root {
    --ck-image-style-spacing: 1.5em;
}

.ck-content {
    & .image-style-side {
        float: right;
        margin-left: var(--ck-image-style-spacing);
        max-width: 50%;
    }

    & .image-style-align-left {
        float: left;
        margin-right: var(--ck-image-style-spacing);
    }

    & .image-style-align-center {
        margin-left: auto;
        margin-right: auto;
    }

    & .image-style-align-right {
        float: right;
        margin-left: var(--ck-image-style-spacing);
    }
}

Problem 1: The source styles are in frontend and written by PostCSS

First, above code is PostCSS. Because I must not migrate to PostCSS just because using the CKEditor, I can not include this file to my source code written by other CSS preprocessor. In frontend, the Webpack compiles these styles an apply it dynamically when application starts (I mean, no file with compiled CSS available):

But how to bring up these styles to server?

Problem 2: How to bring up to server only these CSS classes which will be used and no more?

Well, even if I convert above .image-style-side , .image-style-align-center etc. to CSS and submit them to server, I will be enough only for Image feature. But the other CKEdtitor plugins adds other CCS classes and these classes are in numerous of other files!

Сonversely, there are a lot of CKEditor classes in which we are don’t need on backend, e. g. ck-editor__editable, ck-rounded-corners, ck-editor__editable_inline: there classes are for CKEditor’s GUI and will not require once editing will done?

Problem 3: The CSS variables

Above listing includes the CSS variables like --ck-image-style-spacing, --ck-image-style-spacing etc. To make inline CSS, server must know about them too.

---

Get this bounty!!!