Problem/Motivation

When Core's CSS aggregation is enabled, Drupal attempts to combine CSS files but fails when processing the gin/dialog library, creating broken aggregate files with missing references. This manifests as:

  • Missing aggregated CSS files (e.g., css_WoF7WDetc.css)
  • 404 errors in the browser console for non-existent CSS files
  • Broken or missing styles for authenticated users only (anonymous users unaffected)

Error looks like:

Refused to apply style from 'https://test.lndo.site/sites/default/files/css/css_WoF7WD96Du1YbxRdmtucRgfNlBjte-WwTrSHdIgmY1A.css?delta=6&language=en&theme=gnwt&include=eJx1UltyxCAMuxCE2RMxBtzEUwKMDdumpy95t9PuB8GSlSArQJgp2ZpzdMBWENhPZt8U_Oqtu5gDDeRzUn1V_KwNogncCsThZvSh7CJG4_NccsJUZRjTR9UaInLVDlLCV5I3whhe9AqMqCeE0N8OIJPLwOE0pwI-sVtan5cNDFQzEzwei_lR60iOgReF6Umc09wPsZQCeeiSc6x_m2qkZPqyDgQvMPUPf_UUIJ7JqdWyWUVW6hJRDiLnKpWh7DDlgPatxXjCmrVAOsSF0dYJZ9ygvUe-KrtGokbOrVw5FGAY-wmTnIPczNBSaS6STBgUo2sUg_XgJ7TgPYqYg9QbqXfyipNR-h8RenZf4GK3TrEim5vXG68ke-pZzD1zsJHSu5i_1LDPJotUnLeoVBO84l_r7cbJN425DAw' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I've narrowed this down to the following line:

https://git.drupalcode.org/project/gin_toolbar/-/blob/3.0.x/gin_toolbar.module?ref_type=heads#L411

Commenting out the gin_toolbar_css_alter results in clearing the error.

Steps to reproduce

  1. Install and enable the Gin admin toolbar.
  2. Enable CSS aggregation under Configuration → Development → Performance.
  3. Log in as an authenticated user and visit a front-end page that includes admin toolbar or Gin dialog assets.
  4. Open browser DevTools → Console/Network tab.
  5. Observe 404 errors for aggregated CSS files (e.g., Invalid filename responses or Refused to apply style MIME errors).
CommentFileSizeAuthor
#4 3552735-dialog-library-reordering-css-aggregation-fix-4.patch1.25 KBtanner.svg
#2 3552735-dialog-library-reordering-css-aggregation-fix-2.patch1.24 KBtanner.svg

Issue fork gin_toolbar-3552735

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

tanner.svg created an issue. See original summary.

tanner.svg’s picture

tanner.svg commented
StatusFileSize
new 3552735-dialog-library-reordering-css-aggregation-fix-2.patch1.24 KB

I think we can substitute the gin_toolbar_css_alter method for changing the components/dialog.css weight to 101 for doing this in the gin_toolbar_library_info_alter. After applying this switch, the dialog.css appears to be in the same order in the DOM and I'm no longer seeing the missing aggregated CSS file error when i enable CSS aggregation.

tanner.svg’s picture

tanner.svg commented
Status: Active » Needs review
tanner.svg’s picture

tanner.svg commented
StatusFileSize
new 3552735-dialog-library-reordering-css-aggregation-fix-4.patch1.25 KB

Patch here, see my last comment.

tanner.svg’s picture

tanner.svg commented
jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Status: Needs review » Needs work

Can you please turn this into an MR?

Also, this raises a question: should we instead update the weight of that library in the Gin theme rather than altering it after the event?

tanner.svg opened merge request !68

tanner.svg’s picture

tanner.svg commented

MR opened.

Updating the weight in the Gin theme might be the better approach. I'm not sure I completely understand the importance of having dialog.css attach after the custom theme CSS. I suppose it's for the cascade so that Dialog UI styling has priority when rendering on the front-end and it has to compete with custom theme styles, but that probably should be mitigated by the custom theme.

But it is a good question, is the re-ordering only relevant when using the Gin Toolbar?

tanner.svg’s picture

tanner.svg commented
Status: Needs work » Needs review
tuutti’s picture

tuutti commented

We recently ran into this issue after updating to Drupal 11.

The dialog library causes the core asset hash calculation to fail, which triggers a redirect to the correct file. The redirect in turn causes the next aggregated asset request to throw a 400 error due to an invalid group name.

The patch seems to fix the issue.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Status: Needs review » Fixed

Let's do it.

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.

Status: Fixed » Closed (fixed)

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