\r\n\r\n\r\nHowever, in production build, the style works. But the css link is added asynchronously, so there is no style on first render causing the page to blink.\r\n\u003Cimg width=\"699\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/1401172/628cf01e-b84e-43d7-af43-f8c691396e24\">\r\n\r\n",[2906],{"name":2907,"color":2908},"pending triage","E99695",26696,"nuxt","open","Nuxt 3.11 with webpack builder lose style in SFC","2024-06-30T11:04:41Z","https://github.com/nuxt/nuxt/issues/26696",0.6463881,{"description":2917,"labels":2918,"number":2928,"owner":2910,"repository":2910,"state":2911,"title":2929,"updated_at":2930,"url":2931,"score":2932},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0-rc.11`\r\n- Nitro Version: `0.5.4`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-hkou23?file=app.vue,components%2FBlock.vue,main.ts,package.json\r\n\r\nRun Vite env: `npm run vite`\r\nRun Nuxt env: `npm run nuxt`\r\n\r\nApps runs same components, one with Vite, the other with Nuxt.\n\n### Describe the bug\n\nIt seems like when running Nuxt, order of precedence of CSS only gets respected in SSR, but at the moment the app mounts, every scoped CSS declaration will get overwritten by parent.\r\n\r\nThat results in a flash in styling (first page render showing same CSS as Vite envs, then it blinks to another state).\r\n\r\nI suspect this is coming from order of precedence of CSS that is respected in Vite env, but not in Nuxt.\r\n\r\nI am not sure it is a bug or some of the \"caveats\" of scoped CSS, I just noticed the difference while working with `\u003Cstyle>` and thought it would be safer to report.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2919,2922,2925],{"name":2920,"color":2921},"bug","d73a4a",{"name":2923,"color":2924},"vite","3574D1",{"name":2926,"color":2927},"馃嵃 p2-nice-to-have","0E8A16",15048,"Order of precedence of CSS different from vite-plugin-vue","2024-11-19T16:20:21Z","https://github.com/nuxt/nuxt/issues/15048",0.6651569,{"description":2934,"labels":2935,"number":2943,"owner":2910,"repository":2910,"state":2944,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@8.15.2\r\n- Builder: -\r\n- User Config: devtools, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nI haven't been able to reproduce it in Stackblitz, but the following steps should work:\r\n\r\n1. Create a new project\r\n ```bash\r\n $ pnpx nuxi@latest init fouc\r\n ```\r\n\r\n2. Create the following file `assets/css/main.css`:\r\n ```css\r\n body {\r\n background-color: greenyellow;\r\n }\r\n ```\r\n\r\n3. Change `app.vue`:\r\n\r\n ```vue\r\n \u003Ctemplate>\r\n \u003Cdiv>\r\n Hello world\r\n \u003C/div>\r\n \u003C/template>\r\n ```\r\n\r\n4. Add the file to `nuxt.config.ts`:\r\n\r\n ```typescript\r\n export default defineNuxtConfig({\r\n css: ['assets/css/main.css'],\r\n })\r\n ```\r\n\r\n5. Start the dev server and refresh the page multiple times:\r\n ```bash\r\n $ pnpm dev\r\n ```\r\n\r\nYou will notice that there's FOUC in the body styles. It is much more prominent when there are multiple styles applied, or a tool like Tailwindcss is used.\r\nIf you fix the Nuxt version to `3.10.1` with the following change in `package.json` it works correctly:\r\n\r\n```json\r\n\"resolutions\": {\r\n \"nuxt\": \"3.10.1\"\r\n}\r\n```\r\n\r\n### Describe the bug\r\n\r\nFOUC for global css styles passed to `nuxt.config.ts`.\r\n\r\n### Additional context\r\n\r\nI haven't been able to pinpoint the commit that causes this issue, but looking at the release notes of Nuxt 3.10.2 it might be related to the following PR:\r\n\r\n- Inline entry styles before component styles (https://github.com/nuxt/nuxt/pull/25749)\r\n\r\n### Logs\r\n\r\n_No response_",[2936,2939,2940],{"name":2937,"color":2938},"3.x","29bc7f",{"name":2923,"color":2924},{"name":2941,"color":2942},"upstream","E8A36D",25806,"closed","FOUC after Nuxt 3.10.2 update","2024-02-22T07:52:56Z","https://github.com/nuxt/nuxt/issues/25806",0.5939276,{"labels":2950,"number":2953,"owner":2910,"repository":2910,"state":2944,"title":2954,"updated_at":2955,"url":2956,"score":2957},[2951,2952],{"name":2937,"color":2938},{"name":2920,"color":2921},12914,"Flash of unstyled content (FOUC) with Nuxt 3銆乂ite","2023-01-19T16:48:32Z","https://github.com/nuxt/nuxt/issues/12914",0.6008535,{"labels":2959,"number":2960,"owner":2910,"repository":2910,"state":2944,"title":2954,"updated_at":2961,"url":2962,"score":2963},[],12964,"2023-01-19T16:39:56Z","https://github.com/nuxt/nuxt/issues/12964",0.61142355,{"labels":2965,"number":2966,"owner":2910,"repository":2910,"state":2944,"title":2954,"updated_at":2967,"url":2968,"score":2963},[],13063,"2023-01-19T16:42:38Z","https://github.com/nuxt/nuxt/issues/13063",{"labels":2970,"number":2971,"owner":2910,"repository":2910,"state":2944,"title":2954,"updated_at":2972,"url":2973,"score":2963},[],13127,"2023-01-19T16:47:39Z","https://github.com/nuxt/nuxt/issues/13127",{"labels":2975,"number":2976,"owner":2910,"repository":2910,"state":2944,"title":2954,"updated_at":2977,"url":2978,"score":2963},[],13182,"2023-01-19T16:48:28Z","https://github.com/nuxt/nuxt/issues/13182",{"description":2980,"labels":2981,"number":2991,"owner":2910,"repository":2910,"state":2944,"title":2992,"updated_at":2993,"url":2994,"score":2995},"I notice that this issue was opened and then closed as expected: https://github.com/nuxt/nuxt.js/issues/292\r\n\r\nHowever, I'd like to open an issue that this FOUC behavior be removed / mitigated in dev mode. Saying it won't happen in production isn't the issue. The issue is that it makes development difficult. I've encountered lots of problems developing with Nuxt due to third-party scripts measuring elements on the page when the document is loaded, since the styles are injected after that event. Many scripts rely on a \"styles ready when document ready\" behaviour, and Nuxt doesn't provide any lifecycle events (to my knowledge) that specifically address this.\r\n\r\nSpecifically, in Vue, there's a \"mounted\" lifecycle event where I would normally expect a rendered DOM (with styles) to be present. But in the case of Nuxt (unlike with using vue-builder, which doesn't have FOUC in dev mode), the mounted event can't be trusted. This is a problem.\r\n\r\nSince it's technically feasible to push HTML to the page that has styles loaded (as Nuxt can pre-render components), FOUC doesn't need to happen. Or, at the least, can rendered styles be ready before the Vue.js mounted event is fired?\r\n\r\nCan something be done about this?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1508\">#c1508\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2982,2985,2988],{"name":2983,"color":2984},"enhancement","8DEF37",{"name":2986,"color":2987},"question","cc317c",{"name":2989,"color":2990},"2.x","d4c5f9",1684,"Flash of Unstyled Content (FOUC) is an actual problem","2023-01-18T15:42:08Z","https://github.com/nuxt/nuxt/issues/1684",0.62557924,{"description":2997,"labels":2998,"number":3001,"owner":2910,"repository":2910,"state":2944,"title":3002,"updated_at":3003,"url":3004,"score":3005},"### Environment\r\n\r\n```\r\nNuxt project info: \r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: css, devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\n[Nuxt 3 repo](https://stackblitz.com/edit/github-qbfhyv) vs [Nuxt 2 repo](https://stackblitz.com/edit/github-4yydwm)\r\n\r\nBoth projects implement an identical structure (layout with header and index page)\r\n\r\nIn each of the reproductions, run the necessary commands to run the project in production mode\r\n- nuxt 3 - `npm run build && npm run preview`\r\n- nuxt 2 - `npm run build && npm run start`\r\n\r\nInspect the HTML code returned by accessing the index page. Notice the `\u003Cstyle>` tag in the `\u003Chead>`\r\n\r\n### Describe the bug\r\n\r\nThe 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.\r\n\r\nIn 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.\r\n\r\nIn 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.\r\n\r\n**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 `\u003Cdynamic-one />` is rendered. Nuxt 2 correctly only includes the styles from `One.vue`.\r\n\r\nIf unrelated (and is considered to be an issue) i am happy to open a separate report.\r\n\r\n### Additional context\r\n\r\nWe are in the process of migrating our Nuxt 2 app to Nuxt 3 and are running into multiple complications - this is one of them.\r\n\r\nIn the case of developing an app from scratch this would not be an issue because it would inform the development style.\r\n\r\nHowever, 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.\r\n\r\n### Logs\r\n\r\n_No response_",[2999,3000],{"name":2937,"color":2938},{"name":2907,"color":2908},25393,"Discrepancies in production build styles order (compared to nuxt 2)","2024-01-26T20:16:35Z","https://github.com/nuxt/nuxt/issues/25393",0.64964247,["Reactive",3007],{},["Set"],["ShallowReactive",3010],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f7uujIudJIYfJuc0DzXFY5gQqlwDATLx_CuRO66Yf8BU":-1},"/nuxt/nuxt/27334"]