CSS files not added as very last files

Created on 7 September 2024, 11 days ago
Updated 16 September 2024, 2 days ago

Problem/Motivation

The style.css and color.css have a wrong weight. They should be the very last files added to the page as they should be able to override previous CSS rules.

global-styling:
  version: VERSION
  js:
    js/global.js: {}
  css:
    component:
      css/style.css: { weight: 100 }
      css/colors.css: { weight: 99 }

Steps to reproduce

Proposed resolution

Add weight: 100 to the two files. Maybe to the JS also.

Remaining tasks

User interface changes

API changes

Data model changes

πŸ› Bug report
Status

Fixed

Version

5.0

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany marc.bau

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

Comments & Activities

  • Issue created by @marc.bau
  • πŸ‡©πŸ‡ͺGermany marc.bau
  • πŸ‡©πŸ‡ͺGermany marc.bau
  • Status changed to Closed: works as designed 5 days ago
  • πŸ‡΅πŸ‡ͺPeru hatuhay Lima

    No need to load last

  • Status changed to Active 5 days ago
  • πŸ‡©πŸ‡ͺGermany marc.bau

    I'm sorry, but it need to load last. Other files ordered after my style.css are overridding my style.css because of wrong order. My custom changes are the last order...

  • πŸ‡ΊπŸ‡ΈUnited States shelane

    In order to move my css to a different weight, I used hook_css_alter. In my case, I needed my custom modules to be able to override previous css.

    
    /**
     * Implements hook_css_alter().
     *
     * @inheritdoc
     */
    function sienna_css_alter(array &$css) {
      $base = [
        'themes/custom/sienna/css/3.4.1/bootstrap.css',
        'themes/custom/sienna/css/all.min.css',
        'themes/custom/sienna/css/style.css',
        'themes/custom/sienna/css/paragraphs.css',
        'themes/custom/sienna/css/hero_banner.css',
        'themes/custom/sienna/css/news_article.css',
        'themes/custom/sienna/css/ckeditor.css',
      ];
    
      foreach ($base as $lib_css) {
        if (isset($css[$lib_css])) {
          $css[$lib_css]['group'] = CSS_COMPONENT;
          $css[$lib_css]['weight'] = -5;
        }
      }
    }
    
    
  • πŸ‡΅πŸ‡ͺPeru hatuhay Lima
  • πŸ‡©πŸ‡ͺGermany marc.bau

    This is not a support case. This is a defect in the theme.

    Have you disabled aggregation and verified the order of files?

    Why are you saying than this is not a defect? I do not get it.

  • πŸ‡ΊπŸ‡ΈUnited States shelane

    The bug is actually in core and not in the theme.

    https://drupal.stackexchange.com/questions/278774/theme-css-libraries-al...

    This where I got my solution from.

  • πŸ‡©πŸ‡ͺGermany marc.bau

    @shelane: You can set a weight in theme libraries of -100 and you are before core if I remember correctly. Your css_alter works the same way :-). There are default value for core/modules/themes, but you can always change the weight and jump in every position you need.

    But here - the theme need to make sure it is properly positioned first... otherwise - possible chaos.

  • πŸ‡΅πŸ‡ͺPeru hatuhay Lima

    colors.css sets css vars, order is not an issue.
    Core styles should be disabled, so no risks on them.
    styles.css if no Sass should overrite bootstrap styles, bootstrap as dependency should load first.
    Module css loads before themes css.
    Furthermore, your custom theme styles order could be set on the subtheme.
    So, what styles are overwriten and by who?

  • πŸ‡©πŸ‡ͺGermany marc.bau

    Just one simple example. Clone bootstrap_subtheme. Style.css has no weight defined by default.

    Add this to css new subtheme style.css

    .btn-default, 
    .btn-default:hover {
        color: #fff;
    }
    

    It gets overridden by _banner.scss and the color becomes blue.

    Core styles should be disabled, so no risks on them.

    I see many core CSS files loaded?

    Furthermore, your custom theme styles order could be set on the subtheme.

    I can change the wrong order, but I refer to code example bootstrap_subtheme many will use as a default start point like me.

  • Status changed to Fixed 3 days ago
  • πŸ‡΅πŸ‡ͺPeru hatuhay Lima
  • πŸ‡©πŸ‡ͺGermany marc.bau

    What about the bootstrap.min.css? Should this have a different weight?

  • πŸ‡΅πŸ‡ͺPeru hatuhay Lima

    There is really no need to add weights (if bootstrap library is called before global styling library), but for styles and colors weight is harmless and with the new weights applied bootstrap call will occur always before, avoiding any overrides.

Production build 0.71.5 2024