Problem/Motivation

Since the introduction of the improved Drupal\Core\Ajax\AddCssCommand, CSS files gets appended inside the head instead of prepended. This breaks CSS styles.

Steps to reproduce

Trigger an event that calls `AddCssCommand` and take a look at the head.

Proposed resolution

Override the default loadjs injection to prepend CSS link elements in stead of appending (see patch)
In an ideal world, the CSS should keep the CSS 'weights' in account, so CSS component fileshould not be loaded afther a CSS theme file.

CommentFileSizeAuthor
#12 3396505-12-10.3.x.patch452 bytesjonmcl
#4 3396505-4.patch459 bytesal0a
#2 3396505.patch439 bytesal0a

Comments

al0a created an issue. See original summary.

al0a’s picture

al0a
he/him
Primary language Dutch
commented
StatusFileSize
new 3396505.patch439 bytes
al0a’s picture

al0a
he/him
Primary language Dutch
commented
Title: Improved Drupal\Core\Ajax\AddCssCommand does not keep orders in account. » Improved Drupal\Core\Ajax\AddCssCommand causes change in CSS load order.
al0a’s picture

al0a
he/him
Primary language Dutch
commented
StatusFileSize
new 3396505-4.patch459 bytes

Sorry, patch was wrong, was one folder to deep.

viren18febs’s picture

viren18febs commented
Status: Active » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs tests

Possible to get a test case showing this issue?

yonailo’s picture

yonailo
He/him
commented

Does anybody know why the order has been changed without a change record ?

Thank you for your patch @al0a, it fixes an issue with z-index + library media widget in our case.

dinazaur’s picture

dinazaur commented

Hello, I had an issue with the styles applied to the modal, especially the backdrop. The patch resolves the issue.

vincent.hoehn’s picture

vincent.hoehn
Primary language German
Location Dresden, Germany
commented

We also have a problem with the z-index and the media-library-widget. However, it only occurred after the update from 10.1.7 to 10.2.0. Does anyone have the same issue?
Unfortunately, the patch does not solve the problem

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.

jonmcl’s picture

jonmcl commented

This fixed multiple issues for use. Our theme CSS is at the end of <head> (as it should be) and then a module's library CSS (select2) ends up also added to the end of when the library is included with an AJAX dialog. With our theme CSS no longer at the end of <head> we would need to review all CSS selectors to potentially add more specificity.

This patch works well for us (10.2.6).

jonmcl’s picture

jonmcl commented
StatusFileSize
new 3396505-12-10.3.x.patch452 bytes

Re-rolled #4 for 10.3.x

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.