[Bug Report] Latest update broke styling for flexbox properties in Nuxt3

[rylanharper]

UnoCSS version

0.58.7

Describe the bug

Upon updating Unocss to v0.58.7 in my Nuxt3 portfolio this morning, I notice a number of styles simply no longer work. Notably flexbox properties (and sometimes borders). This does not seem to have an effect on live production.

Here is a pic of a section in my portfolio in dev mode vs live - the styles have not changed at all between these two images. It seems that this issue only happens on the initial load of the page, although it can sometimes revert back to this state when I save changes on a file or component:

*These images are showing that flex, items-center, and justify-between not being applied to these elements. Again, styles have not been changed or edited in any way. Only the unocss version has changed.

Reproduction

I can't seem to reproduce this in a Stackblitz as it seems to be local environment issue.. But here is the gist of what I have in my project, which always seems to be unstyled upon page load:

https://stackblitz.com/edit/nuxt-starter-xy4uvj?file=package.json,unocss.config.ts,app.vue,nuxt.config.ts

System Info

Nuxt v3.11.1
Node v18.18.2

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.

[rylanharper]

Hmm so even when I downgrade versions this seems to still occur sometimes. I cannot seem to pinpoint the core issue here..

[rylanharper]

This issue is seemingly fixed by upgrading Nuxt to the latest version 3.11.2 both on local and live... Not sure what was causing this to begin with and styles have still not been touched haha. Closing issue.

[rylanharper]

I'm reopening this issue as I found it persists on two more of my Nuxt ecom sites, even with the latest version of Nuxt ^3.11.2 and Uno ^0.59.0..

It definitely has something to do with flex type classes, specifically using the items-center class is what classes a flexbox/styling error. I have captured a video of the styles not being applied when an items-center class is added to an element (forgive the video quality, Github requires I compress the vid down to 10mb):

context: I have a basic grid container with a flexbox li item inside that is pretty much the same as above, flex, items-center, and justify-between. It seems that adding items-center causes no styles to be applied to the element. I am using the @apply directive here as my order elements are dynamically generated based on the amount of orders a client has.

Screen.Recording.2024-04-05.at.1.32.01.PM.trim.720.mov

Oddly enough, if I add another class to this element, such as relative etc., the styles do go back to what they should be. This is an obvious bug that was introduced in v0.58.7. I'm not sure if this could be related to @apply, certain flex classes (items-center), or if it is related to Nuxt.

Also, this is only a local environment issue. This does not occur on live (as far as I can tell). 😵‍💫

[Simon-He95]

Can you provide a minimally reproducible demo?

[owl1n]

With last version of nuxt its actual to me too. Some apply rules like width and height + flex rules sometimes not transform to css. Or it can work in development but not in production.

[rylanharper]

@Simon-He95 The issue is that this is extremely difficult to reproduce. It also seems to not happen within new Nuxt projects, even when I have the same config as my older projects. I have tried with two new repos to reproduce the issue locally and simply cannot do it (despite spending hours on the issue this past weekend). Perhaps I need to remove my node modules folder or uninstall/reinstall uno on my older projects?

Agreed @owl1n. This definitely seems like a potential @apply issue, although I am still somewhat unsure of the core cause..

At its core, it seems that some css styles are simply not applied when using @apply. However, it seems to be infrequent and mainly occurs on flexbox type styles. I will need help from any other Nuxt users to find the issue here, although I will keep at it during this week. Even another video that can screen-record the styles not being applied may help.

[microdou]

I also encounter broken styles, with SvelteKit. The bug was introduced in version 0.58.7.
In my case, broken styles only occur in very few components, and only on build, not on development. I will try to figure out which styles are affected...

[rylanharper]

@microdou are you using @apply on those components with broken styles?

[microdou]

@rylanharper I checked again. Yes, there are many @apply in css of my affected components.

[rylanharper]

So I cannot seem to reproduce this, despite a lot of attempts on a fresh Nuxt project..

It does seem to be an @apply issue, as the broken styles are fixed when they are added inline. A quick fix is to rename classes that use the @apply styles as well, this way applied styles can stay as they are. I am considering closing this issue, as I can simply not reproduce despite a lot of attempts this past week..