Add official support for unocss

[Rednas83]

Is there also official unocss support?

It works very similar to tailwind but is much more performant

[piscis]

I'm sitting in the same boat using unocss + uno's class compiler to build web components that can integrate into different sites.

First I tried to use the new formkit.theme.ts together with unocss but I noticed that a couple of styles are not working AND you have to use the unocss css reset to get it kinda working.

Then I discovered that there is a @formkit/themes/tailwindcss package using this together with unocss and it works yet it is not as complete and complex as the output you get from the theme editor.

What I would really like to see is a output of formkit.theme.ts that is compatible with unocss and that I can just take and include it with unocss instead of writing all of the classes by my self.

here is a repository where I tried to use unocss with the formkit.theme.ts output: https://github.com/piscis/formkit-theme-test

[andrew-boyd]

The current themes at themes.formkit.com were not written with UnoCSS in mind. As I am not a user of UnoCSS myself i'll need to take a closer look and see if there's a way for us to adjust the theme classes to be compatible. What we cannot do is break the TW versions of the themes though — as that is far and away the largest segment of users.

[andrew-boyd]

I've found two things so far that UnoCSS is not happy about in my local testing:

• UnoCSS does not support quote marks in selectors names. So something like data-[vertical="false"]:flex results in a parsing error when the theme file is read. Needs to be updated to group-[vertical=false]:flex — which is valid for Tailwind as well so this is no biggie.
• The larger issue is that it seems UnoCSS does not support Tailwind's named group syntax. So a selector like group-data-[vertical=false]/options:flex which depends on a parent class of group/options to work — just doesn't work. This doesn't break UnoCSS's ability to parse but it does result in those styles just not applying.
• 3rd — while the group syntax does not break Uno parsing this particularly gnarly selector (from togglebuttons) does (for reasons I do not yet understand): "group-data-[vertical=false]/options:group-[]/option:aria-[pressed=true]:border-x-blue-500"

There are likely other issues but these are the ones that jumped out to me upon fast inspection.

Open to suggestions on how to move forward.

[andrew-boyd]

I've filed an issue with UnoCSS to see if the group selectors is something that can be supported on their end — that'll be at least one item down. unocss/unocss#3441