2

I am working on a module that should override some theme specific settings. The issue is that I cannot get my CSS to override the theme's.

I include the library in hook_page_attachments like so:

function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'mymodule/overrides';
}

and

function whitelabel_library_info_build() {
  $libraries['overrides']['css']['theme']['path/to/override.css'] = ['weight' => 100000];
    }
  }
  return $libraries;
}

Looking at the the entire list of CSS files included it is there. But still too high. How can I move it even lower?

<style media="all">
@import url("/core/assets/vendor/normalize-css/normalize.css?osxmg2");
@import url("/core/themes/stable/css/system/components/ajax-progress.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/align.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/autocomplete-loading.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/fieldgroup.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/container-inline.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/clearfix.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/details.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/hidden.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/item-list.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/js.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/nowrap.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/position-container.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/progress.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/reset-appearance.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/resize.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/sticky-header.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/system-status-counter.css?osxmg2");
@import url("/core/themes/stable/css/system/components/system-status-report-counters.css?osxmg2");
@import url("/core/themes/stable/css/system/components/system-status-report-general-info.css?osxmg2");
@import url("/core/themes/stable/css/system/components/tabledrag.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/tablesort.module.css?osxmg2");
@import url("/core/themes/stable/css/system/components/tree-child.module.css?osxmg2");
@import url("/core/themes/stable/css/contextual/contextual.module.css?osxmg2");
@import url("/core/assets/vendor/jquery.ui/themes/base/core.css?osxmg2");
@import url("/core/assets/vendor/jquery.ui/themes/base/button.css?osxmg2");
@import url("/core/assets/vendor/jquery.ui/themes/base/resizable.css?osxmg2");
@import url("/core/assets/vendor/jquery.ui/themes/base/dialog.css?osxmg2");
@import url("/core/themes/stable/css/quickedit/quickedit.module.css?osxmg2");
@import url("/core/assets/vendor/farbtastic/farbtastic.css?osxmg2");
@import url("/core/themes/stable/css/toolbar/toolbar.module.css?osxmg2");
</style>
<style media="all">
@import url("/modules/contrib/devel/css/devel.toolbar.css?osxmg2");
</style>
<style media="screen">
@import url("/core/themes/stable/css/tour/tour.module.css?osxmg2");
</style>
<style media="all">
@import url("/core/themes/stable/css/contextual/contextual.toolbar.css?osxmg2");
@import url("/core/themes/stable/css/toolbar/toolbar.menu.css?osxmg2");
@import url("/core/themes/stable/css/contextual/contextual.theme.css?osxmg2");
@import url("/core/themes/stable/css/contextual/contextual.icons.theme.css?osxmg2");
@import url("/core/assets/vendor/jquery.ui/themes/base/theme.css?osxmg2");
@import url("/core/themes/seven/css/components/quickedit.css?osxmg2");
@import url("/core/themes/stable/css/quickedit/quickedit.theme.css?osxmg2");
@import url("/core/themes/stable/css/quickedit/quickedit.icons.theme.css?osxmg2");
@import url("/core/themes/stable/css/color/color.admin.css?osxmg2");
@import url("/core/themes/stable/css/toolbar/toolbar.theme.css?osxmg2");
@import url("/core/themes/stable/css/toolbar/toolbar.icons.theme.css?osxmg2");
@import url("/core/themes/stable/css/user/user.icons.admin.css?osxmg2");
@import url("/core/themes/stable/css/shortcut/shortcut.theme.css?osxmg2");
@import url("/core/themes/stable/css/shortcut/shortcut.icons.theme.css?osxmg2");
@import url("/modules/contrib/commerce/css/commerce.icons.css?osxmg2");

@import url("/modules/contrib/mymodule/override.css?osxmg2");

