UnoCSS version

latest

Describe the bug

This issue is pretty critical.

First please look at this playground: Playground Link

Nowadays, hsl() and rgb() (as well as hsla() and rgba()) [or any other more?] supports both comma-separated syntax and space-separated syntax. e.g.

color: hsl(262.1 83.3% 57.8% / 0.5);
color: hsl(262.1, 83.3%, 57.8%, 0.5);

color: rgb(255 255 255 / 0.5);
color: rgb(255, 255, 255, 0.5);

Both of them are valid
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl#legacy_syntax_hsla
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#legacy_syntax_rgba

Although the comma-separated syntax has a wider browser support range, it's being marked as legacy already. And the support for space-separated syntax is good enough: https://caniuse.com/?search=hsl%20space

My use case:

Space-separated syntax is now the recommended way by MDN, hence of course, the modern ui library I'm using shadcn/ui's theme system is using the space-separated syntax. https://ui.shadcn.com/themes (Just simply click the Copy code button)

But it result in the first-case in the Playground Link above, which result in hsla(262.1 83.3% 57.8%, 1) and definitely it's not going to work.

I've had a look into the source code, currently UnoCSS defaults them to comma-separated syntax without any condition:

I wanted to give a PR at first but turns out this is a decision-making issue and may impact a lot of things.

Suggested Solution

1. ✨Tailwind now defaults rgb() and hsl() to space-separated syntax, where rgba() and hsla() remain as comma-separated syntax. This is aligned with what recommended by MDN, as e.g. The legacy hsla() syntax is an alias for hsl(), so this could be a valid solution, and I personally suggested that.
2. 👍Due to the fact they are alias to each other (although rgba() and hsla() is marked legacy, they can be used fully interchangeably with their modern version rgb() and hsl(), which means all 4 cases will work), we may provide an global option to let user choose which syntax they prefer in the project. This will be unopinionated and it does make sense to align the behaviour in a single project.
3. ❌Even better, maybe there's a chance we can dynamically look into the color format and apply proper format, but I don't think it's achievable because if css variable is used in the theme, we just simply get something like { type: 'hsl', components: [ 'var(--primary)' ], alpha: undefined } which does not have any useful information to this issue🤣

Additional

I also suggest to replace the built-in UnoCSS color system with space-separated, since MDN has marked comma-separated syntax as legacy.

Please carefully consider about this, Cheers💚

Workaround

Currently I have to change all my copied themes from shadcn/ui from --primary: 262.1 83.3% 57.8%; into --primary: 262.1, 83.3%, 57.8%; due to this issue. What a nightmare🤣. I could switch back to Tailwind but I love Uno!

Reproduction

Playground Link

System Info

No response

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.