\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",[1984],{"name":1985,"color":1986},"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.6493144,{"description":1995,"labels":1996,"number":2006,"owner":1988,"repository":1988,"state":1989,"title":2007,"updated_at":2008,"url":2009,"score":2010},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: webpack\r\n- User Config: devtools, builder\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nThis is a minimal reproduction demo \r\nhttps://stackblitz.com/edit/github-jgemen-7nb854\r\n\r\n1. run the following command to start a production preview\r\nnpm install && npm run build && npm run preview\r\n2. navigator to router /home to see the rendered result\r\nyou should see a style blink like the following gif( The fps of the GIF is too low so sometimes its not recorded)\r\n\r\n\n\n### Describe the bug\n\nThe generated html doesn't has a <link rel=\"stylesheet\" type=\"text/css\" href=\"xxxx.css\"> which refer to the generated css. So the page will lose style on first render. The stylesheet will be inserted by js later which will cause the page to blink.\r\n\r\n```\r\n\u003C!DOCTYPE html>\r\n\u003Chtml >\r\n\u003Chead>\u003Cscript src=\"/.localservice@runtime.a2aabdd9.js\">\u003C/script>\u003Cmeta charset=\"utf-8\">\r\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\u003Clink rel=\"modulepreload\" as=\"script\" crossorigin href=\"/_nuxt/cff450d.js\">\r\n\u003Clink rel=\"modulepreload\" as=\"script\" crossorigin href=\"/_nuxt/50be641.js\">\r\n\u003Clink rel=\"modulepreload\" as=\"script\" crossorigin href=\"/_nuxt/d735102.js\">\r\n\u003Clink rel=\"prefetch\" as=\"script\" crossorigin href=\"/_nuxt/59f8411.js\">\r\n\u003Clink rel=\"prefetch\" as=\"style\" href=\"/_nuxt/css/6e37da7.css\">\r\n\u003Clink rel=\"prefetch\" as=\"script\" crossorigin href=\"/_nuxt/caf949d.js\">\r\n\u003Clink rel=\"prefetch\" as=\"style\" href=\"/_nuxt/css/ba75bce.css\">\r\n\u003Clink rel=\"prefetch\" as=\"script\" crossorigin href=\"/_nuxt/c653075.js\">\r\n\u003Clink rel=\"prefetch\" as=\"style\" href=\"/_nuxt/css/f4766f8.css\">\r\n\u003Cscript type=\"module\" src=\"/_nuxt/cff450d.js\" crossorigin>\u003C/script>\r\n\u003Cscript type=\"module\" src=\"/_nuxt/50be641.js\" crossorigin>\u003C/script>\r\n\u003Cscript type=\"module\" src=\"/_nuxt/d735102.js\" crossorigin>\u003C/script>\u003C/head>\r\n\u003Cbody >\u003Cdiv id=\"__nuxt\">\u003Ch1> This Line doesn't have color red on first render even using production build \u003C/h1>\u003C/div>\u003Cscript type=\"application/json\" id=\"__NUXT_DATA__\" data-ssr=\"true\">[[\"Reactive\",1],{\"data\":2,\"state\":3,\"once\":4,\"_errors\":5,\"serverRendered\":6,\"path\":7},{},{},[\"Set\"],{},true,\"/home\"]\u003C/script>\r\n\u003Cscript>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:\"/\",buildAssetsDir:\"/_nuxt/\",cdnURL:\"\"}}\u003C/script>\u003C/body>\r\n\u003C/html>\r\n```\r\n\r\n I have found some solution which use cacheGroups to combine all the css together but this is not what I wanted. \r\n```\r\nextractCSS: true,\r\n optimization: {\r\n ......\r\n splitChunks: {\r\n ......\r\n cacheGroups: {\r\n defaultVendors: {\r\n test: /[\\\\/]node_modules[\\\\/]/,\r\n priority: -10,\r\n reuseExistingChunk: true,\r\n },\r\n default: {\r\n minChunks: 2,\r\n priority: -20,\r\n reuseExistingChunk: true,\r\n },\r\n styles: {\r\n name: 'styles',\r\n test: /\\.(css|vue)$/,\r\n chunks: 'all',\r\n enforce: true,\r\n },\r\n },\r\n },\r\n },\r\n```\n\n### Additional context\n\nUse Vite as builder and the following config works perfect,but vite cannot handle contenthash correctly, if I change one of the js file then all js file hash will change which is terriable for browser cache.\r\n```\r\nexperimental: {\r\n inlineSSRStyles: false,\r\n },\r\n```\n\n### Logs\n\n_No response_",[1997,2000,2003],{"name":1998,"color":1999},"bug","d73a4a",{"name":2001,"color":2002},"webpack","650C6F",{"name":2004,"color":2005},"馃敤 p3-minor","FBCA04",24996,"Nuxt with webpack builder enabled lose style on first render even in production build.","2024-11-19T16:21:00Z","https://github.com/nuxt/nuxt/issues/24996",0.6587349,{"description":2012,"labels":2013,"number":2021,"owner":1988,"repository":1988,"state":1989,"title":2022,"updated_at":2023,"url":2024,"score":2025},"### 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_",[2014,2015,2018],{"name":1998,"color":1999},{"name":2016,"color":2017},"vite","3574D1",{"name":2019,"color":2020},"馃嵃 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.66343313,{"description":2027,"labels":2028,"number":2036,"owner":1988,"repository":1988,"state":2037,"title":2038,"updated_at":2039,"url":2040,"score":2041},"### 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_",[2029,2032,2033],{"name":2030,"color":2031},"3.x","29bc7f",{"name":2016,"color":2017},{"name":2034,"color":2035},"upstream","E8A36D",25806,"closed","FOUC after Nuxt 3.10.2 update","2024-02-22T07:52:56Z","https://github.com/nuxt/nuxt/issues/25806",0.5946608,{"labels":2043,"number":2046,"owner":1988,"repository":1988,"state":2037,"title":2047,"updated_at":2048,"url":2049,"score":2050},[2044,2045],{"name":2030,"color":2031},{"name":1998,"color":1999},12914,"Flash of unstyled content (FOUC) with Nuxt 3銆乂ite","2023-01-19T16:48:32Z","https://github.com/nuxt/nuxt/issues/12914",0.6017024,{"labels":2052,"number":2053,"owner":1988,"repository":1988,"state":2037,"title":2047,"updated_at":2054,"url":2055,"score":2056},[],12964,"2023-01-19T16:39:56Z","https://github.com/nuxt/nuxt/issues/12964",0.608768,{"labels":2058,"number":2059,"owner":1988,"repository":1988,"state":2037,"title":2047,"updated_at":2060,"url":2061,"score":2056},[],13063,"2023-01-19T16:42:38Z","https://github.com/nuxt/nuxt/issues/13063",{"labels":2063,"number":2064,"owner":1988,"repository":1988,"state":2037,"title":2047,"updated_at":2065,"url":2066,"score":2056},[],13127,"2023-01-19T16:47:39Z","https://github.com/nuxt/nuxt/issues/13127",{"labels":2068,"number":2069,"owner":1988,"repository":1988,"state":2037,"title":2047,"updated_at":2070,"url":2071,"score":2056},[],13182,"2023-01-19T16:48:28Z","https://github.com/nuxt/nuxt/issues/13182",{"description":2073,"labels":2074,"number":2084,"owner":1988,"repository":1988,"state":2037,"title":2085,"updated_at":2086,"url":2087,"score":2088},"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>",[2075,2078,2081],{"name":2076,"color":2077},"enhancement","8DEF37",{"name":2079,"color":2080},"question","cc317c",{"name":2082,"color":2083},"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.6238456,["Reactive",2090],{},["Set"],["ShallowReactive",2093],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"7uujIudJIYfJuc0DzXFY5gQqlwDATLx_CuRO66Yf8BU":-1},"/nuxt/nuxt/27334"]