</style>
<style media="all">
@import url("/core/themes/bartik/css/base/elements.css?osxmg2");
@import url("/core/themes/bartik/css/layout.css?osxmg2");
@import url("/core/themes/classy/css/components/progress.css?osxmg2");
@import url("/core/themes/classy/css/components/dialog.css?osxmg2");
@import url("/core/themes/classy/css/components/action-links.css?osxmg2");
@import url("/core/themes/classy/css/components/breadcrumb.css?osxmg2");
@import url("/core/themes/classy/css/components/button.css?osxmg2");
@import url("/core/themes/classy/css/components/collapse-processed.css?osxmg2");
@import url("/core/themes/classy/css/components/container-inline.css?osxmg2");
@import url("/core/themes/classy/css/components/details.css?osxmg2");
@import url("/core/themes/classy/css/components/exposed-filters.css?osxmg2");
@import url("/core/themes/classy/css/components/field.css?osxmg2");
@import url("/core/themes/classy/css/components/form.css?osxmg2");
@import url("/core/themes/classy/css/components/icons.css?osxmg2");
@import url("/core/themes/classy/css/components/inline-form.css?osxmg2");
@import url("/core/themes/classy/css/components/item-list.css?osxmg2");
@import url("/core/themes/classy/css/components/link.css?osxmg2");
@import url("/core/themes/classy/css/components/links.css?osxmg2");
@import url("/core/themes/classy/css/components/menu.css?osxmg2");
@import url("/core/themes/classy/css/components/more-link.css?osxmg2");
@import url("/core/themes/classy/css/components/pager.css?osxmg2");
@import url("/core/themes/classy/css/components/tabledrag.css?osxmg2");
@import url("/core/themes/classy/css/components/tableselect.css?osxmg2");
@import url("/core/themes/classy/css/components/tablesort.css?osxmg2");
@import url("/core/themes/classy/css/components/tabs.css?osxmg2");
@import url("/core/themes/classy/css/components/textarea.css?osxmg2");
@import url("/core/themes/classy/css/components/ui-dialog.css?osxmg2");
@import url("/core/themes/classy/css/components/file.css?osxmg2");
@import url("/core/themes/classy/css/components/messages.css?osxmg2");
@import url("/core/themes/bartik/css/components/block.css?osxmg2");
@import url("/core/themes/bartik/css/components/book.css?osxmg2");
</style>
<style media="all">
@import url("/core/themes/bartik/css/components/breadcrumb.css?osxmg2");
@import url("/core/themes/bartik/css/components/captions.css?osxmg2");
@import url("/core/themes/bartik/css/components/comments.css?osxmg2");
@import url("/core/themes/bartik/css/components/contextual.css?osxmg2");
@import url("/core/themes/bartik/css/components/demo-block.css?osxmg2");
@import url("/core/themes/bartik/css/components/dropbutton.component.css?osxmg2");
@import url("/core/themes/bartik/css/components/featured-top.css?osxmg2");
@import url("/core/themes/bartik/css/components/feed-icon.css?osxmg2");
@import url("/core/themes/bartik/css/components/field.css?osxmg2");
@import url("/core/themes/bartik/css/components/form.css?osxmg2");
@import url("/core/themes/bartik/css/components/forum.css?osxmg2");
@import url("/core/themes/bartik/css/components/header.css?osxmg2");
@import url("/core/themes/bartik/css/components/help.css?osxmg2");
@import url("/core/themes/bartik/css/components/highlighted.css?osxmg2");
@import url("/core/themes/bartik/css/components/item-list.css?osxmg2");
@import url("/core/themes/bartik/css/components/list-group.css?osxmg2");
@import url("/core/themes/bartik/css/components/list.css?osxmg2");
@import url("/core/themes/bartik/css/components/main-content.css?osxmg2");
@import url("/core/themes/bartik/css/components/menu.css?osxmg2");
@import url("/core/themes/bartik/css/components/node.css?osxmg2");
@import url("/core/themes/bartik/css/components/node-preview.css?osxmg2");
@import url("/core/themes/bartik/css/components/page-title.css?osxmg2");
@import url("/core/themes/bartik/css/components/pager.css?osxmg2");
@import url("/core/themes/bartik/css/components/panel.css?osxmg2");
@import url("/core/themes/bartik/css/components/primary-menu.css?osxmg2");
@import url("/core/themes/bartik/css/components/search-form.css?osxmg2");
@import url("/core/themes/bartik/css/components/search-results.css?osxmg2");
@import url("/core/themes/bartik/css/components/secondary-menu.css?osxmg2");
@import url("/core/themes/bartik/css/components/shortcut.css?osxmg2");
@import url("/core/themes/bartik/css/components/skip-link.css?osxmg2");
@import url("/core/themes/bartik/css/components/sidebar.css?osxmg2");
</style>
<style media="all">
@import url("/core/themes/bartik/css/components/site-branding.css?osxmg2");
@import url("/core/themes/bartik/css/components/site-footer.css?osxmg2");
@import url("/core/themes/bartik/css/components/table.css?osxmg2");
@import url("/core/themes/bartik/css/components/tablesort-indicator.css?osxmg2");
@import url("/core/themes/bartik/css/components/tabs.css?osxmg2");
@import url("/core/themes/bartik/css/components/text-formatted.css?osxmg2");
@import url("/core/themes/bartik/css/components/toolbar.css?osxmg2");
@import url("/core/themes/bartik/css/components/featured-bottom.css?osxmg2");
@import url("/core/themes/bartik/css/components/password-suggestions.css?osxmg2");
@import url("/core/themes/bartik/css/components/ui.widget.css?osxmg2");
@import url("/core/themes/bartik/css/components/vertical-tabs.component.css?osxmg2");
@import url("/core/themes/bartik/css/components/views.css?osxmg2");
@import url("/core/themes/bartik/css/components/buttons.css?osxmg2");
@import url("/core/themes/bartik/css/components/image-button.css?osxmg2");
@import url("/core/themes/bartik/css/components/ui-dialog.css?osxmg2");
</style>
<link rel="stylesheet" href="/core/themes/bartik/css/components/messages.css?osxmg2" media="all" />
<style media="all">
@import url("/core/themes/bartik/css/colors.css?osxmg2");
</style>
<style media="print">
@import url("/core/themes/bartik/css/print.css?osxmg2");
</style>
<style media="all">
@import url("/core/themes/bartik/color/preview.css?osxmg2");
</style>
2

