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.