Nuxt RC10 - Reset inline styles take priority on built bundle

Environment

---

• Operating System: Windows_NT
• Node Version: v16.15.0
• Nuxt Version: 3.0.0-rc.10
• Nitro Version: 0.5.3
• Package Manager: npm@8.11.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

• With UnoCSS and preflight activated for CSS

Reproduction

See this repo for reproduction : https://github.com/g4w3l/nuxt3rc10-unocss

• If you launch the server with npm run dev, when you go on /page1 you see a green button as expected
• If you build it and launch it with

npm run build
node .output/server/index.mjs

The button on /page1 goes transparent

Describe the bug

I’ve put some styles on a button in a component. All works well in dev mode, if you inspect the <button>, the order of the styles is correct and the bg-green is applied :

In built version the order of the styles is inverted, thus the button is transparent :

Additional context

No response

Logs

No response

[markus-gx]

Don’t know if this helps, I had a similar issue which was resolved once I disabled experimental.inlineSSRStyles;

Using tailwind I defined for instance h1 tag like this in my main.scss:

  h1{
    @apply text-[1.75rem] leading-10 md:text-[3.75rem] md:leading-[5.25rem] 2xl:text-3xl font-semibold;
  }

Which worked before RC.10/11. After upgrading every h1 was overridden by default browser styles only when built.

[AndrewBogdanovTSS]

It’s not resolved, moreover inlineSSRStyles now does nothing, it inlines styles incorrectly no matter if it’s true or false, I will prepare repro shortly