Problem/Motivation

As stated in #3050389: [META] Remove dependency to Classy from core themes, Classy will be moved to contrib before Drupal 9 and we have to remove dependencies on Classy from all core themes.

Part of this process includes creating theme-specific copies of all Classy libraries to core themes. This ensures Classy can be removed without impacting those themes.

Proposed resolution

- As needed, copy libraries and assets from Classy to Seven.
- Create new libraries for every copied library, named with the convention "classy.
".
- Override the Classy libraries so they are not loaded by Seven.
- Any Classy libraries-extend: should now be taken care of in Seven.
The end result is no Classy library assets should load, and Seven experience should be unchanged.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bnjmnm created an issue. See original summary.

bnjmnm’s picture

Postponed on #3106600: Decouple Classy libraries from Umami as that will set the standard for the other theme library decoupling issues and should be rerolled on top of that.

This is largely completed other than that, patch attached along with a failing patch that proves tests will catch Classy-copied files that are altered.

Also attached are screenshots confirming every copied asset loads from Seven, not Classy.

bnjmnm’s picture

Un-postponed and rerolled + a failing patch to show that altered files fail a test with a prompt to move them from the /classy subdirectory.

The screenshots in #2 are applicable to the reroll with this kept in mind (something we've already encountered in #3106600: Decouple Classy libraries from Umami)

  1. Did not include image-widget.css in this as Seven does not actually use this file anywhere
    Info from Classy's image-widget.css:

    Image-widget is consumed by Seven, will provide another comment confirming the asset loads properly
  2. media-embed-error,css is added via the ckeditor_stylesheets: key in classy.info.yml
    This has also been added to Seven in that manner, but I'm not sure how to stop it from loading twice.
    ckeditor_css_alter() is called in seven.theme before
    the ckeditor stylesheets are added in a different instance of that hook... even when themeManager->alter() is called second. Quite possible I was doing something wrong, but it's also worth noting that the worst-case on this is one CSS file loading twice, and that will stop when Classy is removed.

The last submitted patch, 3: 3107872-changed-css-FAIL.patch, failed testing. View results

bnjmnm’s picture

FileSize
127.27 KB

Here's a screenshot of the missing image-widget proof that it is loading from Seven, not Classy.

lauriii’s picture

Status: Needs review » Reviewed & tested by the community

There's probably isn't anything easy we could do about #3.2 given that it's not really using the libraries system. We could open a follow-up for that but it doesn't seem too high priority since in this use case it doesn't really have any serious consequences.

Besides that, the patch looks great. I manually confirmed again that all references to files are correct and did a bit of manual testing for any obvious regressions.

xjm’s picture

Issue tags: +Needs followup

Could we get the followup mentioned?

bnjmnm’s picture

Agree with @lauriii in #6 that this isn't a pressing need, but the followup regarding ckeditor_stylesheets: now exists #3108638: Make it possible to override a base theme's ckeditor_stylesheets settings.

xjm’s picture

  1. +++ b/core/tests/Drupal/KernelTests/Core/Theme/ThemeNotUsingClassyLibraryTest.php
    similarity index 100%
    copy from core/profiles/demo_umami/themes/umami/css/classy/components/action-links.css
    
    copy from core/profiles/demo_umami/themes/umami/css/classy/components/action-links.css
    copy to core/themes/seven/css/classy/components/action-links.css
    

    I was really confused for a moment before I realized that of course Seven and Umami will end up copying many of the same Classy files to their classy/ subdirectories, and git doesn't know which actual file you copied. (It's just guessing based on similarity.)

  2. +++ b/core/themes/seven/css/classy/components/messages.css
    @@ -60,7 +60,7 @@
    -  background-image: url(../../../../misc/icons/e32700/error.svg);
    +  background-image: url(../../../../../misc/icons/e32700/error.svg);
    

    One thing I didn't think of doing for the Umami patch was double-checking that all relative image paths are correctly updated in the CSS files in the classy/ subdirectory, because that's something our tests don't cover I think. I can probably check this locally with the patch applied by grepping within the directory. I'll check that now for both this patch and Umami.

  3. +++ b/core/themes/seven/seven.info.yml
    @@ -78,3 +128,6 @@ regions:
    +ckeditor_stylesheets:
    +  - css/classy/components/media-embed-error.css
    

    This is the bit related to the aforementioned followup.

xjm’s picture

Applied the patch locally and counted the ../. It's now five relative directories up from seven/css/classy/components to core/misc/ or core/modules, and (as in #3106600: Decouple Classy libraries from Umami), three to the theme's own images folder. There are 27 total url() calls in the copied CSS. Only 12 of them are shown in the patch, but that's because the rest of them are hidden by git mistakenly(ish) thinking the files are copied from the Umami classy folder, where it's also three directories up to that theme's own images folder.

[ibnsina:classy | Fri 12:09:29] $ grep -r "url(../../../../../m" * | wc -l
      12
[ibnsina:classy | Fri 12:09:34] $ grep -r "url(../../../images" * | wc -l
      15
xjm’s picture

