[BUGFIX] Render rules in line and column number order (#1062)

This is the V8.x backport of #1059.

Author: oliverklee

CHANGELOG.md

@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Fixed
 
+- Render rules in line and column number order (#1059)
 - Create `Size` with correct types in `expandBackgroundShorthand` (#814)
 - Parse `@font-face` `src` property as comma-delimited list (#794)
 

src/RuleSet/RuleSet.php

@@ -287,22 +287,20 @@ protected function renderRules(OutputFormat $oOutputFormat)
         $sResult = '';
         $bIsFirst = true;
         $oNextLevel = $oOutputFormat->nextLevel();
-        foreach ($this->aRules as $aRules) {
-            foreach ($aRules as $oRule) {
-                $sRendered = $oNextLevel->safely(function () use ($oRule, $oNextLevel) {
-                    return $oRule->render($oNextLevel);
-                });
-                if ($sRendered === null) {
-                    continue;
-                }
-                if ($bIsFirst) {
-                    $bIsFirst = false;
-                    $sResult .= $oNextLevel->spaceBeforeRules();
-                } else {
-                    $sResult .= $oNextLevel->spaceBetweenRules();
-                }
-                $sResult .= $sRendered;
+        foreach ($this->getRules() as $oRule) {
+            $sRendered = $oNextLevel->safely(function () use ($oRule, $oNextLevel) {
+                return $oRule->render($oNextLevel);
+            });
+            if ($sRendered === null) {
+                continue;
+            }
+            if ($bIsFirst) {
+                $bIsFirst = false;
+                $sResult .= $oNextLevel->spaceBeforeRules();
+            } else {
+                $sResult .= $oNextLevel->spaceBetweenRules();
             }
+            $sResult .= $sRendered;
         }
 
         if (!$bIsFirst) {

tests/Functional/RuleSet/DeclarationBlockTest.php

@@ -0,0 +1,41 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Sabberworm\CSS\Tests\Functional\RuleSet;
+
+use PHPUnit\Framework\TestCase;
+use Sabberworm\CSS\OutputFormat;
+use Sabberworm\CSS\Property\Selector;
+use Sabberworm\CSS\Rule\Rule;
+use Sabberworm\CSS\RuleSet\DeclarationBlock;
+
+/**
+ * @covers \Sabberworm\CSS\RuleSet\DeclarationBlock
+ */
+final class DeclarationBlockTest extends TestCase
+{
+    /**
+     * @test
+     */
+    public function rendersRulesInOrderProvided()
+    {
+        $declarationBlock = new DeclarationBlock();
+        $declarationBlock->setSelectors([new Selector('.test')]);
+
+        $rule1 = new Rule('background-color');
+        $rule1->setValue('transparent');
+        $declarationBlock->addRule($rule1);
+
+        $rule2 = new Rule('background');
+        $rule2->setValue('#222');
+        $declarationBlock->addRule($rule2);
+
+        $rule3 = new Rule('background-color');
+        $rule3->setValue('#fff');
+        $declarationBlock->addRule($rule3);
+
+        $expectedRendering = 'background-color: transparent;background: #222;background-color: #fff';
+        self::assertContains($expectedRendering, $declarationBlock->render(new OutputFormat()));
+    }
+}