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

CommentFileSizeAuthor
#21 3357728-21.patch843 bytespsf_
#16 interdiff-14_16.txt741 bytesgauravvvv
#16 3357728-16.patch844 bytesgauravvvv
#14 3357728-14.patch410 bytesgauravvvv

Comments

Chris64 created an issue. See original summary.

cilefen’s picture

cilefen commented

Please show the hook implementation in the issue summary.

chris64’s picture

chris64
he/him
Primary language French
Location France
commented

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.

chris64’s picture

chris64
he/him
Primary language French
Location France
commented

@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).

chris64’s picture

chris64
he/him
Primary language French
Location France
commented

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

chris64’s picture

chris64
he/him
Primary language French
Location France
commented

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.

chris64’s picture

chris64
he/him
Primary language French
Location France
commented
Issue summary: View changes

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

chris64’s picture

chris64
he/him
Primary language French
Location France
commented
Version: 11.x-dev » 10.1.x-dev
Component: asset library system » Olivero theme
chris64’s picture

chris64
he/him
Primary language French
Location France
commented
Issue summary: View changes
chris64’s picture

chris64
he/him
Primary language French
Location France
commented

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.

shobhit_juyal’s picture

shobhit_juyal commented

Hi @Chris64,

Further should we exclude drupal.message library as well ?

chris64’s picture

chris64
he/him
Primary language French
Location France
commented

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.

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
StatusFileSize
new 3357728-14.patch410 bytes

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.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update, +Needs tests

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.

gauravvvv’s picture

gauravvvv commented
Title: Some libraries can not be removed from attachments through hook_page_attachments_alter. » Break dependencies chain in olivero.libraries.yml
StatusFileSize
new 3357728-16.patch844 bytes
new interdiff-14_16.txt741 bytes

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

chris64’s picture

chris64
he/him
Primary language French
Location France
commented

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]);
          }
chris64’s picture

chris64
he/him
Primary language French
Location France
commented

For the error see https://www.drupal.org/project/void/issues/3060386.

chris64’s picture

chris64
he/him
Primary language French
Location France
commented

The change components: -> component: solves this problem #17.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

psf_’s picture

psf_ commented
StatusFileSize
new 3357728-21.patch843 bytes

I do the change by Chris64 in #19.

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

The new patch apply to 10.3.2 too

dcam’s picture

dcam commented
Status: Needs work » Closed (outdated)
Issue tags: +stale-issue-cleanup

A nearly identical change was introduced by #3515041: Move Olivero's messages.css to its messages library and committed earlier this year. This issue is outdated.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.