Problem/Motivation
To improve performance, especially on mobile devices I want to follow Google's suggestion to remove unused CSS styles. The architecture on the site I am working on already loads the CSS based on the components that appears on the page. The next step would be to separate the aggregations into media queries following this article from web.dev:
https://web.dev/articles/critical-rendering-path/render-blocking-css
Ultimately I would like to have something similar to the following result:
One thing I could do is to remove the aggregation and I would be able to add the files. But that completely defeats the purpose as we would lose on performance.
Proposed resolution
Group the aggregations by media query parameters that are inserted in the libraries.yml file.