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>",[2974,2977],{"name":2975,"color":2976},"enhancement","8DEF37",{"name":2938,"color":2939},672,"Class on \u003Cnuxt /> tag","2023-01-18T15:39:39Z","https://github.com/nuxt/nuxt/issues/672",0.6836097,{"description":2984,"labels":2985,"number":2987,"owner":2923,"repository":2923,"state":2924,"title":2988,"updated_at":2989,"url":2990,"score":2991},"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>",[2986],{"name":2938,"color":2939},4312,"Hotfix for double escaping static class","2023-01-18T20:04:04Z","https://github.com/nuxt/nuxt/issues/4312",0.6849527,{"labels":2993,"number":2997,"owner":2923,"repository":2923,"state":2924,"title":2998,"updated_at":2999,"url":3000,"score":3001},[2994,2995,2996],{"name":2932,"color":2933},{"name":2935,"color":2936},{"name":2938,"color":2939},10165,"Nuxt is removing universal selectors from css","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10165",0.69028276,{"description":3003,"labels":3004,"number":3006,"owner":2923,"repository":2923,"state":2924,"title":3007,"updated_at":3008,"url":3009,"score":3010},"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>",[3005],{"name":2938,"color":2939},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":3012,"number":3015,"owner":2923,"repository":2923,"state":2924,"title":3016,"updated_at":3017,"url":3018,"score":3019},[3013,3014],{"name":2975,"color":2976},{"name":2938,"color":2939},7851,"Customize webpack to obfuscate CSS classes","2023-01-22T15:52:36Z","https://github.com/nuxt/nuxt/issues/7851",0.6972959,{"description":3021,"labels":3022,"number":3024,"owner":2923,"repository":2923,"state":2924,"title":3025,"updated_at":3026,"url":3027,"score":3028},"Given a template tag that uses a bound style attribute `:style=\"styles\"`, the styles are not properly updated after the server side rendering. Importantly, the computed properties being used in the style tag *are* working, but they simply don't get swapped into the style attribute.\r\n\r\nHere's a reproduction:\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"example-bug\" :style=\"styles\">\r\n This container should be {{ size }}px wide with a {{ background }} background.\r\n \u003Ccode>\r\n {{ styles }}\r\n \u003C/code>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n data () {\r\n return {\r\n size: 300\r\n }\r\n },\r\n computed: {\r\n styles () {\r\n return {\r\n width: `${this.size}px`,\r\n backgroundColor: this.background\r\n }\r\n },\r\n background () {\r\n if (this.size \u003C 100) {\r\n return 'red'\r\n } else if (this.size >= 100 && this.size \u003C 200) {\r\n return 'blue'\r\n } else if (this.size >= 200 && this.size \u003C 300) {\r\n return 'green'\r\n } else if (this.size >= 200 && this.size \u003C 300) {\r\n return 'salmon'\r\n } else if (this.size >= 300 && this.size \u003C 400) {\r\n return 'silver'\r\n } else if (this.size >= 400 && this.size \u003C 500) {\r\n return 'gold'\r\n } else {\r\n return 'yellow'\r\n }\r\n }\r\n },\r\n methods: {\r\n resize () {\r\n this.size = window.innerWidth\r\n }\r\n },\r\n created () {\r\n if (typeof window !== 'undefined') {\r\n window.addEventListener('resize', this.resize)\r\n this.resize()\r\n }\r\n }\r\n}\r\n\u003C/script>\r\n\r\n\u003Cstyle lang=\"scss\">\r\n.example-bug {\r\n width: 300px;\r\n background-color: red;\r\n position: absolute;\r\n height: 100vh\r\n}\r\ncode {\r\n font-size: 12px;\r\n display: block;\r\n padding-top: 1em;\r\n}\r\n\u003C/style>\r\n```\r\n\r\nHere is an example of the above ([full video here](https://github.com/journeygroup/nuxt-style-bug/blob/master/nuxt-bug-video.mov?raw=true)):\r\n\r\n\r\nAnd here is a fresh install of nuxt with the above code: https://github.com/journeygroup/nuxt-style-bug\r\n\r\nSomehow the data output in the `\u003Ccode>{{ styles }}\u003C/code>` block is correct, but the same exact property output in the `:style=\"styles\"` attribute is not correct. Also, certain changes in the property will trigger the styles to begin working properly. In this particular case, if I make the window small and the 'color' changes (again) it \"snap out of it\" and start working just fine.\r\n\r\nInterestingly, this does not occur when a page has been navigated to with vue-router and the page was not rendered server-side.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c517\">#c517\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3023],{"name":2938,"color":2939},599,"Inline styles do not update properly when SSR","2023-01-18T15:39:32Z","https://github.com/nuxt/nuxt/issues/599",0.6985836,["Reactive",3030],{},["Set"],["ShallowReactive",3033],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fX5fA7mxjEEiyDEcN3wQp6CT23qNhCz20IKGJoD3qTPY":-1},"/nuxt/nuxt/2110"]