[Forwardport] CSS load order incorrect using default_head_blocks.xml #1821

lib/internal/Magento/Framework/View/Layout/etc/head.xsd

@@ -18,6 +18,7 @@
         <xs:attribute name="sizes" type="xs:string"/>
         <xs:attribute name="target" type="xs:string"/>
         <xs:attribute name="type" type="xs:string"/>
+        <xs:attribute name="order" type="xs:integer"/>
         <xs:attribute name="src_type" type="xs:string"/>
     </xs:complexType>
 

lib/internal/Magento/Framework/View/Page/Config/Generator/Head.php

@@ -42,6 +42,7 @@ class Head implements Layout\GeneratorInterface
      */
     protected $assetProperties = [
         'ie_condition',
+        'order'
     ];
 
     /**

lib/internal/Magento/Framework/View/Page/Config/Reader/Head.php

@@ -7,6 +7,7 @@
 
 use Magento\Framework\View\Layout;
 use Magento\Framework\View\Page\Config as PageConfig;
+use Magento\Framework\View\Page\Config\Structure;
 
 /**
  * Head structure reader is intended for collecting assets, title and metadata
@@ -71,38 +72,19 @@ public function interpret(
         Layout\Element $headElement
     ) {
         $pageConfigStructure = $readerContext->getPageConfigStructure();
-        /** @var \Magento\Framework\View\Layout\Element $node */
+
+        $orderedNodes = [];
+
         foreach ($headElement as $node) {
-            switch ($node->getName()) {
-                case self::HEAD_CSS:
-                case self::HEAD_SCRIPT:
-                case self::HEAD_LINK:
-                    $this->addContentTypeByNodeName($node);
-                    $pageConfigStructure->addAssets($node->getAttribute('src'), $this->getAttributes($node));
-                    break;
-
-                case self::HEAD_REMOVE:
-                    $pageConfigStructure->removeAssets($node->getAttribute('src'));
-                    break;
-
-                case self::HEAD_TITLE:
-                    $pageConfigStructure->setTitle(new \Magento\Framework\Phrase($node));
-                    break;
-
-                case self::HEAD_META:
-                    $this->setMetadata($pageConfigStructure, $node);
-                    break;
-
-                case self::HEAD_ATTRIBUTE:
-                    $pageConfigStructure->setElementAttribute(
-                        PageConfig::ELEMENT_TYPE_HEAD,
-                        $node->getAttribute('name'),
-                        $node->getAttribute('value')
-                    );
-                    break;
-
-                default:
-                    break;
+            $nodeOrder = $node->getAttribute('order') ?: 0;
+            $orderedNodes[$nodeOrder][] = $node;
+        }
+
+        ksort($orderedNodes);
+        foreach ($orderedNodes as $nodes) {
+            /** @var \Magento\Framework\View\Layout\Element $node */
+            foreach ($nodes as $node) {
+                $this->processNode($node, $pageConfigStructure);
             }
         }
         return $this;
@@ -140,4 +122,46 @@ private function setMetadata($pageConfigStructure, $node)
 
         $pageConfigStructure->setMetadata($metadataName, $node->getAttribute('content'));
     }
+
+    /**
+     * Process given node based on it's name.
+     *
+     * @param Layout\Element $node
+     * @param Structure $pageConfigStructure
+     * @return void
+     */
+    private function processNode(Layout\Element $node, Structure $pageConfigStructure)
+    {
+        switch ($node->getName()) {
+            case self::HEAD_CSS:
+            case self::HEAD_SCRIPT:
+            case self::HEAD_LINK:
+                $this->addContentTypeByNodeName($node);
+                $pageConfigStructure->addAssets($node->getAttribute('src'), $this->getAttributes($node));
+                break;
+
+            case self::HEAD_REMOVE:
+                $pageConfigStructure->removeAssets($node->getAttribute('src'));
+                break;
+
+            case self::HEAD_TITLE:
+                $pageConfigStructure->setTitle(new \Magento\Framework\Phrase($node));
+                break;
+
+            case self::HEAD_META:
+                $this->setMetadata($pageConfigStructure, $node);
+                break;
+
+            case self::HEAD_ATTRIBUTE:
+                $pageConfigStructure->setElementAttribute(
+                    PageConfig::ELEMENT_TYPE_HEAD,
+                    $node->getAttribute('name'),
+                    $node->getAttribute('value')
+                );
+                break;
+
+            default:
+                break;
+        }
+    }
 }

