Issue #2695871 by catch, borisson_, alexpott: Aggregation creates two extra...

Issue #2695871 by catch, borisson_, alexpott: Aggregation creates two extra aggregates when it encounters {media: screen} in a library declaration

core/lib/Drupal/Core/Asset/CssCollectionGrouper.php

@@ -10,10 +10,13 @@ class CssCollectionGrouper implements AssetCollectionGrouperInterface {
   /**
    * {@inheritdoc}
    *
-   * Puts multiple items into the same group if they are groupable and if they
-   * are for the same 'media'. Items of the 'file' type are groupable if their
-   * 'preprocess' flag is TRUE, and items of the 'external' type are never
-   * groupable.
+   * Puts multiple items into the same group if they are groupable. Items of the
+   * 'file' type are groupable if their 'preprocess' flag is TRUE, and items of
+   * the 'external' type are never groupable. Items with a media type of 'print'
+   * will be put into their own group so that they are not loaded on regular
+   * page requests. Items with a media type of 'all' or 'screen' will be grouped
+   * together (with media queries where necessary), to minimize the number of
+   * separate aggregates.
    *
    * Also ensures that the process of grouping items does not change their
    * relative order. This requirement may result in multiple groups for the same
@@ -46,8 +49,10 @@ public function group(array $css_assets) {
         case 'file':
           // Group file items if their 'preprocess' flag is TRUE.
           // Help ensure maximum reuse of aggregate files by only grouping
-          // together items that share the same 'group' value.
-          $group_keys = $item['preprocess'] ? [$item['type'], $item['group'], $item['media']] : FALSE;
+          // together items that share the same 'group' value. The CSS optimizer
+          // adds inline 'media' statements for everything except 'print', so
+          // only vary groups based on that.
+          $group_keys = $item['preprocess'] ? [$item['type'], $item['group'], $item['media'] === 'print'] : FALSE;
           break;
 
         case 'external':
@@ -65,6 +70,9 @@ public function group(array $css_assets) {
         // properties are unique to the item and should not be carried over to
         // the group.
         $groups[$i] = $item;
+        if ($item['media'] !== 'print') {
+          $groups[$i]['media'] = 'all';
+        }
         unset($groups[$i]['data'], $groups[$i]['weight'], $groups[$i]['basename']);
         $groups[$i]['items'] = [];
         $current_group_keys = $group_keys ? $group_keys : NULL;

core/lib/Drupal/Core/Asset/CssOptimizer.php

@@ -80,7 +80,9 @@ public function clean($contents) {
    */
   protected function processFile($css_asset) {
     $contents = $this->loadFile($css_asset['data'], TRUE);
-
+    if ($css_asset['media'] !== 'print' && $css_asset['media'] !== 'all') {
+      $contents = '@media ' . $css_asset['media'] . '{' . $contents . '}' . "\n";
+    }
     $contents = $this->clean($contents);
 
     // Get the parent directory of this file, relative to the Drupal root.

core/tests/Drupal/Tests/Core/Asset/CssCollectionGrouperUnitTest.php

@@ -52,7 +52,7 @@ public function testGrouper() {
         'group' => -100,
         'type' => 'file',
         'weight' => 0.004,
-        'media' => 'all',
+        'media' => 'screen',
         'preprocess' => TRUE,
         'data' => 'core/misc/ui/themes/base/jquery.ui.core.css',
         'basename' => 'jquery.ui.core.css',

core/tests/Drupal/Tests/Core/Asset/CssOptimizerUnitTest.php

@@ -67,6 +67,19 @@ public function providerTestOptimize() {
         ],
         file_get_contents($absolute_path . 'css_input_without_import.css.optimized.css'),
       ],
+      [
+        [
+          'group' => -100,
+          'type' => 'file',
+          'weight' => 0.012,
+          'media' => 'screen',
+          'preprocess' => TRUE,
+          'data' => $path . 'css_input_simple.css',
+          'browsers' => ['IE' => TRUE, '!IE' => TRUE],
+          'basename' => 'css_input_simple.css',
+        ],
+        file_get_contents($absolute_path . 'css_input_simple_with_media.css.optimized.css'),
+      ],
       // File. Tests:
       // - Proper URLs in imported files. (https://www.drupal.org/node/265719)
       // - A background image with relative paths, which must be rewritten.

core/tests/Drupal/Tests/Core/Asset/css_test_files/css_input_simple.css

+body{margin:0;padding:0;background:#edf5fa;font:76%/170% Verdana,sans-serif;color:#494949;}

core/tests/Drupal/Tests/Core/Asset/css_test_files/css_input_simple_with_media.css.optimized.css

+@media screen{body{margin:0;padding:0;background:#edf5fa;font:76%/170% Verdana,sans-serif;color:#494949;}
+}