Discrepancies in production build styles order (compared to nuxt 2)

tibineagu commented 9 months ago

Environment

Nuxt project info:                                                                                                                                                                                                                                                               
------------------------------
- Operating System: Linux
- Node Version:     v18.18.0
- Nuxt Version:     3.9.3
- CLI Version:      3.10.0
- Nitro Version:    2.8.1
- Package Manager:  npm@10.2.3
- Builder:          -
- User Config:      css, devtools
- Runtime Modules:  -
- Build Modules:    -
------------------------------

Reproduction

Nuxt 3 repo vs Nuxt 2 repo

Both projects implement an identical structure (layout with header and index page)

In each of the reproductions, run the necessary commands to run the project in production mode

nuxt 3 - npm run build && npm run preview
nuxt 2 - npm run build && npm run start

Inspect the HTML code returned by accessing the index page. Notice the <style> tag in the <head>

Describe the bug

The way Nuxt 3 builds and extracts the CSS from the app is inconsistent with Nuxt 2. This can cause complications when migrating an existing Nuxt 2 app.

In Nuxt 3, the global styles specified from the nuxt config are injected at the end of the style tag. With Nuxt 2, these were injected at the beginning.

In both reproduction repositories, the @/assets/styles/global.css file is provided globally. If you inspect the result of the HTML pages (build for production), the contents of that CSS file are placed differently.

Follow-up observation - this might be unrelated, but you will also notice that in the case of Nuxt 3, it is including the styles for both components/dynamic/One.vue and components/dynamic/Two.vue even though only at render time only <dynamic-one /> is rendered. Nuxt 2 correctly only includes the styles from One.vue.

If unrelated (and is considered to be an issue) i am happy to open a separate report.

Additional context

We are in the process of migrating our Nuxt 2 app to Nuxt 3 and are running into multiple complications - this is one of them.

In the case of developing an app from scratch this would not be an issue because it would inform the development style.

However, in our case some of the global styles get overridden by rules at the component level. The new order in Nuxt 3 causes this to break.

Logs

No response

stackblitz[bot] commented 9 months ago

Start a new pull request in StackBlitz Codeflow.

manniL commented 9 months ago

I think this is a duplicate of https://github.com/nuxt/nuxt/issues/22817#issuecomment-1720163503

tibineagu commented 9 months ago

@manniL thanks for looking into this so quickly, but I dont see how the two are related.

What i'm pointing out is that the contents of global.css (provided through the css option in nuxt.config.ts) is inlined in different locations.

with nuxt 2, it's added right after the opening of the style tag
in nuxt 3, it's added at the end

danielroe commented 9 months ago

I think we can track in https://github.com/nuxt/nuxt/issues/23785.

nuxt / nuxt