Stylesheet generator + CKE5 usage [#3453784]

Problem/Motivation

CKEditor 5 is not provided by an iframe like it is in CKEditor 4. So, stylesheets applied via ckeditor5-stylesheets are loaded like any other CSS file but are applied to the entire page instead of on the iframe.

that's why we need to prefix the selectors:

/* Prefix the h1 with .ck-content to keep the style in the editor, aget a flat list of all style options.nd avoid polluting the page with unwanted h1 styles */
.ck-content h1 {
  color: blue;
}

And that's explain why UI Styles are not available by default in Ckedtor5 previews.

Source: https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito...

Proposed resolution

A command drush with a Drupal theme (ckeditor5-stylesheets doesn't work in modules) machine name as only parameter:

From *.ui_styles.yml, get a flat list of all style options (or use the plugin manager).
From *.info.yml, get default libraries where the provider is the theme
From *.libraries.yml, get the CSS files of those libraries
Open each CSS file with a CSS parser, and extract every selector containing a style option as a class (so, prefixes with dot)
Add .ck-content (with a space) before each selector and copy it with its related properties in a new file.
In *.info.yml, add the file to ckeditor5-stylesheets if not already there:
```
ckeditor5-stylesheets:
  - whatever.css
```

Comment	File	Size	Author
#17	sabberworm-php-css-parser-202.patch	2.36 KB	grimreaper

Issue fork ui_styles-3453784

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3453784-ckeditor5-stylesheets-generator changes, plain diff MR !59
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

10 June 2024 at 20:48

pdureau created an issue. See original summary.

Comment #2

grimreaper

French

France 🇫🇷

commented 11 June 2024 at 06:50

For the record, example in UI Suite Bootstrap starter kit: https://git.drupalcode.org/project/ui_suite_bootstrap/-/blob/5.0.x/start...

Comment #3

grimreaper

French

France 🇫🇷

commented 11 June 2024 at 07:08

Comment #4

thejimbirch commented 11 June 2024 at 09:48

But that doesn’t take into account the overrides set in the UI, right?

Comment #5

thejimbirch commented 26 June 2024 at 17:01

Adding some notes from Slack:

Grimreaper
:drupalfr: 15 days ago
Hi,
Have you checked the example in the starterkit https://git.drupalcode.org/project/ui_suite_bootstrap/-/blob/5.0.x/start...…]tstrap_starterkit/assets/scss/ckeditor5.scss?ref_type=heads ?

thejimbirch
15 days ago
Yes. I just commented this on the ticket also. This pulls in the default bootstrap files from the vendor folder. But does it pull in the settings changed in the UI?

Grimreaper
:drupalfr: 15 days ago
no, it is static. I don't know if it is possible to conditionnally add cke5 stylesheets with a hook/event.
I already not found way to dynamically remove ones from parent theme. So, it will be the same for adding.

thejimbirch
15 days ago
Would it be possible to write the UI variables to a file and hardcore the cke5 style sheet in the theme?

Pierre (pdureau)
15 days ago
Would it be possible to write the UI variables to a file and hardcore the cke5 style sheet in the theme?
Because CSS variables management & mode/themes management are both part of the same module UI Skins, such a feature may be doable.

Comment #6

27 June 2024 at 11:46

papajo made their first commit to this issue’s fork.

Comment #7

pdureau commented 28 June 2024 at 08:10

Issue summary:

View changes

Comment #8

28 June 2024 at 11:46

papajo opened merge request !59

Comment #9

pdureau commented 4 July 2024 at 13:32

Status:

Active

» Needs work

Tested. The first commit is going in the good direction.

Move code to `ui_styles_ckedtitor5` sub module

This logic is related to Ckeditor5 and doesn't belong to main ui_styles.

Errors when absolute path in libraries

Current code doesn't work with path absolute from Drupal HTTP root:

  css:
    theme:
      /libraries/dsfr/dist/dsfr.min.css: { minified: true }
      /libraries/dsfr/dist/utility/icons/icons.min.css: { minified: true }
      /libraries/dsfr/dist/utility/colors/colors.min.css: { minified: true }

This is working but not acceptable:

  css:
    theme:
      ../../../libraries/dsfr/dist/dsfr.min.css: { minified: true }
      ../../../libraries/dsfr/dist/utility/icons/icons.min.css: { minified: true }
      ../../../libraries/dsfr/dist/utility/colors/colors.min.css: { minified: true }

Sabberworm dependency

https://github.com/MyIntervals/PHP-CSS-Parser

It is OK to have such dependency, but;

if would be better to replace it by a simpler, less-capable, single file, parser
if we keep it, we need to add it to composer.json

HTTP controller instead of drush command

The HTTP controller is returning a CSS file. The response must be cached.

In order to keep track of the change instead of expecting theme wonder to run the commands regularly.

Also, this may fix 2 other issues in info.yml file:

Unexpected formatting changes

Which is fully loaded and rewritten:

--- a/ui_suite_dsfr.info.yml
+++ b/ui_suite_dsfr.info.yml
@@ -1,44 +1,40 @@
-name: UI Suite DSFR
+name: 'UI Suite DSFR'
 type: theme
-description: "A site-builder friendly theme implementing DSFR (https://www.systeme-de-design.gouv.fr/) using the UI Suite."
-core_version_requirement: ^9 || ^10
-base theme: false
+description: 'A site-builder friendly theme implementing DSFR (https://www.systeme-de-design.gouv.fr/) using the UI Suite.'
+core_version_requirement: '^9 || ^10'
+'base theme': false

Wrong property addition

The drush command is creating the file css/ckeditor5.css but add this to info.yml:

stylesheets:
  - ckeditor5.css

$themeInformationFileContent['stylesheets'] = [\sprintf('%s.css', $options['generated-file-name'] ?? 'ckeditor5')];

2 errors:

not the right property, ckeditor5-stylesheets is expected
not the right path, css/ is missing

Comment #10

18 July 2024 at 14:33

maboy made their first commit to this issue’s fork.

Comment #11

grimreaper

French

France 🇫🇷

commented 19 July 2024 at 09:34

Hi,

Review done with @pdureau. We put some comments in the MR.

Comment #12

grimreaper

French

France 🇫🇷

commented 6 August 2024 at 07:49

Assigned:

Unassigned

» grimreaper

Comment #13

grimreaper

French

France 🇫🇷

commented 6 August 2024 at 16:22

Hi,

Refactoring done. Now:

- even more generic controller and service
- handle external files and local files outside the theme folder
- handle styles plugins overrides
- handle libraries extends/overrides, etc.
- handle CSS variables
- fix CSS content not in correct loop

TODO:
- cleanup
- ui skins CSS variables integration?
- tests

Comment #14

grimreaper

French

France 🇫🇷

commented 7 August 2024 at 08:54

cross-linking the issue I found in the library: https://github.com/MyIntervals/PHP-CSS-Parser/pull/202

Comment #15

grimreaper

French

France 🇫🇷

commented 7 August 2024 at 09:00

TODO:
- tests
- https://github.com/MyIntervals/PHP-CSS-Parser/pull/202

Comment #16

grimreaper

French

France 🇫🇷

commented 7 August 2024 at 17:20

Tests added, blocked by #3466681: More compact inline CSS.

TODO: try to create a patch for Sabberworm bug.

Comment #17

grimreaper

French

France 🇫🇷

commented 8 August 2024 at 08:19

Status	File	Size
new	sabberworm-php-css-parser-202.patch	2.36 KB

I have created a patch with only one commit, rebased against main of php css parser, and only with the effective change, not the tests to avoid conflicts.

https://github.com/FlorentTorregrosa/PHP-CSS-Parser/pull/1

Comment #18

grimreaper

French

France 🇫🇷

commented 8 August 2024 at 08:45

Title:

ckeditor5-stylesheets generator

» Stylesheet generator + CKE5 usage

Comment #19

8 August 2024 at 08:55

Grimreaper committed b2450ef3 on 8.x-1.x authored by papajo

Issue #3453784 by Grimreaper, maboy, papajo, pdureau, thejimbirch:...

Comment #20

grimreaper

French

France 🇫🇷

commented 8 August 2024 at 08:59

Assigned:	grimreaper	» Unassigned
Status:	Needs work	» Fixed

Merged!

Thanks everyone!

Comment #21

thejimbirch commented 8 August 2024 at 17:01

Amazing, thank you @Grimreaper!!!!

Comment #22

rpayanm

he/him

Spanish

commented 14 August 2024 at 17:34

Hi @Grimreaper, thank you!
I tried this but I was unable to get it to work

I added this in my custom_theme.info.yml:

ckeditor5-stylesheets:
  - /ui_styles/stylesheet.css?prefix=.ck-content

I got this error on Firefox:

The page isn’t redirecting properly

And ended up with this URL:

http://example.com/ui_styles/stylesheet.css?q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&q=ui_styles/stylesheet.css&prefix=.ck-content

If I change the URL in ui_styles/ui_styles.routing.yml from /ui_styles/stylesheet.css to /ui_styles/test and visit that URL: http://example.com/ui_styles/test?prefix=.ck-content I get the generated CSS right.

What I am doing wrong?

Comment #23

grimreaper

French

France 🇫🇷

commented 19 August 2024 at 07:33

Hello,

@thejimbirch, thanks, but I was not alone to work on it ;)

@rpayanm, with this change there is no more need to add a ckeditor5-stylesheets entry in your theme.

The CSS from http://example.com/ui_styles/test?prefix=.ck-content should be loaded automatically when you have at least one of the two CKE5 plugins of ui_styles_ckeditor5 enabled in your text format.

Also for the redirection problem, check with another browser to see if it is specific to Firefox, otherwise check your webserver configuration why there is this redirection. I didn't got one when developing the feature.

Comment #24

2 September 2024 at 07:34

Status:

Fixed

» Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Stylesheet generator + CKE5 usage

Problem/Motivation

Proposed resolution

Issue fork ui_styles-3453784

Comments

Move code to ui_styles_ckedtitor5 sub module

Errors when absolute path in libraries

Sabberworm dependency

HTTP controller instead of drush command

Unexpected formatting changes

Wrong property addition

Related issues

Referenced by

Move code to `ui_styles_ckedtitor5` sub module