From 49a07f28bfec159f805f34eccb1521b3b98f5e9a Mon Sep 17 00:00:00 2001 From: 8ctopus Date: Thu, 25 Dec 2025 09:48:06 +0400 Subject: [PATCH 1/7] [FEATURE] Convert legacy color notation to modern css 4 notation --- src/Value/Color.php | 5 ++++- tests/ParserTest.php | 10 +++++----- tests/Unit/Value/ColorTest.php | 14 +++++++------- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/Value/Color.php b/src/Value/Color.php index 63bccab8b..34aaf207b 100644 --- a/src/Value/Color.php +++ b/src/Value/Color.php @@ -324,7 +324,10 @@ private function shouldRenderInModernSyntax(): bool foreach ($this->components 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`. + if ($value->getUnit() === '%' || is_float($value->getSize())) { + $hasPercentage = true; + } + break; } if (!($value instanceof Size)) { diff --git a/tests/ParserTest.php b/tests/ParserTest.php index 97e0d09b5..53da7cde9 100644 --- a/tests/ParserTest.php +++ b/tests/ParserTest.php @@ -155,7 +155,7 @@ public function colorParsing(): void self::assertSame('red', $colorValue); } self::assertSame( - '#mine {color: red;border-color: #0a64e6;border-color: rgba(10,100,231,.3);outline-color: #222;' + '#mine {color: red;border-color: #0a64e6;border-color: rgba(10 100 231/.3);outline-color: #222;' . "background-color: #232323;}\n" . "#yours {background-color: hsl(220,10%,220%);background-color: hsla(220,10%,220%,.3);}\n" . '#variables {background-color: rgb(var(--some-rgb));background-color: rgb(var(--r),var(--g),var(--b));' @@ -310,7 +310,7 @@ public function manipulation(): void self::assertSame( '#header {margin: 10px 2em 1cm 2%;font-family: Verdana,Helvetica,"Gill Sans",sans-serif;' . 'font-size: 10px;color: red !important;background-color: green;' - . 'background-color: rgba(0,128,0,.7);frequency: 30Hz;transform: rotate(1turn);} + . 'background-color: rgba(0 128 0/.7);frequency: 30Hz;transform: rotate(1turn);} body {color: green;font: 75% "Lucida Grande","Trebuchet MS",Verdana,sans-serif;}', $document->render() ); @@ -319,7 +319,7 @@ public function manipulation(): void } self::assertSame( '#header {margin: 10px 2em 1cm 2%;color: red !important;background-color: green;' - . 'background-color: rgba(0,128,0,.7);frequency: 30Hz;transform: rotate(1turn);} + . 'background-color: rgba(0 128 0/.7);frequency: 30Hz;transform: rotate(1turn);} body {color: green;}', $document->render() ); @@ -559,8 +559,8 @@ public function urlInFile(): void public function hexAlphaInFile(): void { $document = self::parsedStructureForFile('hex-alpha', Settings::create()->withMultibyteSupport(true)); - $expected = 'div {background: rgba(17,34,51,.27);} -div {background: rgba(17,34,51,.27);}'; + $expected = 'div {background: rgba(17 34 51/.27);} +div {background: rgba(17 34 51/.27);}'; self::assertSame($expected, $document->render()); } diff --git a/tests/Unit/Value/ColorTest.php b/tests/Unit/Value/ColorTest.php index aaa257553..41a5edc81 100644 --- a/tests/Unit/Value/ColorTest.php +++ b/tests/Unit/Value/ColorTest.php @@ -41,11 +41,11 @@ public static function provideValidColorAndExpectedRendering(): array ], '4-digit hex color (with alpha)' => [ '#0707', - 'rgba(0,119,0,.47)', + 'rgba(0 119 0/.47)', ], '8-digit hex color (with alpha)' => [ '#0077007F', - 'rgba(0,119,0,.5)', + 'rgba(0 119 0/.5)', ], 'legacy rgb that can be represented as 3-digit hex' => [ 'rgb(0, 119, 0)', @@ -61,11 +61,11 @@ public static function provideValidColorAndExpectedRendering(): array ], 'legacy rgba with fractional alpha' => [ 'rgba(0, 119, 0, 0.5)', - 'rgba(0,119,0,.5)', + 'rgba(0 119 0/.5)', ], 'legacy rgba with percentage alpha' => [ 'rgba(0, 119, 0, 50%)', - 'rgba(0,119,0,50%)', + 'rgba(0 119 0/50%)', ], 'legacy rgba with percentage components and fractional alpha' => [ 'rgba(0%, 60%, 0%, 0.5)', @@ -81,7 +81,7 @@ public static function provideValidColorAndExpectedRendering(): array ], 'legacy rgba as rgb' => [ 'rgb(0, 119, 0, 0.5)', - 'rgba(0,119,0,.5)', + 'rgba(0 119 0/.5)', ], 'modern rgb' => [ 'rgb(0 119 0)', @@ -129,11 +129,11 @@ public static function provideValidColorAndExpectedRendering(): array ], 'modern rgba with fractional alpha' => [ 'rgb(0 119 0 / 0.5)', - 'rgba(0,119,0,.5)', + 'rgba(0 119 0/.5)', ], 'modern rgba with percentage alpha' => [ 'rgb(0 119 0 / 50%)', - 'rgba(0,119,0,50%)', + 'rgba(0 119 0/50%)', ], 'modern rgba with percentage R' => [ 'rgb(0% 119 0 / 0.5)', From ce24ecd2b4bb5d26dfcc0dc0c71b17acf94ef0e2 Mon Sep 17 00:00:00 2001 From: 8ctopus Date: Fri, 26 Dec 2025 11:23:54 +0400 Subject: [PATCH 2/7] [CLEANUP] use \ prefix when calling a global function --- src/Value/Color.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Value/Color.php b/src/Value/Color.php index 34aaf207b..d3453bdd4 100644 --- a/src/Value/Color.php +++ b/src/Value/Color.php @@ -324,7 +324,7 @@ private function shouldRenderInModernSyntax(): bool foreach ($this->components as $key => $value) { if ($key === 'a') { // Alpha can have units that don't match those of the RGB components in the "legacy" syntax. - if ($value->getUnit() === '%' || is_float($value->getSize())) { + if ($value->getUnit() === '%' || \is_float($value->getSize())) { $hasPercentage = true; } From 6d76408873a0e0b5f69e76d94cc02d00d86726af Mon Sep 17 00:00:00 2001 From: 8ctopus Date: Wed, 7 Jan 2026 10:04:17 +0400 Subject: [PATCH 3/7] Revert "[FEATURE] Convert legacy color notation to modern css 4 notation" This reverts commit 49a07f28bfec159f805f34eccb1521b3b98f5e9a. --- src/Value/Color.php | 5 +---- tests/ParserTest.php | 10 +++++----- tests/Unit/Value/ColorTest.php | 14 +++++++------- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/Value/Color.php b/src/Value/Color.php index d3453bdd4..63bccab8b 100644 --- a/src/Value/Color.php +++ b/src/Value/Color.php @@ -324,10 +324,7 @@ private function shouldRenderInModernSyntax(): bool foreach ($this->components as $key => $value) { if ($key === 'a') { // Alpha can have units that don't match those of the RGB components in the "legacy" syntax. - if ($value->getUnit() === '%' || \is_float($value->getSize())) { - $hasPercentage = true; - } - + // So it is not necessary to check it. It's also always last, hence `break` rather than `continue`. break; } if (!($value instanceof Size)) { diff --git a/tests/ParserTest.php b/tests/ParserTest.php index 53da7cde9..97e0d09b5 100644 --- a/tests/ParserTest.php +++ b/tests/ParserTest.php @@ -155,7 +155,7 @@ public function colorParsing(): void self::assertSame('red', $colorValue); } self::assertSame( - '#mine {color: red;border-color: #0a64e6;border-color: rgba(10 100 231/.3);outline-color: #222;' + '#mine {color: red;border-color: #0a64e6;border-color: rgba(10,100,231,.3);outline-color: #222;' . "background-color: #232323;}\n" . "#yours {background-color: hsl(220,10%,220%);background-color: hsla(220,10%,220%,.3);}\n" . '#variables {background-color: rgb(var(--some-rgb));background-color: rgb(var(--r),var(--g),var(--b));' @@ -310,7 +310,7 @@ public function manipulation(): void self::assertSame( '#header {margin: 10px 2em 1cm 2%;font-family: Verdana,Helvetica,"Gill Sans",sans-serif;' . 'font-size: 10px;color: red !important;background-color: green;' - . 'background-color: rgba(0 128 0/.7);frequency: 30Hz;transform: rotate(1turn);} + . 'background-color: rgba(0,128,0,.7);frequency: 30Hz;transform: rotate(1turn);} body {color: green;font: 75% "Lucida Grande","Trebuchet MS",Verdana,sans-serif;}', $document->render() ); @@ -319,7 +319,7 @@ public function manipulation(): void } self::assertSame( '#header {margin: 10px 2em 1cm 2%;color: red !important;background-color: green;' - . 'background-color: rgba(0 128 0/.7);frequency: 30Hz;transform: rotate(1turn);} + . 'background-color: rgba(0,128,0,.7);frequency: 30Hz;transform: rotate(1turn);} body {color: green;}', $document->render() ); @@ -559,8 +559,8 @@ public function urlInFile(): void public function hexAlphaInFile(): void { $document = self::parsedStructureForFile('hex-alpha', Settings::create()->withMultibyteSupport(true)); - $expected = 'div {background: rgba(17 34 51/.27);} -div {background: rgba(17 34 51/.27);}'; + $expected = 'div {background: rgba(17,34,51,.27);} +div {background: rgba(17,34,51,.27);}'; self::assertSame($expected, $document->render()); } diff --git a/tests/Unit/Value/ColorTest.php b/tests/Unit/Value/ColorTest.php index 41a5edc81..aaa257553 100644 --- a/tests/Unit/Value/ColorTest.php +++ b/tests/Unit/Value/ColorTest.php @@ -41,11 +41,11 @@ public static function provideValidColorAndExpectedRendering(): array ], '4-digit hex color (with alpha)' => [ '#0707', - 'rgba(0 119 0/.47)', + 'rgba(0,119,0,.47)', ], '8-digit hex color (with alpha)' => [ '#0077007F', - 'rgba(0 119 0/.5)', + 'rgba(0,119,0,.5)', ], 'legacy rgb that can be represented as 3-digit hex' => [ 'rgb(0, 119, 0)', @@ -61,11 +61,11 @@ public static function provideValidColorAndExpectedRendering(): array ], 'legacy rgba with fractional alpha' => [ 'rgba(0, 119, 0, 0.5)', - 'rgba(0 119 0/.5)', + 'rgba(0,119,0,.5)', ], 'legacy rgba with percentage alpha' => [ 'rgba(0, 119, 0, 50%)', - 'rgba(0 119 0/50%)', + 'rgba(0,119,0,50%)', ], 'legacy rgba with percentage components and fractional alpha' => [ 'rgba(0%, 60%, 0%, 0.5)', @@ -81,7 +81,7 @@ public static function provideValidColorAndExpectedRendering(): array ], 'legacy rgba as rgb' => [ 'rgb(0, 119, 0, 0.5)', - 'rgba(0 119 0/.5)', + 'rgba(0,119,0,.5)', ], 'modern rgb' => [ 'rgb(0 119 0)', @@ -129,11 +129,11 @@ public static function provideValidColorAndExpectedRendering(): array ], 'modern rgba with fractional alpha' => [ 'rgb(0 119 0 / 0.5)', - 'rgba(0 119 0/.5)', + 'rgba(0,119,0,.5)', ], 'modern rgba with percentage alpha' => [ 'rgb(0 119 0 / 50%)', - 'rgba(0 119 0/50%)', + 'rgba(0,119,0,50%)', ], 'modern rgba with percentage R' => [ 'rgb(0% 119 0 / 0.5)', From 44fbf83d168b45538636bf75e3e67999e7db030c Mon Sep 17 00:00:00 2001 From: 8ctopus Date: Wed, 7 Jan 2026 10:09:53 +0400 Subject: [PATCH 4/7] [FEATURE] Add output format option use CSS 4 color syntax --- src/OutputFormat.php | 25 +++++++++++++++++++++++++ src/Value/Color.php | 8 ++++++-- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/OutputFormat.php b/src/OutputFormat.php index 5c493865a..52abc9e8a 100644 --- a/src/OutputFormat.php +++ b/src/OutputFormat.php @@ -20,6 +20,13 @@ final class OutputFormat */ private $usesRgbHashNotation = true; + /** + * Output RGB colors in CSS 4 notation if possible + * + * @var bool + */ + private $usesModernColorSyntax = false; + /** * Declaration format * @@ -220,6 +227,24 @@ public function setRGBHashNotation(bool $usesRgbHashNotation): self return $this; } + /** + * @internal + */ + public function usesModernColorSyntax(): bool + { + return $this->usesModernColorSyntax; + } + + /** + * @return $this fluent interface + */ + public function setUseModernColorSyntax(bool $usesModernColorSyntax): self + { + $this->usesModernColorSyntax = $usesModernColorSyntax; + + return $this; + } + /** * @internal */ diff --git a/src/Value/Color.php b/src/Value/Color.php index 63bccab8b..a346f1402 100644 --- a/src/Value/Color.php +++ b/src/Value/Color.php @@ -232,7 +232,7 @@ public function render(OutputFormat $outputFormat): string return $this->renderAsHex(); } - if ($this->shouldRenderInModernSyntax()) { + if ($this->shouldRenderInModernSyntax($outputFormat)) { return $this->renderInModernSyntax($outputFormat); } @@ -309,7 +309,7 @@ private function renderAsHex(): string * The same in the CSS Color Module Level 4 W3C Candidate Recommendation Draft * } (as of 13 February 2024, at time of writing). */ - private function shouldRenderInModernSyntax(): bool + private function shouldRenderInModernSyntax(OutputFormat $outputFormat): bool { if ($this->hasNoneAsComponentValue()) { return true; @@ -319,6 +319,10 @@ private function shouldRenderInModernSyntax(): bool return false; } + if ($outputFormat->usesModernColorSyntax()) { + return true; + } + $hasPercentage = false; $hasNumber = false; foreach ($this->components as $key => $value) { From 03f2d367e445447f73d6d24fd76fdbd00266b279 Mon Sep 17 00:00:00 2001 From: 8ctopus Date: Thu, 8 Jan 2026 12:07:18 +0400 Subject: [PATCH 5/7] [TASK] Implement PR requested changes --- CHANGELOG.md | 6 ++++++ src/Value/Color.php | 6 +----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d75a0e766..1ea166fcd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,12 @@ Please also have a look at our ### Documentation +## 9.2.0: + +### Added + +- Add use modern CSS color syntax option to `OutputFormat` (#1442) + ## 9.1.0: Add support for PHP 8.5 ### Added diff --git a/src/Value/Color.php b/src/Value/Color.php index a346f1402..50118242f 100644 --- a/src/Value/Color.php +++ b/src/Value/Color.php @@ -311,7 +311,7 @@ private function renderAsHex(): string */ private function shouldRenderInModernSyntax(OutputFormat $outputFormat): bool { - if ($this->hasNoneAsComponentValue()) { + if ($this->hasNoneAsComponentValue() || $outputFormat->usesModernColorSyntax()) { return true; } @@ -319,10 +319,6 @@ private function shouldRenderInModernSyntax(OutputFormat $outputFormat): bool return false; } - if ($outputFormat->usesModernColorSyntax()) { - return true; - } - $hasPercentage = false; $hasNumber = false; foreach ($this->components as $key => $value) { From b903f38ed9aaad76d82f811d5bc4418422ccb9f7 Mon Sep 17 00:00:00 2001 From: 8ctopus Date: Fri, 9 Jan 2026 11:23:17 +0400 Subject: [PATCH 6/7] [TASK] Use rgb/hsl instead of rgba/hsla when using modern CSS colors --- src/Value/Color.php | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Value/Color.php b/src/Value/Color.php index 50118242f..27d78bdb0 100644 --- a/src/Value/Color.php +++ b/src/Value/Color.php @@ -385,6 +385,12 @@ private function renderInModernSyntax(OutputFormat $outputFormat): string $arguments = $formatter->implode($separator, [$arguments, $alpha]); } - return $this->getName() . '(' . $arguments . ')'; + $name = $this->getName(); + + if ($outputFormat->usesModernColorSyntax()) { + $name = str_replace('a', '', $name); + } + + return $name . '(' . $arguments . ')'; } } From 6e61ade8b09f16def845d0f3bbf54408399f1837 Mon Sep 17 00:00:00 2001 From: 8ctopus Date: Fri, 9 Jan 2026 11:24:05 +0400 Subject: [PATCH 7/7] [TASK] Add tests for modern CSS colors --- tests/Unit/Value/ColorTest.php | 88 ++++++++++++++++++++++++++++++++-- 1 file changed, 84 insertions(+), 4 deletions(-) diff --git a/tests/Unit/Value/ColorTest.php b/tests/Unit/Value/ColorTest.php index aaa257553..b455c8901 100644 --- a/tests/Unit/Value/ColorTest.php +++ b/tests/Unit/Value/ColorTest.php @@ -30,310 +30,387 @@ public static function provideValidColorAndExpectedRendering(): array '3-digit hex color' => [ '#070', '#070', + '#070', ], '6-digit hex color that can be represented as 3-digit' => [ '#007700', '#070', + '#070', ], '6-digit hex color that cannot be represented as 3-digit' => [ '#007600', '#007600', + '#007600', ], '4-digit hex color (with alpha)' => [ '#0707', 'rgba(0,119,0,.47)', + 'rgb(0 119 0/.47)', ], '8-digit hex color (with alpha)' => [ '#0077007F', 'rgba(0,119,0,.5)', + 'rgb(0 119 0/.5)', ], 'legacy rgb that can be represented as 3-digit hex' => [ 'rgb(0, 119, 0)', '#070', + '#070', ], 'legacy rgb that cannot be represented as 3-digit hex' => [ 'rgb(0, 118, 0)', '#007600', + '#007600', ], 'legacy rgb with percentage components' => [ 'rgb(0%, 60%, 0%)', 'rgb(0%,60%,0%)', + 'rgb(0% 60% 0%)', ], 'legacy rgba with fractional alpha' => [ 'rgba(0, 119, 0, 0.5)', 'rgba(0,119,0,.5)', + 'rgb(0 119 0/.5)', ], 'legacy rgba with percentage alpha' => [ 'rgba(0, 119, 0, 50%)', 'rgba(0,119,0,50%)', + 'rgb(0 119 0/50%)', ], 'legacy rgba with percentage components and fractional alpha' => [ 'rgba(0%, 60%, 0%, 0.5)', 'rgba(0%,60%,0%,.5)', + 'rgb(0% 60% 0%/.5)', ], 'legacy rgba with percentage components and percentage alpha' => [ 'rgba(0%, 60%, 0%, 50%)', 'rgba(0%,60%,0%,50%)', + 'rgb(0% 60% 0%/50%)', ], 'legacy rgb as rgba' => [ 'rgba(0, 119, 0)', '#070', + '#070', ], 'legacy rgba as rgb' => [ 'rgb(0, 119, 0, 0.5)', 'rgba(0,119,0,.5)', + 'rgb(0 119 0/.5)', ], 'modern rgb' => [ 'rgb(0 119 0)', '#070', + '#070', ], 'modern rgb with percentage R' => [ 'rgb(0% 119 0)', 'rgb(0% 119 0)', + 'rgb(0% 119 0)', ], 'modern rgb with percentage G' => [ 'rgb(0 60% 0)', 'rgb(0 60% 0)', + 'rgb(0 60% 0)', ], 'modern rgb with percentage B' => [ 'rgb(0 119 0%)', 'rgb(0 119 0%)', + 'rgb(0 119 0%)', ], 'modern rgb with percentage R&G' => [ 'rgb(0% 60% 0)', 'rgb(0% 60% 0)', + 'rgb(0% 60% 0)', ], 'modern rgb with percentage R&B' => [ 'rgb(0% 119 0%)', 'rgb(0% 119 0%)', + 'rgb(0% 119 0%)', ], 'modern rgb with percentage G&B' => [ 'rgb(0 60% 0%)', 'rgb(0 60% 0%)', + 'rgb(0 60% 0%)', ], 'modern rgb with percentage components' => [ 'rgb(0% 60% 0%)', 'rgb(0%,60%,0%)', + 'rgb(0% 60% 0%)', ], 'modern rgb with none as red' => [ 'rgb(none 119 0)', 'rgb(none 119 0)', + 'rgb(none 119 0)', ], 'modern rgb with none as green' => [ 'rgb(0 none 0)', 'rgb(0 none 0)', + 'rgb(0 none 0)', ], 'modern rgb with none as blue' => [ 'rgb(0 119 none)', 'rgb(0 119 none)', + 'rgb(0 119 none)', ], 'modern rgba with fractional alpha' => [ 'rgb(0 119 0 / 0.5)', 'rgba(0,119,0,.5)', + 'rgb(0 119 0/.5)', ], 'modern rgba with percentage alpha' => [ - 'rgb(0 119 0 / 50%)', + 'rgb(0 119 0/50%)', 'rgba(0,119,0,50%)', + 'rgb(0 119 0/50%)', ], 'modern rgba with percentage R' => [ 'rgb(0% 119 0 / 0.5)', 'rgba(0% 119 0/.5)', + 'rgb(0% 119 0/.5)', ], 'modern rgba with percentage G' => [ 'rgb(0 60% 0 / 0.5)', 'rgba(0 60% 0/.5)', + 'rgb(0 60% 0/.5)', ], 'modern rgba with percentage B' => [ 'rgb(0 119 0% / 0.5)', 'rgba(0 119 0%/.5)', + 'rgb(0 119 0%/.5)', ], 'modern rgba with percentage RGB' => [ 'rgb(0% 60% 0% / 0.5)', 'rgba(0%,60%,0%,.5)', + 'rgb(0% 60% 0%/.5)', ], 'modern rgba with percentage components' => [ 'rgb(0% 60% 0% / 50%)', 'rgba(0%,60%,0%,50%)', + 'rgb(0% 60% 0%/50%)', ], 'modern rgba with none as alpha' => [ 'rgb(0 119 0 / none)', 'rgba(0 119 0/none)', + 'rgb(0 119 0/none)', ], 'legacy rgb with var for R' => [ 'rgb(var(--r), 119, 0)', 'rgb(var(--r),119,0)', + 'rgb(var(--r),119,0)', ], 'legacy rgb with var for G' => [ 'rgb(0, var(--g), 0)', 'rgb(0,var(--g),0)', + 'rgb(0,var(--g),0)', ], 'legacy rgb with var for B' => [ 'rgb(0, 119, var(--b))', 'rgb(0,119,var(--b))', + 'rgb(0,119,var(--b))', ], 'legacy rgb with var for RG' => [ 'rgb(var(--rg), 0)', 'rgb(var(--rg),0)', + 'rgb(var(--rg),0)', ], 'legacy rgb with var for GB' => [ 'rgb(0, var(--gb))', 'rgb(0,var(--gb))', + 'rgb(0,var(--gb))', ], 'legacy rgba with var for R' => [ 'rgba(var(--r), 119, 0, 0.5)', 'rgba(var(--r),119,0,.5)', + 'rgba(var(--r),119,0,.5)', ], 'legacy rgba with var for G' => [ 'rgba(0, var(--g), 0, 0.5)', 'rgba(0,var(--g),0,.5)', + 'rgba(0,var(--g),0,.5)', ], 'legacy rgba with var for B' => [ 'rgb(0, 119, var(--b), 0.5)', 'rgb(0,119,var(--b),.5)', + 'rgb(0,119,var(--b),.5)', ], 'legacy rgba with var for A' => [ 'rgba(0, 119, 0, var(--a))', 'rgba(0,119,0,var(--a))', + 'rgba(0,119,0,var(--a))', ], 'legacy rgba with var for RG' => [ 'rgba(var(--rg), 0, 0.5)', 'rgba(var(--rg),0,.5)', + 'rgba(var(--rg),0,.5)', ], 'legacy rgba with var for GB' => [ 'rgba(0, var(--gb), 0.5)', 'rgba(0,var(--gb),.5)', + 'rgba(0,var(--gb),.5)', ], 'legacy rgba with var for BA' => [ 'rgba(0, 119, var(--ba))', 'rgba(0,119,var(--ba))', + 'rgba(0,119,var(--ba))', ], 'legacy rgba with var for RGB' => [ 'rgba(var(--rgb), 0.5)', 'rgba(var(--rgb),.5)', + 'rgba(var(--rgb),.5)', ], 'legacy rgba with var for GBA' => [ 'rgba(0, var(--gba))', 'rgba(0,var(--gba))', + 'rgba(0,var(--gba))', ], 'modern rgb with var for R' => [ 'rgb(var(--r) 119 0)', 'rgb(var(--r),119,0)', + 'rgb(var(--r) 119 0)', ], 'modern rgb with var for G' => [ 'rgb(0 var(--g) 0)', 'rgb(0,var(--g),0)', + 'rgb(0 var(--g) 0)', ], 'modern rgb with var for B' => [ 'rgb(0 119 var(--b))', 'rgb(0,119,var(--b))', + 'rgb(0 119 var(--b))', ], 'modern rgb with var for RG' => [ 'rgb(var(--rg) 0)', 'rgb(var(--rg),0)', + 'rgb(var(--rg) 0)', ], 'modern rgb with var for GB' => [ 'rgb(0 var(--gb))', 'rgb(0,var(--gb))', + 'rgb(0 var(--gb))', ], 'modern rgba with var for R' => [ 'rgba(var(--r) 119 0 / 0.5)', 'rgba(var(--r),119,0,.5)', + 'rgb(var(--r) 119 0/.5)', ], 'modern rgba with var for G' => [ 'rgba(0 var(--g) 0 / 0.5)', 'rgba(0,var(--g),0,.5)', + 'rgb(0 var(--g) 0/.5)', ], 'modern rgba with var for B' => [ 'rgba(0 119 var(--b) / 0.5)', 'rgba(0,119,var(--b),.5)', + 'rgb(0 119 var(--b)/.5)', ], 'modern rgba with var for A' => [ 'rgba(0 119 0 / var(--a))', 'rgba(0,119,0,var(--a))', + 'rgb(0 119 0/var(--a))', ], 'modern rgba with var for RG' => [ 'rgba(var(--rg) 0 / 0.5)', 'rgba(var(--rg),0,.5)', + 'rgb(var(--rg) 0/.5)', ], 'modern rgba with var for GB' => [ 'rgba(0 var(--gb) / 0.5)', 'rgba(0,var(--gb),.5)', + 'rgb(0 var(--gb)/.5)', ], 'modern rgba with var for BA' => [ 'rgba(0 119 var(--ba))', 'rgba(0,119,var(--ba))', + 'rgb(0 119 var(--ba))', ], 'modern rgba with var for RGB' => [ 'rgba(var(--rgb) / 0.5)', 'rgba(var(--rgb),.5)', + 'rgb(var(--rgb) /.5)', ], 'modern rgba with var for GBA' => [ 'rgba(0 var(--gba))', 'rgba(0,var(--gba))', + 'rgb(0 var(--gba))', ], 'rgba with var for RGBA' => [ 'rgba(var(--rgba))', 'rgba(var(--rgba))', + 'rgb(var(--rgba))', ], 'legacy hsl' => [ 'hsl(120, 100%, 25%)', 'hsl(120,100%,25%)', + 'hsl(120 100% 25%)', ], 'legacy hsl with deg' => [ 'hsl(120deg, 100%, 25%)', 'hsl(120deg,100%,25%)', + 'hsl(120deg 100% 25%)', ], 'legacy hsl with grad' => [ 'hsl(133grad, 100%, 25%)', 'hsl(133grad,100%,25%)', + 'hsl(133grad 100% 25%)', ], 'legacy hsl with rad' => [ 'hsl(2.094rad, 100%, 25%)', 'hsl(2.094rad,100%,25%)', + 'hsl(2.094rad 100% 25%)', ], 'legacy hsl with turn' => [ 'hsl(0.333turn, 100%, 25%)', 'hsl(.333turn,100%,25%)', + 'hsl(.333turn 100% 25%)', ], 'legacy hsla with fractional alpha' => [ 'hsla(120, 100%, 25%, 0.5)', 'hsla(120,100%,25%,.5)', + 'hsl(120 100% 25%/.5)', ], 'legacy hsla with percentage alpha' => [ 'hsla(120, 100%, 25%, 50%)', 'hsla(120,100%,25%,50%)', + 'hsl(120 100% 25%/50%)', ], 'legacy hsl as hsla' => [ 'hsla(120, 100%, 25%)', 'hsl(120,100%,25%)', + 'hsl(120 100% 25%)', ], 'legacy hsla as hsl' => [ 'hsl(120, 100%, 25%, 0.5)', 'hsla(120,100%,25%,.5)', + 'hsl(120 100% 25%/.5)', ], 'modern hsl' => [ 'hsl(120 100% 25%)', 'hsl(120,100%,25%)', + 'hsl(120 100% 25%)', ], 'modern hsl with none as hue' => [ 'hsl(none 100% 25%)', 'hsl(none 100% 25%)', + 'hsl(none 100% 25%)', ], 'modern hsl with none as saturation' => [ 'hsl(120 none 25%)', 'hsl(120 none 25%)', + 'hsl(120 none 25%)', ], 'modern hsl with none as lightness' => [ 'hsl(120 100% none)', 'hsl(120 100% none)', + 'hsl(120 100% none)', ], 'modern hsla' => [ 'hsl(120 100% 25% / 0.5)', 'hsla(120,100%,25%,.5)', + 'hsl(120 100% 25%/.5)', ], 'modern hsla with none as alpha' => [ 'hsl(120 100% 25% / none)', 'hsla(120 100% 25%/none)', + 'hsl(120 100% 25%/none)', ], ]; } @@ -343,13 +420,16 @@ public static function provideValidColorAndExpectedRendering(): array * * @dataProvider provideValidColorAndExpectedRendering */ - public function parsesAndRendersValidColor(string $color, string $expectedRendering): void + public function parsesAndRendersValidColor(string $color, string $expectedRendering, string $expectedModernRendering): void { $subject = Color::parse(new ParserState($color, Settings::create())); + $outputFormat = OutputFormat::create(); + + self::assertSame($expectedRendering, $subject->render($outputFormat)); - $renderedResult = $subject->render(OutputFormat::create()); + $outputFormat->setUseModernColorSyntax(true); - self::assertSame($expectedRendering, $renderedResult); + self::assertSame($expectedModernRendering, $subject->render($outputFormat)); } /**