After some looking around, I came across hook_css_alter(). To "Alter CSS files before they are output on the page."

That was not very clear, until I discovered what it did in outside_in_css_alter():

function outside_in_css_alter(&$css, AttachedAssetsInterface $assets) {
  // @todo Remove once conditional ordering is introduced in
  //   https://www.drupal.org/node/1945262.
  $path = drupal_get_path('module', 'outside_in') . '/css/outside_in.theme.css';
  if (isset($css[$path])) {
    // Use 200 to come after CSS_AGGREGATE_THEME.
    $css[$path]['group'] = 200;
  }
}

It appears that Drupal performs some shuffling magic during aggregation, where the aggregated CSS files are grouped in CSS_AGGREGATE_DEFAULT and CSS_AGGREGATE_THEME, having the respective weights of 0 and 100.

By moving my CSS file to a group with a higher weight like above, I was able to load my CSS file after the theme files.

This is being covered (any maybe replaced in the future) in this issue: Replace custom weights with dependencies in library declarations; introduce "before" and "after" for conditional ordering.

0

For JS, Drupal allows you to define dependencies on libraries. Drupal will make the decision as to when your library loads, ensuring all its dependencies are loaded first so your script will work.

For CSS, Drupal defines weights depending on what kind of styles your CSS contains. Base styles come in early and theme styles coming in late.

You do not need to ensure your library loads last. Just define dependencies and weights, and Drupal will ensure it loads in the correct order.

See this page for details.

  • I will try to add dependencies later today. But I was under the impression that libraries with a very high weight within the theme group (highest weight) should be included last. Thinking of it, it makes sense to included all depending libraries after all other ones. – Neograph734 Jul 11 '17 at 15:55
  • I had accepted a bit too early. Dependencies for CSS do not seem to work. – Neograph734 Jul 12 '17 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.