Environment

Reproduction

https://stackblitz.com/edit/nuxt-starter-jk6q98zq

1. Run npm run build && npm run preview (dev mode doesn't inline styles).
2. Open the preview with JS disabled or with CPU throttling, then let it hydrate.
3. #case-a (component rule vs global CSS) and #case-b (parent vs child root) start at 88px / red and switch to 120px / green on hydration. On 4.5.2 they stay at 120px / green.

The page must be opened without using the browser cache.

Describe the bug

The order of equal-specificity rules coming from different files isn't guaranteed, and this issue doesn't ask for a particular order. It's about consistency: the server-rendered <head> and the <head> after hydration contain the same rules in a different order, so the same page renders differently before and after hydration.

Expected: computed styles are the same before hydration, after hydration and after client-side navigation, whatever order Nuxt picks.

Actual (4.6.2): both elements render at 88px / red from the SSR HTML and switch to 120px / green during hydration, which is a layout shift on every hard load. Client-side navigation renders 120px right away.

Computed height of #case-a / #case-b. "Before hydration" is measured at readyState === 'interactive', before any module script runs, with all stylesheets loaded:

<head> (stylesheets only):

<!-- 4.6.2 SSR: the shared chunk's <link> is dropped because its CSS is inlined -->
<style>.banner{background:#2e8b57;height:120px}</style>
<style>.product-card[data-v-84345cbb]{background:#2e8b57;height:120px}</style>
<style>.base-card[data-v-92b00755]{background:tomato;height:88px}</style>
<link rel="stylesheet" href="/_nuxt/entry.CL7L9PkT.css">

<!-- 4.6.2 after hydration: Vite's preload helper appends the chunk CSS to the end of <head> -->
...
<link rel="stylesheet" href="/_nuxt/entry.CL7L9PkT.css">
<link rel="stylesheet" href="/_nuxt/ProductCard.CoJAPe-B.css">

<!-- 4.5.2 SSR: the duplicate <link> was still rendered, so SSR matched the client -->
...
<link rel="stylesheet" href="/_nuxt/entry.CL7L9PkT.css">
<link rel="stylesheet" href="/_nuxt/ProductCard.CoJAPe-B.css">

Every equal-specificity conflict between an inlined rule and a linked rule, or between two inlined rules, can resolve one way in SSR and the other way once the client appends the stylesheet.

History. This isn't new in 4.6, but 4.6 widened it:

• In 4.5.2 the same mismatch already exists for page components: their CSS is inlined and never linked, so entry.css comes after the page's <style> in SSR and before the page CSS after hydration.
• fix(vite): drop duplicate CSS links for fully inlined shared chunks #36056 (drop duplicate CSS links for fully inlined shared chunks) and fix(vite,nitro): keep css links for unrendered components #36060 (adds the runtime createInlinedCSSFilter) also drop the link for shared chunks without a facade module. With Rolldown this applies to most components in the app where we hit it, so for us the mismatch went from page-level edge cases to almost every component.