Order of libraries, css override issue

Created on 6 April 2025, 18 days ago

I post this temporarily as a bug, but I don't really know if it is one.

I was running Drupal 10.3.7 using D8W3CSS theme (extended by a custom subtheme, and then again by a site-specific subtheme) and D8W3CSS paragraphs (with versions contemporary of Drupal 10.3.7).

I had defined a custom paragraph template in my custom subtheme, and in this custom paragraph template, I attached a css library in the custom subtheme.

And in my site-specific theme, I had overridden the CSS using the site-specific theme's custom CSS.

For example, there was a declaration "div.para-text { position: relative; }" which got overridden by "div.para-text { position: absolute; }" in the custom site-specific CSS.

Inspecting the element, in the styles, I see div.para-text { position: absolute; } above div.para-text { position: relative; }, so it's overridden.

-------------
Now: I just updated to Drupal 10.4.6, and I also updated D8W3CSS theme and paragraphs, no changes to custom subtheme and site-specific theme.

After clearing caches, etc. the page looked in disarray, and upon inspection of the elements, I noticed that the order of the CSS declarations for that element was now reversed: div.para-text { position: relative; } now appears above div.para-text { position: absolute; }, so it wasn't overridden anymore.

So I'm puzzled about what caused the change.

I also wonder if the desired behaviour is that the site-specific theme's custom CSS should override a library included in a custom paragraph template or not.

🐛 Bug report
Status

Active

Version

2.0

Component

Miscellaneous

Created by

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

Comments & Activities

  • Issue created by @drupaldope
  • 🇺🇸United States flashwebcenter Austin TX

    Hello,
    I'm not entirely sure what caused the issue, but the recent update to the w3css theme involved removing the word "Version" from all libraries. This change was necessary because it was causing cached files in the browser dependent on the Core version. You can read more about it here: https://www.drupal.org/project/entity_browser/issues/3325948 🐛 Remove VERSION from libraries.yml Fixed

    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.

    Side note: I’m also curious whether the intended behavior is for the site-specific theme’s CSS to override a library included in a custom paragraph template or not.

    In general, yes a custom theme will override any module-provided assets by default. However, this behavior can be adjusted depending on how you define and attach libraries in your sub-theme.

    Best wishes,
    Alaa

  • Thank you so much for your comments, Alaa !

    I'll continue to look for the cause, as I have made no changes in the subtheme, nor the site's theme.

  • Hi :)

    Same me many many problem with CSS or first chargement of my page since 10.4 :(

    You can see here:
    https://anarkia333data.center/

  • 🇺🇸United States flashwebcenter Austin TX

    Hello,

    i have uncheck 2 options optimisation "Aggregate" in option Drupal, seem resolve problem of the first bad chargement

    If this resolves the issue, it likely means the problem was caused by cached data. You'll need to clear both your Drupal caches and your browser cache to ensure all updates are properly reflected.

    Best wishes,
    Alaa

  • Yes I have do it. :)

    Problem with all navigator, Edge, Opera, Chrome.... Impossible to active option "Agregation" or problem white page or CSS problem. Need to desactivate this 2 option.

    Other problem I use "Hierarchical Taxonomy Menu" and menu no works now in Drupal 10.3.7.

Production build 0.71.5 2024