2

We have a subtheme, mytheme that is based off of the classy base theme. We have set Aggregate CSS Files = true and when the pages load we end up with many aggregated CSS files.

One issue is that we don't need all the CSS for anonymous users, only authenticated users since most of them are for logged in users.

How would I only add the following CSS for only authenticated users, but not anonymous users using the mytheme.libraries.yml?

Goal:

  • We do not want to override anything in those libraries, but rather remove them all together from render based on if the user is authenticated or not.

CSS files included in local development:

<styles media="all">
@import url("/core/themes/classy/css/components/progress.css?pe4tq3");
@import url("/core/themes/classy/css/components/dialog.css?pe4tq3");
@import url("/core/themes/classy/css/components/action-links.css?pe4tq3");
@import url("/core/themes/classy/css/components/button.css?pe4tq3");
@import url("/core/themes/classy/css/components/collapse-processed.css?pe4tq3");
@import url("/core/themes/classy/css/components/container-inline.css?pe4tq3");
@import url("/core/themes/classy/css/components/details.css?pe4tq3");
@import url("/core/themes/classy/css/components/exposed-filters.css?pe4tq3");
@import url("/core/themes/classy/css/components/field.css?pe4tq3");
@import url("/core/themes/classy/css/components/form.css?pe4tq3");
@import url("/core/themes/classy/css/components/icons.css?pe4tq3");
@import url("/core/themes/classy/css/components/inline-form.css?pe4tq3");
@import url("/core/themes/classy/css/components/item-list.css?pe4tq3");
@import url("/core/themes/classy/css/components/link.css?pe4tq3");
@import url("/core/themes/classy/css/components/links.css?pe4tq3");
@import url("/core/themes/classy/css/components/more-link.css?pe4tq3");
@import url("/core/themes/classy/css/components/pager.css?pe4tq3");
@import url("/core/themes/classy/css/components/tabledrag.css?pe4tq3");
@import url("/core/themes/classy/css/components/tableselect.css?pe4tq3");
@import url("/core/themes/classy/css/components/tablesort.css?pe4tq3");
@import url("/core/themes/classy/css/components/textarea.css?pe4tq3");
@import url("/core/themes/classy/css/components/ui-dialog.css?pe4tq3");
@import url("/core/themes/classy/css/components/messages.css?pe4tq3");
</styles>

We initially thought to do the following in the mytheme.info.yml file, but that would mean we have to exclude every single CSS manually (line by line).

name: 'mytheme'
type: theme
base theme: classy
package: custom
core: 8.x
libraries:
  - mytheme/library1
stylesheets-remove:
  - core/assets/vendor/normalize-css/normalize.css
  • 1
    @leymannx i don't view this as a duplicate because i do not want to override anything. I want to selectively remove the CSS files that are loaded for anonymous users. hook_library_info_alter seemed to be close to getting us a resolution. – usernameabc Aug 29 '18 at 20:23
  • Which is exactly what the accepted answer to the duplicate question says. Override basically anything. As in unset(). You now basically accepted the same. – leymannx Aug 29 '18 at 20:24
  • 1
    Hmmm, but how would you do this conditionally then, based on the user? Which is what you asked initially ... – leymannx Aug 29 '18 at 20:50
  • @leymannx we ended up creating a separate admin theme that is based on classy where we added it conditionally, but for the custom theme we removed it using the other solution. – usernameabc Aug 29 '18 at 21:21
1

You should use hook_library_info_alter.

In which, you check is the user is logged in, or the logged in user roles, then simply unset the CSS files you don't want.

| improve this answer | |
0

Alternatively, instead of excluding select css files, you can use a progressive approach, loading stylesheets as needed. To do so:

  1. Create a second stylesheet library [suppose you call it authenticated-styles] for authenticated users in your theme.libraries.yml file that represents all the css only authenticated users should see.

  2. Then update your global theme library to only include the css for non-authenticated users.

  3. Then, you can use the hook_page_attachments_alter function to detect if the user is logged in and attach the library using:


function MYTHEME/MYMODULE_page_attachments_alter(array $attachments) {

  $userCurrent = \Drupal::currentUser();

  if ($userCurrent->isAuthenticated()) {

    $attachments['#attached']['library'][] = 'mytheme/authenticated-styles'
  }

  return $attachments;
}
| improve this answer | |
  • this still ended up including all the CSS files from my question under CSS files included in local development. We already do progressively load this for custom libraries. – usernameabc Aug 29 '18 at 20:25

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