deprecation warnings on latest vue and vite

[ta-soft]

Happy to provide further info, but if you update everything you should see the below

VITE v5.4.3 ready in 362 ms

➜ Local: http://127.0.0.1:5173/ ➜ press h + enter to show help Deprecation Warning: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

╷

109 │ ┌ .menu-icon { 110 │ │ color: $icon-mini-active-color-white; 111 │ │ } │ └─── nested rule ... │ 113 │ color: $text-color-none-hover-white; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration ╵ node_modules/vue-awesome-sidebar/src/scss/themes/white-theme.scss 113:7 @import node_modules/vue-awesome-sidebar/src/scss/vue-awesome-sidebar.scss 4:9 @import src/App.vue 3:9 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

╷

127 │ ┌ &.activeClass::before { 128 │ │ background-color: $text-active-color-white; 129 │ │ } │ └─── nested rule 130 │ overflow: hidden; │ ^^^^^^^^^^^^^^^^ declaration ╵ node_modules/vue-awesome-sidebar/src/scss/themes/white-theme.scss 130:7 @import node_modules/vue-awesome-sidebar/src/scss/vue-awesome-sidebar.scss 4:9 @import src/App.vue 3:9 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

╷

127 │ ┌ &.activeClass::before { 128 │ │ background-color: $text-active-color-white; 129 │ │ } │ └─── nested rule ... │ 133 │ color: $text-color-none-hover-white; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration ╵ node_modules/vue-awesome-sidebar/src/scss/themes/white-theme.scss 133:7 @import node_modules/vue-awesome-sidebar/src/scss/vue-awesome-sidebar.scss 4:9 @import src/App.vue 3:9 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

╷

106 │ ┌ .menu-icon { 107 │ │ color: $icon-mini-active-color-dark; 108 │ │ } │ └─── nested rule ... │ 110 │ color: $text-color-none-hover-dark; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration ╵ node_modules/vue-awesome-sidebar/src/scss/themes/dark-theme.scss 110:7 @import node_modules/vue-awesome-sidebar/src/scss/vue-awesome-sidebar.scss 5:9 @import src/App.vue 3:9 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

╷

123 │ ┌ &.activeClass::before { 124 │ │ background-color: $text-active-color-dark; 125 │ │ } │ └─── nested rule 126 │ overflow: hidden; │ ^^^^^^^^^^^^^^^^ declaration ╵ node_modules/vue-awesome-sidebar/src/scss/themes/dark-theme.scss 126:7 @import node_modules/vue-awesome-sidebar/src/scss/vue-awesome-sidebar.scss 5:9 @import src/App.vue 3:9 root stylesheet

Warning: 4 repetitive deprecation warnings omitted.