lib/internal/Magento/Framework/View/Test/Unit/Page/Config/Generator/HeadTest.php

@@ -60,6 +60,9 @@ protected function setUp()
         );
     }
 
+    /**
+     * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
+     */
     public function testProcess()
     {
         $generatorContextMock = $this->createMock(Context::class);
@@ -82,6 +85,20 @@ public function testProcess()
                 'content_type' => 'css',
                 'media' => 'all',
             ],
+            'remoteCssOrderedLast' => [
+                'src' => 'file-url-css-last',
+                'src_type' => 'url',
+                'content_type' => 'css',
+                'media' => 'all',
+                'order' => 30,
+            ],
+            'remoteCssOrderedFirst' => [
+                'src' => 'file-url-css-first',
+                'src_type' => 'url',
+                'content_type' => 'css',
+                'media' => 'all',
+                'order' => 10,
+            ],
             'remoteLink' => [
                 'src' => 'file-url-link',
                 'src_type' => 'url',
@@ -106,8 +123,14 @@ public function testProcess()
             ->with('file-url-css', 'css', ['attributes' => ['media' => 'all']]);
         $this->pageConfigMock->expects($this->at(1))
             ->method('addRemotePageAsset')
-            ->with('file-url-link', Head::VIRTUAL_CONTENT_TYPE_LINK, ['attributes' => ['media' => 'all']]);
+            ->with('file-url-css-last', 'css', ['attributes' => ['media' => 'all' ] , 'order' => 30]);
         $this->pageConfigMock->expects($this->at(2))
+            ->method('addRemotePageAsset')
+            ->with('file-url-css-first', 'css', ['attributes' => ['media' => 'all'] , 'order' => 10]);
+        $this->pageConfigMock->expects($this->at(3))
+            ->method('addRemotePageAsset')
+            ->with('file-url-link', Head::VIRTUAL_CONTENT_TYPE_LINK, ['attributes' => ['media' => 'all']]);
+        $this->pageConfigMock->expects($this->at(4))
             ->method('addRemotePageAsset')
             ->with('http://magento.dev/customcss/render/css', 'css', ['attributes' => ['media' => 'all']]);
         $this->pageConfigMock->expects($this->once())

lib/internal/Magento/Framework/View/Test/Unit/Page/Config/Reader/HeadTest.php

@@ -59,7 +59,7 @@ public function testInterpret()
 
         $structureMock->expects($this->at(4))
             ->method('addAssets')
-            ->with('path/file.css', ['src' => 'path/file.css', 'media' => 'all', 'content_type' => 'css'])
+            ->with('path/file-3.css', ['src' => 'path/file-3.css', 'media' => 'all', 'content_type' => 'css'])
             ->willReturnSelf();
 
         $structureMock->expects($this->at(5))
@@ -82,6 +82,22 @@ public function testInterpret()
             ->with(Config::ELEMENT_TYPE_HEAD, 'head_attribute_name', 'head_attribute_value')
             ->willReturnSelf();
 
+        $structureMock->expects($this->at(9))
+            ->method('addAssets')
+            ->with(
+                'path/file-1.css',
+                ['src' => 'path/file-1.css', 'media' => 'all', 'content_type' => 'css', 'order' => 10]
+            )
+            ->willReturnSelf();
+
+        $structureMock->expects($this->at(10))
+            ->method('addAssets')
+            ->with(
+                'path/file-2.css',
+                ['src' => 'path/file-2.css', 'media' => 'all', 'content_type' => 'css', 'order' => 30]
+            )
+            ->willReturnSelf();
+
         $this->assertEquals($this->model, $this->model->interpret($readerContextMock, $element->children()[0]));
     }
 }

lib/internal/Magento/Framework/View/Test/Unit/Page/Config/_files/template_head.xml

@@ -11,7 +11,9 @@
         <meta name="meta_name" content="meta_content"/>
         <meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
         <meta property="og:locale:alternate" content="uk_UA" />
-        <css src="path/file.css" media="all" />
+        <css src="path/file-1.css" order="10" media="all" />
+        <css src="path/file-2.css" order="30" media="all" />
+        <css src="path/file-3.css" media="all" />
         <script src="path/file.js" defer="defer"/>
         <link src="http://url.com" src_type="url"/>
         <remove src="path/remove/file.css"/>