[BUGFIX] Render rules in line and column number order

Fixes #1052.

Author: JakeQZ

CHANGELOG.md

@@ -54,6 +54,7 @@ Please also have a look at our
 
 ### Fixed
 
+- Render rules in line and column number order (#1058)
 - Don't render `rgb` colors with percentage values using hex notation (#803)
 - Parse `@font-face` `src` property as comma-delimited list (#790)
 

src/RuleSet/RuleSet.php

@@ -277,22 +277,20 @@ protected function renderRules(OutputFormat $outputFormat)
         $result = '';
         $isFirst = true;
         $nextLevelFormat = $outputFormat->nextLevel();
-        foreach ($this->rules as $rules) {
-            foreach ($rules as $rule) {
-                $renderedRule = $nextLevelFormat->safely(static function () use ($rule, $nextLevelFormat): string {
-                    return $rule->render($nextLevelFormat);
-                });
-                if ($renderedRule === null) {
-                    continue;
-                }
-                if ($isFirst) {
-                    $isFirst = false;
-                    $result .= $nextLevelFormat->spaceBeforeRules();
-                } else {
-                    $result .= $nextLevelFormat->spaceBetweenRules();
-                }
-                $result .= $renderedRule;
+        foreach ($this->getRules() as $rule) {
+            $renderedRule = $nextLevelFormat->safely(static function () use ($rule, $nextLevelFormat): string {
+                return $rule->render($nextLevelFormat);
+            });
+            if ($renderedRule === null) {
+                continue;
+            }
+            if ($isFirst) {
+                $isFirst = false;
+                $result .= $nextLevelFormat->spaceBeforeRules();
+            } else {
+                $result .= $nextLevelFormat->spaceBetweenRules();
             }
+            $result .= $renderedRule;
         }
 
         if (!$isFirst) {

tests/Unit/RuleSet/DeclarationBlockTest.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Sabberworm\CSS\Tests\Unit\RuleSet;
+
+use PHPUnit\Framework\TestCase;
+use Sabberworm\CSS\Parsing\ParserState;
+use Sabberworm\CSS\RuleSet\DeclarationBlock;
+use Sabberworm\CSS\OutputFormat;
+use Sabberworm\CSS\Settings;
+
+/**
+ * @covers \Sabberworm\CSS\RuleSet\DeclarationBlock
+ */
+final class DeclarationBlockTest extends TestCase
+{
+    /**
+     * @test
+     */
+    public function rendersRulesInOrderProvided(): void
+    {
+        $css = '
+            .test {
+                background-color:transparent;
+                background:#222;
+                background-color:#fff;
+            }';
+        $expectedRendering = 'background-color: transparent;background: #222;background-color: #fff;';
+
+        $declarationBlock = DeclarationBlock::parse(new ParserState($css, Settings::create()));
+
+        self::assertStringContainsString($expectedRendering, $declarationBlock->render(new OutputFormat()));
+    }
+}