I tried fresh with UnoCSS

[suyashmohan]

I like fresh but didn't enjoyed using twind so instead I tried using UnoCSS(with WindiCSS Preset) without any additional build step which would be required if using tailwind css (through npx)

I have created a repo with simple implementation. Hope it can help someone else.
Also, would appreciate to learn, if anyone knows a better way to integrate unocss or something similar

https://github.com/suyashmohan/fresh-unocss

Once plugin system (PR #512) is ready, this shouldn't be required

[lveillard]

Thanks for the example!
The plugin system already works, but not sure how to use it to integrate with unoCss tho 🤔

[miguelrk]

@lveillard you can check out #1303 to get it working 👍🏼

[lveillard]

It works like a charm!
However i though that regex would work with dynamic values, like it happens in twind, but it does not seem to be the case.

When changing the value on runtime , for instance bg-red-${number} it only works in the page load, but when the value mutates, the style just vanishes :(

Anyway, happy to be able to use all the other unocss stuff, thanks!

[miguelrk]

Hey! In case this still helps you or someone, this has been addressed already by #1966 which introduces 3 modes: aot, ssr and csr. In order for unocss to detect dynamic changes to classes and udpate the DOM, you need to ship the unocss engine to the client, so basically set csr: true in the plugin options. I would encourage you to try the unocss plugin out! It will soon be merged to the main fresh branch

[cdaringe]

hey @miguelrk! I see #1966 was closed. As I read thru some of the comments, one of the comments was "hey, maybe we'll shove this out of core and into an independent plugin" (paraphrased). I checked https://jsr.io/packages?search=unocss, but didn't see one cut.

you have a functional recipe you'd recommend now?