Request to change colors defined with hsl/hsla to rgb/rgba

[sophisma]

Hi, this is more a request than an issue. One possible way to define color in CSS is by using hsl or hsla, for instance:

background-color: hsla(341, 100%, 30%, 0.1);

or

background-color: hsl(341, 100%, 30%);

Many email clients don't support this and don't show the colors. If you're using a WYSIWYG editor like GKEditor 5 to compose newsletters you're out of luck. It would be great if this could be replaced by the rgb/rgba equivalents, so

background-color: hsla(341, 100%, 30%, 0.1);

would become

background-color: rgba(153, 0, 48, 0.1);

Another interesting thing to add would be replacing CSS vars by they're actual values. For instance, if you define a var like this:

:root {
        --ck-color-mention-background: rgba(153, 0, 48, 0.1);
    }

And then you reference it in another style like this:

.ck-content .mention {
            background-color: var(--ck-color-mention-background);
        }  

The var in the .ck-content .mention element should be replaced by the actual value before inlining the CSS. This is for the same reason as the hsl/hsla issue, some email clients don't support vars and if you're using tools that generate css like this you're out of luck. This is how it should look before the inlining process starts.

.ck-content .mention {
           background-color: rgba(153, 0, 48, 0.1);
       } 

Sorry to post this here, I know that I can replace that myself using regular expressions but i would be great if this was supported out of the box.

[martinnormark]

Thanks for these suggestions, I can see how that would make life easier.

Any chance you want to contribute these in a pull request? If you don't know where to start, I'm happy to point out some directions.