feat(preset-uno): outline utilities

[edwardnyc]

No description provided.

[netlify]

✔️ Deploy Preview for ecstatic-mestorf-2e8afd ready!

🔨 Explore the source changes: 2c79d47

🔍 Inspect the deploy log: https://app.netlify.com/sites/ecstatic-mestorf-2e8afd/deploys/6184789f931133000778fbc3

😎 Browse the preview: https://deploy-preview-49--ecstatic-mestorf-2e8afd.netlify.app/

[sibbng]

It would be nice if we can align these utilities with Tailwind v3's upcoming outline utilities which is have very similar composition like ring utilities.

[edwardnyc]

It would be nice if we can align these utilities with Tailwind v3's upcoming outline utilities which is have very similar composition like ring utilities.

Thank you for your suggestion, but I think this practical change should depend on the overall implementation of the current library. This may be better with the upgrading of the warehouse body?

I think it's painful for users to understand different specifications. @sibbng

[sibbng]

I think it's painful for users to understand different specifications. @sibbng

If you are talking about having multiple outline utilities with similar API, there is nothing "painful" with that since both utilities are have nearly exact same API. Also I'm curious about which users are you talking about. UnoCSS currently doesn't have detailed documentation and all its users are diving into the source code to understand its capacity. Once we have documentation we can document differences between these two utilities to make it less "painful" for users:

• Ring utilities can have offset color, outline utilities can't
• Outline utilities have very sluggish animations (tested on on Chrome)

I don't even think Tailwind team will remove ring utilities. Because Tailwind team removed AOT engine on v3 and they are on the way of pushing Tailwind's capabilities to what JIT engine can do. This is just a upgrade for outline properties which was not quite ideal while living with AOT engine.

I would suggest removing outline-color handler and handle colors in colors.ts like how ring utilities do without -colors appendix:
https://github.com/antfu/unocss/blob/main/packages/preset-uno/src/rules/color.ts#L122

[antfu]

I would also prefer to have the new capability. For preset-uno, it's goal is trying to blend many different conventions together, not only tailwind and windi but probably a few others. The idea here is that, since we are on-demand, there is almost nothing to sacrifice supporting them all. It's also kinda a showcase preset to see the limitation of UnoCSS, and for those who don't care about the "strict constariant" (like me). For those who really prefer a "spec", I would recommend creating their own presets (which also give them the full control).