Break dependencies chain in olivero.libraries.yml

Created on 2 May 2023, over 1 year ago
Updated 18 September 2024, 4 months ago

Problem/Motivation

In our Drupal system we need a page free from some current Drupal css files. This is done with an hook_page_attachments_alter removing some elements in the $attachments['#attached']['library'] array. Particularly olivero/global-styling.

With D9.5 it was okay. With D10.1 there is a problem: it is like olivero/global-styling is still here, and a lot of css files are attached to the page.

In hook_page_attachments_alter, setting $attachments['#attached']['library'] = []; do not resolve the problem.

Digging around, the problem seems to come through dependencies from toolbar/toolbar, and from there core/drupal.ajax, and from there core/drupal.message. Since neutralizing drupal.message in core.libraries.yml by an # as dependency of drupal.ajax makes the problem disappear. drupal.message is new in D10.1, and does not exist in D9.5.

The problem comes from olivero/drupal.message, through libraries-extend. In core/themes/olivero/olivero.info.yml,

libraries-extend:
  core/drupal.message:
    - olivero/drupal.message

From core/themes/olivero/olivero.libraries.yml the dependencies chain is,

drupal.message:
...
  dependencies:
    - olivero/messages
messages:
...
  dependencies:
    - olivero/global-styling

and the unwanted library olivero/global-styling is got.

Steps to reproduce

With hook_page_attachments_alter remove the library olivero/global-styling from $attachments['#attached']['library'] for the target page.

Look at the page html. Last css files of the page,
- D9.5,

<link rel="stylesheet" media="all" href="/modules/contrib/admin_toolbar/css/admin.toolbar.css?ru1gmv" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/progress.css?ru1gmv" />

- D10.1,

<link rel="stylesheet" media="all" href="/modules/contrib/admin_toolbar/css/admin.toolbar.css?rty47g" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/base/fonts.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/base/variables.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/base/base.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/layout.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/grid.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/layout-content-narrow.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/layout-content-medium.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/layout-footer.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/region.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/region-content.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/region-hero.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/region-secondary-menu.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/social-bar.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/views.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/layout/region-content-below.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/progress.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/block.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/breadcrumb.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/embedded-media.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/footer.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/button.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/container-inline.module.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/fieldset.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/field.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/form.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/form-boolean.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/form-text.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/form-textarea.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/form-select.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/header-buttons-mobile.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/header-navigation.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/header-site-branding.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/header-sticky-toggle.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/hero.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/links.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/messages.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/navigation/nav-button-mobile.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/node.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/node-teaser.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/page-title.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/site-header.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/skip-link.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/pager.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/table.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/text-content.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/tabledrag.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/wide-image.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/powered-by-block.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/feed.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/details.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/ui-dialog.css?rvjfqe" />
<link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/tabs.css?rvjfqe" />

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Olivero 

Last updated 3 days ago

Created by

🇫🇷France Chris64 France

