[BUGFIX] Render RGB functions with "modern" syntax if required

The "legacy" syntax does not allow a mixture of `percentage`s and `number`s
for the red, green and blue components.
So if `rgb`/`rgba` functions that have such a mixture are rendered in the
"legacy" syntax, an invalid property value will result.

An `OutputFormat` option to use the "modern" syntax throughout will be added
later (see #801).

Author: JakeQZ

CHANGELOG.md

@@ -13,6 +13,7 @@ Please also have a look at our
 - Partial support for CSS Color Module Level 4:
     - `rgb` and `rgba`, and `hsl` and `hsla` are now aliases (#797}
     - Parse color functions that use the "modern" syntax (#800)
+    - Render RGB functions with "modern" syntax when required (#840)
 - Add a class diagram to the README (#482)
 - Add more tests (#449)
 

src/Value/Color.php

@@ -231,6 +231,8 @@ public function render(OutputFormat $outputFormat): string
             && $this->allComponentsAreNumbers()
         ) {
             return $this->renderAsHex();
+        } elseif ($this->shouldRenderInModernSyntax()) {
+            return $this->renderInModernSyntax($outputFormat);
         }
 
         return parent::render($outputFormat);
@@ -282,4 +284,66 @@ private function renderAsHex(): string
 
         return '#' . ($canUseShortVariant ? $result[0] . $result[2] . $result[4] : $result);
     }
+
+    /**
+     * The "legacy" syntax does not allow RGB colors to have a mixture of `percentage`s and `number`s.
+     */
+    private function shouldRenderInModernSyntax(): bool
+    {
+        $function = $this->getRealName();
+        if ($function !== 'rgb' && $function !== 'rgba') {
+            return false;
+        }
+
+        $hasPercentage = false;
+        $hasNumber = false;
+        foreach ($this->aComponents as $key => $value) {
+            if ($key === 'a') {
+                // ALpha can have units that don't match those of the RGB components in the "legacy" syntax.
+                // So it is not necessary to check it.  It's also always last, hence `break` rather than `continue`.
+                break;
+            }
+            if (!$value instanceof Size) {
+                // Unexpected, unknown, or modified via the API
+                return false;
+            }
+            $unit = $value->getUnit();
+            // `switch` only does loose comparison
+            if ($unit === null) {
+                $hasNumber = true;
+            } elseif ($unit === '%') {
+                $hasPercentage = true;
+            } else {
+                // Invalid unit
+                return false;
+            }
+        }
+
+        return $hasPercentage && $hasNumber;
+    }
+
+    /**
+     * @return non-empty-string
+     */
+    private function renderInModernSyntax(OutputFormat $outputFormat): string
+    {
+        \end($this->aComponents);
+        if (\key($this->aComponents) === 'a') {
+            $alpha = $this->aComponents['a'];
+            $componentsWithoutAlpha = \array_diff_key($this->aComponents, ['a' => 0]);
+        } else {
+            $componentsWithoutAlpha = $this->aComponents;
+        }
+
+        $arguments = $outputFormat->implode(' ', $componentsWithoutAlpha);
+        if (isset($alpha)) {
+            $arguments = $outputFormat->implode(
+                $outputFormat->spaceBeforeListArgumentSeparator('/') . '/'
+                    . $outputFormat->spaceAfterListArgumentSeparator('/'),
+                [$arguments, $alpha]
+            );
+        }
+
+        return $this->getName() . '(' . $arguments . ')';
+    }
 }

tests/Unit/Value/ColorTest.php

@@ -86,8 +86,6 @@ public static function provideValidColorAndExpectedRendering(): array
                 'rgb(0 119 0)',
                 '#070',
             ],
-            // The "legacy" syntax currently used for rendering does not allow a mixture of percentages and numbers.
-            /*
             'modern rgb with percentage R' => [
                 'rgb(0% 119 0)',
                 'rgb(0% 119 0)',
@@ -112,7 +110,6 @@ public static function provideValidColorAndExpectedRendering(): array
                 'rgb(0 60% 0%)',
                 'rgb(0 60% 0%)',
             ],
-            //*/
             'modern rgb with percentage components' => [
                 'rgb(0% 60% 0%)',
                 'rgb(0%,60%,0%)',
@@ -131,7 +128,6 @@ public static function provideValidColorAndExpectedRendering(): array
                 'rgb(0 119 0 / 50%)',
                 'rgba(0,119,0,50%)',
             ],
-            /*
             'modern rgba with percentage R' => [
                 'rgb(0% 119 0 / 0.5)',
                 'rgba(0% 119 0/.5)',
@@ -144,7 +140,6 @@ public static function provideValidColorAndExpectedRendering(): array
                 'rgb(0 119 0% / 0.5)',
                 'rgba(0 119 0%/.5)',
             ],
-            //*/
             'modern rgba with percentage RGB' => [
                 'rgb(0% 60% 0% / 0.5)',
                 'rgba(0%,60%,0%,.5)',