Here's the real diffstat of the patch, which I've checked against the list in ConfirmClassyCopiesTest:

 .../Core/Theme/ConfirmClassyCopiesTest.php         |  62 +++++++++++-
 .../Core/Theme/ThemeNotUsingClassyLibraryTest.php  |  28 +-----
 .../seven/css/classy/components/action-links.css   |  43 +++++++++
 .../css/classy/components/book-navigation.css      |  40 ++++++++
 .../seven/css/classy/components/breadcrumb.css     |  29 ++++++
 core/themes/seven/css/classy/components/button.css |  15 +++
 .../css/classy/components/collapse-processed.css   |  32 +++++++
 .../css/classy/components/container-inline.css     |  22 +++++
 .../seven/css/classy/components/dropbutton.css     |  33 +++++++
 .../css/classy/components/exposed-filters.css      |  46 +++++++++
 core/themes/seven/css/classy/components/field.css  |  25 +++++
 core/themes/seven/css/classy/components/file.css   |  62 ++++++++++++
 core/themes/seven/css/classy/components/form.css   | 104 +++++++++++++++++++++
 core/themes/seven/css/classy/components/forum.css  |  46 +++++++++
 core/themes/seven/css/classy/components/icons.css  |  21 +++++
 .../seven/css/classy/components/image-widget.css   |  33 +++++++
 .../seven/css/classy/components/indented.css       |  16 ++++
 .../seven/css/classy/components/inline-form.css    |  33 +++++++
 .../seven/css/classy/components/item-list.css      |  32 +++++++
 core/themes/seven/css/classy/components/link.css   |  16 ++++
 core/themes/seven/css/classy/components/links.css  |  23 +++++
 .../css/classy/components/media-embed-error.css    |  20 ++++
 core/themes/seven/css/classy/components/menu.css   |  34 +++++++
 .../seven/css/classy/components/messages.css       |  72 ++++++++++++++
 .../seven/css/classy/components/more-link.css      |  12 +++
 core/themes/seven/css/classy/components/node.css   |   8 ++
 core/themes/seven/css/classy/components/pager.css  |  16 ++++
 .../seven/css/classy/components/progress.css       |  69 ++++++++++++++
 .../seven/css/classy/components/search-results.css |   8 ++
 .../seven/css/classy/components/tabledrag.css      |  14 +++
 .../seven/css/classy/components/tableselect.css    |  19 ++++
 .../seven/css/classy/components/tablesort.css      |  11 +++
 core/themes/seven/css/classy/components/tabs.css   |  33 +++++++
 .../seven/css/classy/components/textarea.css       |  11 +++
 .../seven/css/classy/components/ui-dialog.css      |  15 +++
 core/themes/seven/css/classy/components/user.css   |  66 +++++++++++++
 .../seven/css/classy/layout/media-library.css      |  28 ++++++
 core/themes/seven/images/classy/README.txt         |  12 +++
 .../classy/icons/application-octet-stream.png      |   3 +
 .../seven/images/classy/icons/application-pdf.png  |   5 +
 .../classy/icons/application-x-executable.png      |   3 +
 .../seven/images/classy/icons/audio-x-generic.png  |   3 +
 .../seven/images/classy/icons/forum-icons.png      |  10 ++
 .../seven/images/classy/icons/image-x-generic.png  |   6 ++
 .../images/classy/icons/package-x-generic.png      |   4 +
 .../themes/seven/images/classy/icons/text-html.png |   7 ++
 .../seven/images/classy/icons/text-plain.png       |   4 +
 .../seven/images/classy/icons/text-x-generic.png   |   4 +
 .../seven/images/classy/icons/text-x-script.png    |   5 +
 .../seven/images/classy/icons/video-x-generic.png  |   5 +
 .../images/classy/icons/x-office-document.png      |   5 +
 .../images/classy/icons/x-office-presentation.png  |   5 +
 .../images/classy/icons/x-office-spreadsheet.png   |   4 +
 core/themes/seven/js/classy/README.txt             |  12 +++
 .../js/classy/media_embed_ckeditor.theme.es6.js    |  22 +++++
 .../seven/js/classy/media_embed_ckeditor.theme.js  |  12 +++
 core/themes/seven/seven.info.yml                   |  53 +++++++++++
 core/themes/seven/seven.libraries.yml              |  77 +++++++++++++++
 58 files changed, 1428 insertions(+), 30 deletions(-)

Manually inspected and confirmed that all the correct CSS, JS, and images are there. A lot of these things sure seem to be related to the Media Library.

+++ b/core/tests/Drupal/KernelTests/Core/Theme/ThemeNotUsingClassyLibraryTest.php
@@ -498,16 +483,7 @@ public function providerTestThemeAccountsForClassyExtensions() {
-          'media_library/view',
-          'media_library/widget',

These two previously skipped libraries don't actually have any new library definitions being declared for them in seven.info.yml. I asked @bnjmnm about this and he indicated that in HEAD currently Seven is already completely overriding it. I wasn't able to figure out if or when this changed between now and when they were added to Classy (and Seven at the same time) in the Media stable-maker patch. Fortunately, it doesn't actually hurt anything for them to have been skipped unnecessarily before; the important thing is that the array is empty now and the test passes.

  • xjm committed a7c5112 on 9.0.x
    Issue #3107872 by bnjmnm, lauriii: Decouple Classy libraries from Seven
    

  • xjm committed d65ab28 on 8.9.x
    Issue #3107872 by bnjmnm, lauriii: Decouple Classy libraries from Seven...
xjm’s picture

Status: Reviewed & tested by the community » Fixed

Committed to 9.0.x and cherry-picked to 8.9.x. Thanks!

Status: Fixed » Closed (fixed)

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