Media support for style tags results in 'split' aggregates

Problem/Motivation

Viewing the front page of a Drupal 8 install as user 1 shows the following CSS aggregates in the header:

<link rel="stylesheet" href="/sites/default/files/css/css_DImuuvc9S8V88m4n2WP6xWYIYqktcP21urgDq7ksjK8.css?o4qbcc" media="all" /><link rel="stylesheet" href="/sites/default/files/css/css_Va4zLdYXDM0x79wYfYIi_RSorpNS_xtrTcNUqq0psQA.css?o4qbcc" media="screen" /><link rel="stylesheet" href="/sites/default/files/css/css_oLoewJLPFbWKGXqNDrYRklQWJf2be7iNS1Jd8NBvq-U.css?o4qbcc" media="all" /><link rel="stylesheet" href="/sites/default/files/css/css_I_6LGVugwp0cfXQEmSjq1tukW-Bx00NnLslpHPY_-AE.css?o4qbcc" media="all" /><link rel="stylesheet" href="/sites/default/files/css/css_Z5jMg7P_bjcW9iUzujI7oaechMyxQTUqZhHJ_aYSq04.css?o4qbcc" media="all" />

The media="screen" contains only the CSS file for tour-styling, due to this:

tour-styling:
  version: VERSION
  css:
    component:
      css/tour.module.css: { media: screen }

I think when we added this support many years ago, we thought it'd add one extra file to support media="screen", however in fact it turns one aggregate into three, here's the same page just after uninstalling tour:

<link rel="stylesheet" href="/sites/default/files/css/css_UTFUA7ZqHZ9bYpguA0sYntV2HKBYzV4rGgHEhvXBPqs.css?o4scpi" media="all" /><link rel="stylesheet" href="/sites/default/files/css/css_I_6LGVugwp0cfXQEmSjq1tukW-Bx00NnLslpHPY_-AE.css?o4scpi" media="all" /><link rel="stylesheet" href="/sites/default/files/css/css_Z5jMg7P_bjcW9iUzujI7oaechMyxQTUqZhHJ_aYSq04.css?o4scpi" media="print" />

This is because we also deal with weights of assets, so if some assets in an aggregate need to go before tour, and some after, for it to be in the middle there have to be three files. And we also add weights based just on the order that files are added to the page, so that's pretty much all the time unless an asset with media screen happened to be the very last or very first one.

I've seen Drupal 7 sites with as much as 8 or 10 aggregates, due to combinations of media, conditional comments (for files weighted in-between aggregates), and header and footer. Conditional comments are very rarely used now, so can mostly leave those alone.

Proposed resolution

Consider inlining media declarations during aggregation, for anything that is not media="print".

Remaining tasks

User interface changes

API changes

Data model changes