Skip to content

[FEATURE] Convert legacy color notation to modern css 4 notation #1442

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
8ctopus wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[FEATURE] Convert legacy color notation to modern css 4 notation #1442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
49a07f2
[FEATURE] Convert legacy color notation to modern css 4 notation
8ctopus Dec 25, 2025
ce24ecd
[CLEANUP] use \ prefix when calling a global function
8ctopus Dec 26, 2025
6d76408
Revert "[FEATURE] Convert legacy color notation to modern css 4 notat…
8ctopus Jan 7, 2026
44fbf83
[FEATURE] Add output format option use CSS 4 color syntax
8ctopus Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions src/OutputFormat.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down Expand Up @@ -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
*/
Expand Down
8 changes: 6 additions & 2 deletions src/Value/Color.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ public function render(OutputFormat $outputFormat): string
return $this->renderAsHex();
}

if ($this->shouldRenderInModernSyntax()) {
if ($this->shouldRenderInModernSyntax($outputFormat)) {
return $this->renderInModernSyntax($outputFormat);
}

Expand Down Expand Up @@ -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;
Expand All @@ -319,6 +319,10 @@ private function shouldRenderInModernSyntax(): bool
return false;
}

if ($outputFormat->usesModernColorSyntax()) {
return true;
}

Comment on lines +322 to +325
Copy link
Collaborator

@JakeQZ JakeQZ Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be the first test. The colorFunctionMayHaveMixedValueTypes() determines if the modern syntax might be needed (as some combinations of values can't be represented in the legacy syntax). But if the user has selected the modern syntax, it should always be used (the modern syntax can represent all combinations of values).

As this would be a quicker test than hasNoneAsComponentValue(), it would be more optimal having it first. It can be combined into the same if statement.

$hasPercentage = false;
$hasNumber = false;
foreach ($this->components as $key => $value) {
Expand Down