Subtheme not loading css in correct order

I now found this: https://www.drupal.org/forum/support/theme-development/2024-03-01/css-lo... →

and this https://www.drupal.org/node/3473558 →

Hello,

Thank you for the detailed explanation.
To enforce the order and ensure the sub-theme styles are loaded last, you can define the CSS in the sub-theme’s maxilein.info.yml file accordingly.

maxilein-global:
  css:
    theme:
      css/maxilein-style.css: { weight: 400 }
  js:
    js/maxilein-script.js: {}

Best wishes,
Alaa

Thank you. But you are meaning in the maxilein.libraries.yml, right?

paragraphs-bundles-custom.css still loads after maxilein-style.css
no matter whether it is in maxilein.info.yml or maxilein.libraries.yml
many drush cr ...

maybe this helps: https://www.drupal.org/forum/support/post-installation/2023-12-19/solved... →

Or this https://www.drupal.org/project/drupal/issues/3467860 🐛 Logic error in Drupal's lazy load for asset aggregation Active

And here ( https://www.drupal.org/node/3473558 → ) it says: "In general, libraries should avoid setting custom weights where possible, and rely on properly declaring dependencies between libraries instead wherever possible."

And another very long standing issue here: https://www.drupal.org/project/drupal/issues/1945262 📌 Replace custom weights with dependencies in library declarations; introduce "before" and "after" for conditional ordering Needs work

It completely varies by element. I cannot detect a pattern. Sometimes there are 3 or more other css loaded after my custom css.

Hello,
Yes, I fixed the typo and you should update maxilein.libraries.yml.

To control the order in which libraries are loaded, it's recommended to follow the SMACSS (Scalable and Modular Architecture for CSS) methodology. Drupal allows you to organize your CSS files into the following categories, each with its own load order weight:

• Base: Load Order Weight -200
• Layout: Load Order Weight -100
• Component: Load Order Weight 0
• State: Load Order Weight 100
• Theme: Load Order Weight 200

Example:

global-styling:
  css:
    base:
      css/reset.css: {}
    layout:
      css/layout.css: {}
    component:
      css/button.css: {}
    state:
      css/button-hover.css: {}
    theme:
      css/colors.css: {}

When Drupal processes these CSS files, it loads them based on their assigned weights. This ensures that foundational styles are loaded first, followed by layout structures, component-level styling, state changes, and finally visual theme adjustments. The result is a logical, layered approach to styling.

By default, a custom theme will override any assets provided by modules. The CSS files for the Paragraphs bundles are correctly included under the theme layer, and if you apply the weight as shown in the previous code, your sub-theme’s styles should load last. I tested this locally and confirmed that it works as expected.

If this behavior is not occurring on your site, there may be an environmental or configuration issue outside the scope of what I can assist with.

Best wishes,
Alaa

Thank you as always for your help.

Just to report back: I cannot reproduce the erratic behaviour. I had played with the custom.css without css aggregation disabled for quite some time.
I then changed my maxilein.libraries.yml according to https://www.drupal.org/project/drupal/issues/3070381 🐛 Base theme libraries may be output in reverse order Active to this: adding dependencies.. etc. did not change anything.
Then I re-added the weight. Changed nothing...
So out of desperation I enabled css aggregation. Changed nothing.
I played around with the settings, drush cr.
Disabled css aggregation again.
Suddenly it worked. I really don't know why.
I even tried to remove the dependency and in the end the weight only would also work.
So I still left my maxilein.libraries.yml like this:

maxilein-global:
  css:
    theme:
     css/maxilein-style.css: {weight: 400}
  dependencies:
    - solo/solo-global
  js:
    js/maxilein-script.js: {}

Mentioning this issue may cause problems in the future for some.
https://www.drupal.org/project/drupal/issues/3070381 🐛 Base theme libraries may be output in reverse order Active

Thanks for following up!

In the Solo theme, I’ve followed Drupal’s SMACSS-style CSS organization: https://www.drupal.org/docs/develop/standards/css/css-file-organization →

In solo.libraries.yml, I explicitly added a weight to each CSS file even though Drupal already handles some of that by default. This way, if something goes wrong, I still have a fallback order I can rely on.

Now, regarding sub-themes: to make sure the sub-theme CSS loads after the base theme, I simply gave the sub-theme’s styles a higher weight than those in Solo. That ensures the override order works as expected.

About the issue you linked ( https://www.drupal.org/project/drupal/issues/3070381 🐛 Base theme libraries may be output in reverse order Active ), I noticed no weights were set in the Theme A > B > C chain, which could definitely lead to inconsistent behavior.

In your case, manually setting the weight in the sub-theme should fix it since it forces the sub-theme styles to load last.

As for CSS aggregation: when you're actively updating styles, a few steps help avoid these kinds of issues:

1. Temporarily disable CSS/JS aggregation at /admin/config/development/performance
2. Turn on development mode at /admin/config/development/settings
3. And clear your browser cache. A lot of people don’t do this, and old CSS can linger. Personally, I keep a second tab open in private mode while working, that way I get a clean slate every time I reload.

Best wishes,
Alaa