What is the correct way to exclude certain CSS files for anonymous, but include for authenticated users? 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:

&lt;styles media="all"&gt;
@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");
&lt;/styles&gt;


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
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.