Gradient end color becomes transparent

[shamokit]

UnoCSS version

0.51.5

Describe the bug

When using a gradient class for the class attribute, the color at the end of the gradient becomes transparent.

Since the second argument of colorToString in the bgGradientToValue function is 0, to-{toColor} of bg-gradient-to-r from-{startColor} via-{viaColor} to-{toColor} will be displayed transparently.

Reproduction

NG(with class attributes)

https://uno.antfu.me/play/?html=DwEwlgbgBAFgtAMwK4BsVQC4FMAeG4DGWAdtgE5QIq5QDOW1B%2BxA9sVlAIZoBcGZnYrTAYwbOABYADFIB8AKChRQkKAFtOCpUpXQqNAFZJaohAE9CJclu07w0AO5wATFNgu3AIwDmcbwPArOAwWOAoEMhY1OFoAawsIqKgIME4Y%2BLgUzkxQuIsQ2WAAensbW10oAhROWloAXgAiJ1d3Fp8-ALAgkLDKSOi8xH7k1PSLLJyx4JYGwpLIMuV5iBti0vk1haA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcESgF84WKBBBwA5FxUS6dPUiQYAHpFjpsAQy4AbeJhz4iJYKQAUyVHQAFtAwEjx0AFyIVKh6YXQwOgC0QSFhMHpRejBWMElOpHA5lnnQ9rikGHDBAG4YUBHFeTn2TmaoarIiCpFwANoxcqJKKj4AlLLC8owsbJw8fPzjsgC6sjCBGCAYUf6ocFJO0L3IAJDnp3QA1vy7SBfnWjpZAMQALBj2EhIYepQPpxqwHsrwA7FgOABmNAADj%2B9weiVeHBRoLQACYzA9OoM1FQ8WoxkggA&css=Q&options=N4IgLgTghgdgzgMwPYQLYgFwKgGzgUwF8g

OK(no class attributes)

https://uno.antfu.me/play/?html=DwEwlgbgBAFgtAMwK4BsVQC4FMAeG4DGWAdtgE5QIq5QDOW1B%2BxA9sVlAIZoBcGZnYrTAYwbOABYADFIB8AKChRQkKAFtOCpUpXQqNAFZJaohAE9CJclu07w0AO5wATFNgu3AIwDmcbwPArOAwWOAoEMhY1OFoAawsIqKgIME4Y%2BLgUzkxQuIsQ2WAAensbW10oJ1d3ap8-ALAgkLDKSOi8xDbk1PSLLJze4JZCksgy5VGIG2LS%2BRmxoA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcESgF84WKBBBwA5FxUS6dPUiQYAHpFjpsAQy4AbeJhz4iJYKQAUyVHQAFtAwEjx0AFyIVKh6YXQwOgC0QSFhMHpRejBWMElOpHA5lnnQ9rikGHDBAG4YUBHFeTn2TmaoarIiCpFwANoxcqJKKj4AlLLC8owsbJw8fPzjsgC6sjCBGCAYUf6ocFJO0L3IAJDnp3QA1vy7SBfnWjpZAMQALBj2EhIYepQPpxqwHsrwA7FgOABmNAADj%2B9weiVeHBRoLQACYzA9OoM1FQ8WoxkggA&css=Q&options=N4IgLgTghgdgzgMwPYQLYgFwKgGzgUwF8g

System Info

• macOS 13.3.1（22E261）
• Google Chrome 112.0.5615.121

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.

[antfu]

Would you mind sending a PR to fix it? Thanks!

[sibbng]

@antfu The source of the problem is these two lines:

unocss/packages/core/src/generator/index.ts

Lines 222 to 223 in 063f427

	|| a[1]?.localeCompare(b[1] || '') // selector
	|| a[2]?.localeCompare(b[2] || '') // body

They ruin a lot of things already. I'm going to nuke all localeCompares in #1973, but it's not ready yet and needs more testing.

As a quick fix, we can separate the following rule into 3 rules to fix this issue.

unocss/packages/preset-wind/src/rules/background.ts

Line 87 in 063f427

[/^(?:bg-gradient-)?(from|via|to)-(.+)$/, bgGradientColorResolver()],

/cc @chu121su12 I wanted to mention you in this conversation since most of these lines are written by you. Maybe you could come up with a better solution.

[antfu]

Yeah I think we should separate the rules of the order matters to them.

[shamokit]

This is my first time making a pull request, so I apologize if there are any mistakes.

Please check.
#2525