Live updates comments and jobs are added and updated live.
  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Issue created by @Chris64
  • Please show the hook implementation in the issue summary.

  • 🇫🇷France Chris64 France

    Here it is,

    /**
     * Implements hook_page_attachments_alter().
     */
    function ligamen_page_attachments_alter(array &$attachments) {
      $attachments['#attached']['library'][] = 'ligamen/ligamen-color-theme';
    
      $routeMatch = \Drupal::service('current_route_match');
      $route_name = $routeMatch->getRouteName();
      if ('entity.node.canonical' === $route_name) {
        $node = $routeMatch->getParameter('node');
        if ('arbre' === $node->bundle()) {
          $to_remove = [
            'system/base',
            'classy/base',
            'core/normalize',
            'bartik/global-styling',
            'olivero/global-styling',
            'adminimal_admin_toolbar/adminimal-admin-toolbar',
            'quickedit/quickedit',
            'contextual/drupal.contextual-links'
          ];
          foreach($to_remove as $library) {
            $index = array_search($library, $attachments['#attached']['library']);
            if (FALSE !== $index) {
              unset($attachments['#attached']['library'][$index]);
            }
          }
        }
      }
    }

    The remaining libraries after that,

    (
        [3] => core/drupal.active-link
        [4] => ligamen/ligamen-color-theme
    )

    It works on D9, and D10.0. Here the critical library is global-styling.

  • 🇫🇷France Chris64 France

    @cilefen, we sought more elements about the problem and we get one. But strange. No trivial links to css files seen. Many experiments to identify the culprit in the core/drupal.message library dependencies failed. But found a very simple change who made our problem disappear: rename the library in core.libraries.yml: drupal.message -> drupal.messageb (two occurrences).

  • 🇫🇷France Chris64 France

    New elements. The problem comes from olivero/drupal.message, through libraries-extend. The above rename cause the avoidance of this extension.

  • 🇫🇷France Chris64 France

    From above in core/themes/olivero/olivero.libraries.yml the dependencies chain is,

    drupal.message:
    ...
      dependencies:
        - olivero/messages
    messages:
    ...
      dependencies:
        - olivero/global-styling

    and the unwanted library olivero/global-styling is got.

  • 🇫🇷France Chris64 France

    Comparing Drupal 9.5 and 10.1 about Olivero messages libraries, a major change concerns olivero/messages, in olivero.libraries.yml,

      dependencies:
        - core/drupal.array.includes

    ->

      dependencies:
        - olivero/global-styling

    For both css/components/messages.css is under olivero/global-styling.

  • 🇮🇳India shobhit_juyal New Delhi

    Hi @Chris64,

    Further should we exclude drupal.message library as well ?

  • 🇫🇷France Chris64 France

    Hi @shobhit_juyal. The drupal.message library should not be exclude. But for my purpose the current approach in Drupal 10.1 causes some problems. css/components/messages.css is requested, but through olivero/global-styling a lot of other and unnecessary files are gotten.

  • Status changed to Needs review over 1 year ago
  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    29,443 pass
  • 🇮🇳India gauravvvv Delhi, India

    global-styling is what includes js/navigation-utils.js, which initializes Drupal.olivero. Any code using Drupal.olivero like messages.js using Drupal.olivero.closeMessage needs to have that run first. For that I have added olivero/navigation-base as a dependency on part of global styling.

  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States smustgrave

    If #14 is the fix the title and issue summary need to be updated. As the patch does not make sense based on the title.

    Also will need a test case showing the problem.

  • 🇮🇳India gauravvvv Delhi, India

    Root cause of this issue is already there in the issue summary. you can see it here .

    A dependency chain was there which causes the issue. messages library has dependency of global-styling and drupal.message has the dependency of messages library. That's why we're unable to remove attachments through hook_page_attachments_alter.

    I have removed the global library dependency and added the required files to messgaes libarary.

    Status is NW, as need to add tests

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    Build Successful
  • 🇫🇷France Chris64 France

    Apply 3357728-14.patch : OK: our problem disappears. Since the two last .css are as expected,

    <link rel="stylesheet" media="all" href="/modules/contrib/admin_toolbar/css/admin.toolbar.css?rxe502" />
    <link rel="stylesheet" media="all" href="/core/themes/olivero/css/components/progress.css?rxe502" />

    Apply 3357728-16.patch : PB: an error appends,
    Error : Undefined constant "CSS_COMPONENTS" dans constant() (ligne 184 de */web/core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php).
    May be an other problem? Drupal 10.1.1.

    The corresponding line 184 is
    $options['weight'] += constant($category_weight);
    in

          foreach (['js', 'css'] as $type) {
            // Prepare (flatten) the SMACSS-categorized definitions.
            // @todo After Asset(ic) changes, retain the definitions as-is and
            //   properly resolve dependencies for all (css) libraries per category,
            //   and only once prior to rendering out an HTML page.
            if ($type == 'css' && !empty($library[$type])) {
              assert(static::validateCssLibrary($library[$type]) < 2, 'CSS files should be specified as key/value pairs, where the values are configuration options. See ht>
              assert(static::validateCssLibrary($library[$type]) === 0, 'CSS must be nested under a category. See https://www.drupal.org/node/2274843.');
              foreach ($library[$type] as $category => $files) {
                $category_weight = 'CSS_' . strtoupper($category);
                assert(defined($category_weight), 'Invalid CSS category: ' . $category . '. See https://www.drupal.org/node/2274843.');
                foreach ($files as $source => $options) {
                  if (!isset($options['weight'])) {
                    $options['weight'] = 0;
                  }
                  // Apply the corresponding weight defined by CSS_* constants.
                  $options['weight'] += constant($category_weight);
                  $library[$type][$source] = $options;
                }
                unset($library[$type][$category]);
              }
  • 🇫🇷France Chris64 France

    The change components: -> component: solves this problem #17 🐛 Break dependencies chain in olivero.libraries.yml Needs work .

  • 🇪🇸Spain psf_ Huelva

    I do the change by Chris64 in #19.

    I'm sorry, I don't know how do the interdiff.

Production build 0.71.5 2024