Stylesheet generator + CKE5 usage

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

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

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.

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

Feedbacks:

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 }

Let's manage

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

Wrong addition info.yml

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

Anyway, if we move to an HTTP controller, we will not need to add this property to YAML ourselves.

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 an other issue: unexpected changes in info.yml file, 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

Hi,

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

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

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

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

Tests added, blocked by ✨ More compact inline CSS Active .

TODO: try to create a patch for Sabberworm bug.

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

Merged!

Thanks everyone!

Amazing, thank you @Grimreaper!!!!

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?

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.

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