How to exclude a specific css file from aggregation

I've been working on a problem where a font and image tag aren't appearing on the front end of my website. I found that if I disable CSS aggregation, the YouTube play button symbol and overlay will appear. However, this slows down the page speed.

How to leverage CSS aggregation but set specific files to be excluded?

I'm wondering how to leverage CSS aggregation but exclude specific files. Here's an example of what my theme libraries file looks like:

global-styling:
  version: 1.x
  header: true
  css:
    base:
      assets/dist/css/tailwind.css: {}
      assets/dist/css/style.css: {}
      assets/dist/css/responsive.css: {}
    theme:
      assets/dist/css/editor.css: {}
      assets/dist/css/layout.css: {}
      assets/dist/css/navigation.css: {}
      assets/dist/css/headers.css: {}
      assets/dist/css/button-link.css: {}
      assets/dist/css/misc.css: {}
      assets/dist/css/homepage.css: {}
      assets/dist/css/forms.css: {}
      assets/dist/css/vendors.css: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/jquery.once
    - core/drupal.ajax
    - core/views.ajax

To exclude a CSS file, you need to add { preprocess: false } against the relevant file.  To exclude misc.css file it will look as follows:

global-styling:
  version: 1.x
  header: true
  css:
    base:
      assets/dist/css/tailwind.css: {}
      assets/dist/css/style.css: {}
      assets/dist/css/responsive.css: {}
    theme:
      assets/dist/css/editor.css: {}
      assets/dist/css/layout.css: {}
      assets/dist/css/navigation.css: {}
      assets/dist/css/headers.css: {}
      assets/dist/css/button-link.css: {}
      assets/dist/css/misc.css: { preprocess: false }
      assets/dist/css/homepage.css: {}
      assets/dist/css/forms.css: {}
      assets/dist/css/vendors.css: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/jquery.once
    - core/drupal.ajax
    - core/views.ajax