\n\u003C/template>\n\n\u003Cstyle scoped>\n.blue { background-color: blue; }\n\u003C/style>\n```\n\n```vue\n// PARENT\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBlueSquare class=\"red\" />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.red { background-color: red; }\n\u003C/style>\n```\n\nBoth plain Vue and Vue with SSR have the correct order:\n\n**Vue**\n\u003Cimg width=\"714\" height=\"163\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fa26e7f4-3f89-4bae-b0b1-1fd19f383a02\" />\n\n**Vue SSR**\n\u003Cimg width=\"601\" height=\"190\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e1dc7cc-4b32-4ccc-957c-dd207b7a836d\" />\n\n\nBut in Nuxt, the order is incorrect when built:\n\n**Nuxt**\n\u003Cimg width=\"596\" height=\"85\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/62458e07-886e-4c0b-b569-db6e08805f35\" />\n\n\n---\n\n\nIs this Nuxt related or not?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3139],{"name":3140,"color":3141},"pending triage","E99695",33041,"nuxt","open","Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.6963895,{"description":3150,"labels":3151,"number":3170,"owner":3143,"repository":3143,"state":3171,"title":3172,"updated_at":3173,"url":3174,"score":3175},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v20.9.0`\r\n- Nuxt Version: `3.9.1`\r\n- CLI Version: `3.10.0`\r\n- Nitro Version: `2.8.1`\r\n- Package Manager: `pnpm@8.10.4`\r\n- Builder: `-`\r\n- User Config: `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nNot working (Nuxt): https://stackblitz.com/edit/github-a6umaw?file=app.vue,components%2FFlashingSquare.vue\r\nWorking (Vue SSR): https://stackblitz.com/edit/github-hhybci?file=src%2Fpages%2FHome.vue,src%2Fcomponents%2FFlashingSquare.vue\r\n\r\n### Describe the bug\r\n\r\nWhen 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.\r\n\r\n\r\n### Additional context\r\n\r\nWorks fine with `ssr: false`\r\n\r\n### Logs\r\n\r\n_No response_",[3152,3155,3158,3161,3164,3167],{"name":3153,"color":3154},"3.x","29bc7f",{"name":3156,"color":3157},"workaround available","11376d",{"name":3159,"color":3160},"bug","d73a4a",{"name":3162,"color":3163},"🔨 p3-minor","FBCA04",{"name":3165,"color":3166},"✨ good reproduction","fbca04",{"name":3168,"color":3169},"inline styles","68AF97",25229,"closed","Css `:deep()` selector not working correctly with SSR","2024-02-15T14:30:05Z","https://github.com/nuxt/nuxt/issues/25229",0.6329338,{"labels":3177,"number":3185,"owner":3143,"repository":3143,"state":3171,"title":3186,"updated_at":3187,"url":3188,"score":3189},[3178,3181,3182],{"name":3179,"color":3180},"stale","ffffff",{"name":3140,"color":3141},{"name":3183,"color":3184},"2.x","d4c5f9",9973,"Minor bug: CSS with pseudo class with params when staticly generated is different from development","2023-01-22T15:45:05Z","https://github.com/nuxt/nuxt/issues/9973",0.6594957,{"labels":3191,"number":3200,"owner":3143,"repository":3143,"state":3171,"title":3201,"updated_at":3202,"url":3203,"score":3204},[3192,3193,3196,3197],{"name":3153,"color":3154},{"name":3194,"color":3195},"upstream","E8A36D",{"name":3162,"color":3163},{"name":3198,"color":3199},"upstream-bug","B60205",13417,"Binding to CSS wrong variable name in SSR","2023-01-19T16:55:43Z","https://github.com/nuxt/nuxt/issues/13417",0.6632514,{"description":3206,"labels":3207,"number":3211,"owner":3143,"repository":3143,"state":3171,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Versions\r\n\r\n- nuxt: v2.14.12\r\n- node: v12.19.0\r\n\r\n### Reproduction Repository\r\n\r\nhttps://github.com/gsqrt2/nuxt-multiline-style\r\n\r\n\u003Cdetails open>\r\n\u003Csummary>Additional Details\u003C/summary>\r\n\u003Cbr>\r\nminimal nuxt installation\r\n\u003C/details>\r\n\r\n### Steps to reproduce\r\n\r\nIndex page contains 3 nested divs with the same multiline style attribute.\r\n\r\nOn ssr load, inspect the nested divs and notice how only the parent div's style has been parsed correctly, while the nested children's style is broken by the \\n character.\r\n\r\nUse the links to navigate back and forth between index page and its copy, and you will notice that style is parsed correctly when client side rendered.\r\n\r\nAlso notice that class attribute is parsed correctly every time.\r\n\r\n\r\n### What is Expected?\r\n\r\nStyle attribute being parsed correctly regardless of the depth of the element.\r\n\r\n### What is actually happening?\r\n\r\nNested divs' style is broken by unescaped \\n character.\r\n\r\n### Workaround\r\n\r\nMaking the style property reactive by either prepending :style=\"[]\" or replacing the string (style=\"...\") with a string template (:style=\"\\`...\\`\") seems to bypass the problem.",[3208,3209,3210],{"name":3183,"color":3184},{"name":3194,"color":3195},{"name":3198,"color":3199},8536,"Multiline style string unescaped parsing","2024-06-30T09:25:55Z","https://github.com/nuxt/nuxt/issues/8536",0.6634907,{"description":3217,"labels":3218,"number":3223,"owner":3143,"repository":3143,"state":3171,"title":3224,"updated_at":3225,"url":3226,"score":3227},"Hello,\r\n\r\nWhen I add a class on \u003Cnuxt /> tag in a template, it's added rightly on SSR, but not when rendered with client.\r\n\r\nPoC : https://glitch.com/edit/#!/nuxt-issue-672\r\n\r\nIn this PoC, on the index page, when about is rendered with server, we can see red background, not when it's rendered by client.\r\n\r\nThanks,\r\nGaël\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/c581\">#c581\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3219,3222],{"name":3220,"color":3221},"enhancement","8DEF37",{"name":3183,"color":3184},672,"Class on \u003Cnuxt /> tag","2023-01-18T15:39:39Z","https://github.com/nuxt/nuxt/issues/672",0.6836097,{"description":3229,"labels":3230,"number":3232,"owner":3143,"repository":3143,"state":3171,"title":3233,"updated_at":3234,"url":3235,"score":3236},"This [will be fixed](https://github.com/vuejs/vue/pull/8037) in the next release of Vue, but currently, new lines, tabs, and other escape characters are escaped twice by Vue's SSR. The result is this:\r\n\r\n```css\r\n\u003Cdiv>\r\n \u003Cdiv \r\n class=\"\r\n foo\r\n bar\r\n \" \r\n />\r\n\u003C/div>\r\n```\r\n\r\ncompiles to:\r\n\r\n```css\r\n\u003Cdiv>\r\n \u003Cdiv \r\n class=\"\\n\r\n foo\\n\r\n bar\\n\r\n \" \r\n />\r\n\u003C/div>\r\n```\r\n\r\nso the styles for `foo` and `bar` are not applied. \r\n\r\nI just wanted to share that this can be worked around with the following hotfix in Nuxt projects:\r\n\r\n```js\r\nbuild: {\r\n extend(config, ctx) {\r\n const vueRule = config.module.rules.find(\r\n rule => rule.loader === 'vue-loader'\r\n )\r\n vueRule.options.compilerOptions = {\r\n ...vueRule.options.compilerOptions,\r\n modules: [\r\n ...((vueRule.options.compilerOptions &&\r\n vueRule.options.compilerOptions.modules) ||\r\n []),\r\n { postTransformNode: staticClassHotfix }\r\n ]\r\n }\r\n\r\n function staticClassHotfix(el) {\r\n el.staticClass = el.staticClass && el.staticClass.replace(/\\\\[a-z]\\b/g, '')\r\n if (Array.isArray(el.children)) {\r\n el.children.map(staticClassHotfix)\r\n }\r\n }\r\n }\r\n}\r\n```\r\n\r\nIt might even be a good idea to build the hotfix into a patch release of Nuxt to fix the issue until the new version of Vue is out.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8122\">#c8122\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3231],{"name":3183,"color":3184},4312,"Hotfix for double escaping static class","2023-01-18T20:04:04Z","https://github.com/nuxt/nuxt/issues/4312",0.6849527,{"labels":3238,"number":3242,"owner":3143,"repository":3143,"state":3171,"title":3243,"updated_at":3244,"url":3245,"score":3246},[3239,3240,3241],{"name":3179,"color":3180},{"name":3140,"color":3141},{"name":3183,"color":3184},10165,"Nuxt is removing universal selectors from css","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10165",0.69028276,{"description":3248,"labels":3249,"number":3251,"owner":3143,"repository":3143,"state":3171,"title":3252,"updated_at":3253,"url":3254,"score":3255},"Anyone of you can use /deep/ selector in scss tag?\r\nIn pure Vue app, we can use /deep/ selector in scss style tag like this:\r\n\r\n\u003Cstyle>\r\n.foo /deep/ .bar {\r\n background-color: red;\r\n}\r\n\u003C/style>\r\n\r\nand this piece of style will be compiled to .foo .bar { background-color: red; }\r\n\r\nHowever, for nuxt project, the style will finally be like .foo /deep/ .bar { background-color: red; }. As a result, IE 11 cannot recognize this style…\r\n\r\nAny solution there? thanks\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8759\">#c8759\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3250],{"name":3183,"color":3184},5139,"/deep/ selector is not working in nuxt project (for IE11)","2023-01-18T20:10:40Z","https://github.com/nuxt/nuxt/issues/5139",0.6908242,{"labels":3257,"number":3260,"owner":3143,"repository":3143,"state":3171,"title":3261,"updated_at":3262,"url":3263,"score":3264},[3258,3259],{"name":3220,"color":3221},{"name":3183,"color":3184},7851,"Customize webpack to obfuscate CSS classes","2023-01-22T15:52:36Z","https://github.com/nuxt/nuxt/issues/7851",0.6972959,["Reactive",3266],{},["Set"],["ShallowReactive",3269],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fX5fA7mxjEEiyDEcN3wQp6CT23qNhCz20IKGJoD3qTPY":-1},"/nuxt/nuxt/2110"]