Css :deep() selector not working correctly with SSR

[CernyMatej]

Environment

• Operating System: Darwin
• Node Version: v20.9.0
• Nuxt Version: 3.9.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.10.4
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

Reproduction

Not working (Nuxt): https://stackblitz.com/edit/github-a6umaw?file=app.vue,components%2FFlashingSquare.vue
Working (Vue SSR): https://stackblitz.com/edit/github-hhybci?file=src%2Fpages%2FHome.vue,src%2Fcomponents%2FFlashingSquare.vue

Describe the bug

When using the :deep CSS selector, the styles are not applied in the correct order during loading, causing them to be overwritten after the page loads. When I tried reproducing this issue in Vue SSR, it worked correctly.

Additional context

Works fine with ssr: false

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-a6umaw (Open reproduction)
• github-hhybci (Open reproduction)

[manniL]

@CernyMatej can you try if this applies when using plain vue + ssr too? Best would be to reproduce it via this stackblitz.

[CernyMatej]

@manniL I already did, as stated in the description. The reproduction for plain vue + ssr is under the link to the nuxt reproduction. 😊

[manniL]

@CernyMatej Thanks 👍

[danielroe]

Linked to #23785.

Basically the two selectors have equal specificity and the the order of CSS inlined differs from the order in the CSS file. You can work around by increasing the specificity of your CSS selector.

[CernyMatej]

@danielroe I don't think this was fixed in #25749. Or am I overlooking something?
Btw. this reproduction doesn't have inlining of ssr styles enabled. However, it doesn't seem to be fixed even with it enabled either.

Updated reproduction with Nuxt 3.10.2:
https://stackblitz.com/edit/github-a6umaw?file=components%2FFlashingSquare.vue,package.json

[danielroe]

The issue we fixed was in production.

Vite still does have an issue in development, but that is not Nuxt - Nuxt renders app.vue styles first, and then FlashingSquare's styles. But when Vite hydrates, it swaps out the stylesheets and seems to do it in the wrong order. We could open a new issue to track - but would be worth seeing if we could reproduce for vite with SSR.

We could start with https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter but it will need modifying to add rendering CSS links.

[CernyMatej]

Ah, I see. Well, I initially tried to reproduce it in Vue SSR as well, but I wasn't able to. https://stackblitz.com/edit/github-hhybci?file=src%2Fpages%2FHome.vue,src%2Fcomponents%2FFlashingSquare.vue

I'm not sure which changes you're suggesting we make.