chore: upgrade vue, vite and sass

package.json

@@ -96,9 +96,9 @@
     "@types/yargs": "^15.0.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-vue": "^5.1.2",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "@vue/compiler-sfc": "^3.4.35",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vue/compiler-sfc": "^3.5.13",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^13.0.0",
     "autoprefixer": "^10.4.16",
@@ -138,7 +138,7 @@
     "parse-author": "^2.0.0",
     "path-browserify": "^1.0.1",
     "prismjs": "^1.29.0",
-    "sass": "^1.35.1",
+    "sass": "^1.83.0",
     "socket.io-client": "^4.7.2",
     "sortablejs": "^1.13.0",
     "ts-jest": "^29.1.1",
@@ -148,9 +148,9 @@
     "typescript": "^5.5.4",
     "utility-types": "^3.10.0",
     "viewerjs": "^1.11.6",
-    "vite": "^5.3.6",
-    "vue": "^3.4.35",
-    "vue-tsc": "^2.0.29",
+    "vite": "^6.0.6",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0",
     "xterm": "^4.18.0",
     "xterm-addon-fit": "^0.5.0",
     "xterm-theme": "^1.1.0"

src/renderer/components/ContextMenu.vue

@@ -160,7 +160,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '@fe/styles/mixins.scss';
+@use '@fe/styles/mixins.scss' as *;
 
 .menu {
   list-style: none;

src/renderer/components/DefaultPreviewerRender.ce.vue

@@ -306,7 +306,7 @@ watch(fileUri, () => {
 </style>
 
 <style lang="scss">
-@import '@fe/styles/mixins.scss';
+@use '@fe/styles/mixins.scss' as *;
 
 body.find-in-preview-highlight ::selection {
   background-color: #ffeb3b !important;

src/renderer/components/GroupTabs.vue

@@ -28,7 +28,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '@fe/styles/mixins.scss';
+@use '@fe/styles/mixins.scss' as *;
 
 .tabs {
   display: flex;

src/renderer/components/KeyboardShortcuts.vue

@@ -378,7 +378,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '@fe/styles/mixins.scss';
+@use '@fe/styles/mixins.scss' as *;
 
 .wrapper {
   width: 90vw;

src/renderer/components/MonacoEditor.vue

@@ -110,7 +110,7 @@ export default defineComponent({
 </style>
 
 <style lang="scss">
-@import '@fe/styles/mixins.scss';
+@use '@fe/styles/mixins.scss' as *;
 
 .monaco-editor .inputarea {
   display: unset;

src/renderer/components/SearchPanel.vue

@@ -594,7 +594,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '@fe/styles/mixins.scss';
+@use '@fe/styles/mixins.scss' as *;
 
 .search-panel-wrapper {
   background: rgba(0, 0, 0, 0.2);

src/renderer/others/prism-style.scss

@@ -1,4 +1,5 @@
-@import '@fe/styles/mixins.scss';
+@use 'sass:meta';
+@use '@fe/styles/mixins.scss' as *;
 @import 'prismjs/themes/prism.css';
 
 .token.operator,
@@ -20,5 +21,5 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
     text-shadow: none;
   }
 
-  @import 'prismjs/themes/prism-tomorrow';
+  @include meta.load-css('prismjs/themes/prism-tomorrow');
 }

src/renderer/others/semver.js

@@ -2371,4 +2371,3 @@
  export {
    semver_default as default
  };
- //# sourceMappingURL=semver.js.map

src/renderer/styles/index.scss

@@ -1,9 +1,14 @@
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:math' as *;
+@use './mixins.scss' as *;
+@use './dark.scss' as dark;
+@use './light.scss' as light;
+
 @import 'normalize.css' layer;
 
-@import './mixins.scss';
-
 @function hex2rgb($hex) {
-  @return red($hex), green($hex), blue($hex);
+  @return color.channel($hex, 'red', $space: rgb), color.channel($hex, 'green', $space: rgb), color.channel($hex, 'blue', $space: rgb);
 }
 
 @font-face {
@@ -18,8 +23,8 @@
   --g-foreground-color: #{$foreground};
   --g-foreground-color-rgb: #{hex2rgb($foreground)};
   @for $i from 0 through 100 {
-    --g-color-#{$i}: #{mix($background, $foreground, $i * 1%)};
-    --g-color-#{$i}-rgb: #{hex2rgb(mix($background, $foreground, $i * 1%))};
+    --g-color-#{$i}: #{color.mix($background, $foreground, $i * 1%)};
+    --g-color-#{$i}-rgb: #{hex2rgb(color.mix($background, $foreground, $i * 1%))};
   }
 
   --selection-color: rgba(86, 155, 214, 0.38);
@@ -42,13 +47,13 @@
 }
 
 html[app-theme=light]:root, :root {
-  @import './light.scss';
-  @include root-vars($g-background-color, $g-foreground-color);
+  @include meta.load-css('./light.scss');
+  @include root-vars(light.$g-background-color, light.$g-foreground-color);
 }
 
 @include dark-theme {
-  @import './dark.scss';
-  @include root-vars($g-background-color, $g-foreground-color);
+  @include meta.load-css('./dark.scss');
+  @include root-vars(dark.$g-background-color, dark.$g-foreground-color);
 
   --g-color-backdrop: #{rgba(var(--g-color-88-rgb), 0.9)};
 }