Flash of unstyled content in generated page when using scss nuxt 3.0.0-rc.12

[nurRiyad]

Environment

package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "HOST=0.0.0.0 nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.12",
    "sass": "^1.55.0"
  }
}

nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['@/main.scss'],
  experimental: {
    // Temporary workaround for stackblitz
    writeEarlyHints: false,
  },
});

Reproduction

StackBlitz minimal reproduction link
https://stackblitz.com/edit/github-hywqdd?file=app.vue

Describe the bug

At reload time it shows unstyled pages. But in the dev server, it seems fine. It only appears when I generate the project with
npm run generate and serve with npm run preview

Additional context

In my project, this problem doesn't appear until nuxt3 rc-11.0.0. It only starts appearing after updating my project to nuxt3 rc-12.0.0

Logs

No response

[danielroe]

This is a regression of the inline styles implementation and you can work around it by setting experimental.inlineSSRStyles to false.

[BlakeB415]

This is a regression of the inline styles implementation and you can work around it by setting experimental.inlineSSRStyles to false.

This workaround breaks our styling on the initial page load.

[danielroe]

@BlakeB415 Would you provide a reproduction? 🙏

[kwright02]

@BlakeB415 Would you provide a reproduction? 🙏

We'll do our best but we're not sure how to. We set the option like you said above and as Blake mentioned it breaks the styling on initial page load. Is there something specific we could do or provide for you?

[danielroe]

@kwright02 Some info here.

Basically, start with your project and remove as much as you can until the problem can't be reproduced. 🙏

I have a fix for this issue in progress but want to make sure it also solves your situation.

[kwright02]

Ok, I'll see what I can test, any recommendations for where to start removing from? Or does it really matter?

[danielroe]

Try to remove as much complexity as possible, as quickly as possible. Start with your app.vue, remove layouts, remove all pages but index page, gradually remove components in that page, etc.

[BlakeB415]

Try to remove as much complexity as possible, as quickly as possible. Start with your app.vue, remove layouts, remove all pages but index page, gradually remove components in that page, etc.

https://stackblitz.com/edit/github-hywqdd-nehtut?file=components/Test.vue

I've narrowed it down to our use of ClientOnly. Using ClientOnly inside of a component seems to break scoped CSS on SSR when inlineSSRStyles is false. The server and client's data-v-* attributes do not seem to match up when this occurs.

[danielroe]

Thanks. I appreciate it.

[BlakeB415]

Thanks. I appreciate it.

No problem. Also, this only seems to occur with the build and not the dev server.

[monkemedia]

Oh my god this has taken me hours to resolve since upgrading to rc.12. The unstyled flash was extremely annoying :/ Thankfully experimental: { inlineSSRStyles: false }, fixed it for me. Thank you @danielroe

[codingcn]

this only seems to occur with the build and not the dev server.

[codingcn]

@danielroe when experimental.inlineSSRStyles to false and yarn build

I have 3 <style>

<template>
  <div>
  </div>
</template>

<style lang="scss">
// Valid
</style>

<style lang="scss">
// Invalid
</style>

<style scoped lang="scss">
// Invalid
</style>

[danielroe]

@codingcn That sounds like #15227.

[manniL]

Should be resolved via nuxt/framework#8666 - cannot reproduce with rc.13 anymore.