Duplicated inlined css

[kstraszewski]

Environment

Nuxi 3.0.0-rc.11 19:06:28
RootDir: /Users/konradstraszewski/WebstormProjects/lendi-b2c 19:06:29
Nuxt project info: (copied to clipboard) 19:06:29

---

• Operating System: Darwin
• Node Version: v16.14.0
• Nuxt Version: 3.0.0-rc.11
• Nitro Version: 0.5.4
• Package Manager: npm@8.19.0
• Builder: vite
• User Config: app, ssr, experimental, postcss, nitro, css, meta, modules, image, unocss, publicRuntimeConfig, vite, nuxtTypedRouter, plugins
• Runtime Modules: nuxt-typed-router@1.2.2, @unocss/nuxt@0.45.22, @nuxt/image-edge@1.0.0-27707824.1028381, nuxt-jsonld@2.0.5, @pinia/nuxt@0.4.1, @vueuse/nuxt@8.9.2, ()
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-w6cj1g-1libb7?file=pages%2Findex.vue

1. nuxt build && nuxt preview

Describe the bug

In production mode i've noticed that scoped css from index.vue are loaded twice. You end up with a inlined CSS in your HTML and also the same CSS is loaded by the CSS chunk from page. You can see that test-class added in pages/index is loaded in inlined HTML and also loaded on the end in index.css.

You can see this behavior more clearly here: https://qa.lendi.pl/. Let get this blue arrow for example it has best-offer-arrow class. It is declared in pages/index.vue. It is loaded inlined (elements -> ctrl + f -> best-offer-arrow), and also it's loaded in index.css. It affects performance of the site

Additional context

No response

Logs

No response

[danielroe]

Let's track in #14953.