Color functional notation breaks values with mixed components

[romainmenke]

Bug description

Values in hsl can contain both numbers and percentages.

When converted to legacy syntax these must become homogenous.

See : https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyLmZvbyUyMCU3QiU1Q24lNUN0Y29sb3IlM0ElMjBoc2woMTIwZGVnJTIwMTAwJTIwMjUuMSUyNSklM0IlNUNuJTdEJTVDbiUyMiUyQyUyMmNvbmZpZyUyMiUzQSU3QiUyMmJyb3dzZXJzJTIyJTNBJTVCJTIyaWUlMjAxMCUyMiU1RCUyQyUyMm1pbmltdW1WZW5kb3JJbXBsZW1lbnRhdGlvbnMlMjIlM0EwJTJDJTIyc3RhZ2UlMjIlM0EyJTJDJTIybG9naWNhbCUyMiUzQSU3QiUyMmlubGluZURpcmVjdGlvbiUyMiUzQSUyMmxlZnQtdG8tcmlnaHQlMjIlMkMlMjJibG9ja0RpcmVjdGlvbiUyMiUzQSUyMnRvcC10by1ib3R0b20lMjIlN0QlMkMlMjJmZWF0dXJlcyUyMiUzQSU3QiUyMm5lc3RpbmctcnVsZXMlMjIlM0ElN0IlMjJub0lzUHNldWRvU2VsZWN0b3IlMjIlM0FmYWxzZSU3RCU3RCU3RCU3RA==

Source CSS

.foo {
	color: hsl(120deg 100 25.1%);
}

Expected CSS

.foo {
	color: hsl(120deg, 100%, 25.1%);
}

Actual CSS

.foo {
	color: hsl(120, 100, 25.1%);
}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

Yes

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Color Functional Notation

Plugin version

any

What OS are you experiencing this on?

No response

Node Version

any

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR