Weight and Group is not respected, inline css always injected last

Created on 24 May 2023, over 1 year ago
Updated 24 April 2024, 7 months ago

Problem/Motivation

The inline CSS snippets are always loaded last, this can be an issue in some usecases where the order of the css styles matters. I agree that in 99% of usecases you will want the inline styles loaded last (or it does not matter), however in the project i'm working on it had to be injected higher up in the chain (the theme had to override after the inline css).

Steps to reproduce

Inject an inline css with the group set to -999 and weight set to -999 and one would expect the inline css to be loaded before everything else, unfortunately it's not.

Proposed resolution

Adding a patch below to have a quick fix that works for my project.

πŸ› Bug report
Status

Needs work

Version

1.0

Component

Code

Created by

πŸ‡§πŸ‡ͺBelgium m4TT3rs

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @m4TT3rs
  • πŸ‡§πŸ‡ͺBelgium m4TT3rs

    First patch to fix the issue.

  • πŸ‡¨πŸ‡¦Canada gapple

    At a quick glance, it looks like this could interfere with aggregation / optimization? I don't recall at the moment were the optimization step happens in the render flow.

  • First commit to issue fork.
  • Merge request !9Apply weight sort to CSS/JS rendering β†’ (Open) created by neclimdul
  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 9.5.x + Environment: PHP 7.4 & MySQL 8
    last update 7 months ago
    6 pass
  • Status changed to Needs review 7 months ago
  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 9.5.x + Environment: PHP 7.4 & MySQL 8
    last update 7 months ago
    6 pass
  • πŸ‡ΊπŸ‡ΈUnited States neclimdul Houston, TX

    Opened a merge request that applies a similar patch to both the CSS and JS rendering.

    I'm also not sure hot the aggregation/optimization interacts with this but based on some basic testing the aggregation did not seem to be affected by this sorting. That's to say, by using weight to place an inline element between two aggregated scripts, they where split into two aggregation files served before and after the inline javascript.

  • Status changed to Needs work 7 months ago
  • πŸ‡ΊπŸ‡ΈUnited States neclimdul Houston, TX

    I didn't notice it in my initial review but with further testing I'm seeing some weirdness in javascript sorting. I think this might be causing problems with dependencies since they aren't being considered in the resort.

  • πŸ‡ΊπŸ‡ΈUnited States neclimdul Houston, TX

    Looked at this some. The asset rendering rendering pipeline is a mess and fights this at every step so I'm not even sure is going to work without updates to core. Some many things change in the sort depending on if its optimized or not. there's all the grouping. And each component relies on the logic of the other steps and assumes only internal and external files are possible.

    Also found this that's probably related in some way. πŸ“Œ Replace custom weights with dependencies in library declarations; introduce "before" and "after" for conditional ordering Needs review

    Going to keep hacking on this but its pretty complicated and at the very least it can't really happen as late as the renderers.

Production build 0.71.5 2024