Nuxt RC10 - Reset inline styles take priority on built bundle

[g4w3l]

Environment

---

• Operating System: Windows_NT
• Node Version: v16.15.0
• Nuxt Version: 3.0.0-rc.10
• Nitro Version: 0.5.3
• Package Manager: [email protected]
• 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

[g4w3l]

@danielroe as seen in the #7581 I managed to reproduce my problem

[danielroe]

To describe the issue, styles for the first page are being inlined. This includes global styles. They are in the right order, so global styles precede the page-specific CSS.

But when we come to navigate to the second page, we don't have inlined styles. We just have an external CSS file. In your case, the specificity of the selectors is equal, so the external CSS file has lower specificity and is overridden by the global styles in this case.

I think the 'right' approach would be to use CSS layers, which uno does support. But I would be very open to other suggestions. Maybe @antfu would have a helpful suggestion here 🙏

(See also these MDN docs tips.)

[g4w3l]

Thanks @danielroe for your suggestion, will give it a look ! 🙏🏾 Is this expected that the behavior when using the nuxt build site differ from the nuxt dev ?

[antfu]

Wonder if we could have a mechanism to remove the inline style once the external one takeover or navigate to another page?

[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.