♻️ hhttps://github.com/siyuan-note/siyuan/pull/15114

app/pnpm-lock.yaml

@@ -34,8 +34,8 @@ importers:
         specifier: ^4.0.0
         version: 4.0.0(webpack@5.99.5)
       css-loader:
-        specifier: ^6.7.1
+        specifier: ^7.1.2
-        version: 6.11.0(webpack@5.99.5)
+        version: 7.1.2(webpack@5.99.5)
       dayjs:
         specifier: ^1.11.5
         version: 1.11.13
@@ -73,8 +73,8 @@ importers:
         specifier: ^2.3.2
         version: 2.3.2
       mini-css-extract-plugin:
-        specifier: 2.7.6
+        specifier: 2.9.2
-        version: 2.7.6(webpack@5.99.5)
+        version: 2.9.2(webpack@5.99.5)
       path-browserify:
         specifier: ^1.0.1
         version: 1.0.1
@@ -82,11 +82,11 @@ importers:
         specifier: ^2.1.2
         version: 2.1.2
       sass:
-        specifier: ^1.53.0
+        specifier: ^1.89.2
-        version: 1.86.3
+        version: 1.89.2
       sass-loader:
-        specifier: ^12.6.0
+        specifier: ^16.0.5
-        version: 12.6.0(sass@1.86.3)(webpack@5.99.5)
+        version: 16.0.5(sass@1.89.2)(webpack@5.99.5)
       typescript:
         specifier: ^4.7.4
         version: 4.9.5
@@ -131,8 +131,8 @@ packages:
     resolution: {integrity: sha512-Qkzpg2s9GnVV2I2BjRksUi43U5e6+zaQMcjoJy0C+C5oxaKl+fmckGDQFtRpZpZV0NQekuZZ+tGz7EA9TVnQtQ==}
     engines: {node: '>=12'}
 
-  '@electron/node-gyp@https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2':
+  '@electron/node-gyp@git+https://git@github.com:electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2':
-    resolution: {tarball: https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2}
+    resolution: {commit: 06b29aafb7708acef8b3669835c8a7857ebc92d2, repo: git@github.com:electron/node-gyp.git, type: git}
     version: 10.2.0-electron.1
     engines: {node: '>=12.13.0'}
     hasBin: true
@@ -451,42 +451,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -1038,12 +1032,12 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  css-loader@6.11.0:
+  css-loader@7.1.2:
-    resolution: {integrity: sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==}
+    resolution: {integrity: sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==}
-    engines: {node: '>= 12.13.0'}
+    engines: {node: '>= 18.12.0'}
     peerDependencies:
       '@rspack/core': 0.x || 1.x
-      webpack: ^5.0.0
+      webpack: ^5.27.0
     peerDependenciesMeta:
       '@rspack/core':
         optional: true
@@ -1793,10 +1787,6 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
-  klona@2.0.6:
-    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
-    engines: {node: '>= 8'}
-
   lazy-val@1.0.5:
     resolution: {integrity: sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==}
 
@@ -1900,8 +1890,8 @@ packages:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
 
-  mini-css-extract-plugin@2.7.6:
+  mini-css-extract-plugin@2.9.2:
-    resolution: {integrity: sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==}
+    resolution: {integrity: sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
       webpack: ^5.0.0
@@ -2348,17 +2338,17 @@ packages:
   sanitize-filename@1.6.3:
     resolution: {integrity: sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==}
 
-  sass-loader@12.6.0:
+  sass-loader@16.0.5:
-    resolution: {integrity: sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==}
+    resolution: {integrity: sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==}
-    engines: {node: '>= 12.13.0'}
+    engines: {node: '>= 18.12.0'}
     peerDependencies:
-      fibers: '>= 3.1.0'
+      '@rspack/core': 0.x || 1.x
-      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
       sass: ^1.3.0
       sass-embedded: '*'
       webpack: ^5.0.0
     peerDependenciesMeta:
-      fibers:
+      '@rspack/core':
         optional: true
       node-sass:
         optional: true
@@ -2366,9 +2356,11 @@ packages:
         optional: true
       sass-embedded:
         optional: true
+      webpack:
+        optional: true
 
-  sass@1.86.3:
+  sass@1.89.2:
-    resolution: {integrity: sha512-iGtg8kus4GrsGLRDLRBRHY9dNVA78ZaS7xr01cWnS7PEMQyFtTqBiyCrfpTYTZXRWM94akzckYjh8oADfFNTzw==}
+    resolution: {integrity: sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -2803,7 +2795,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@electron/node-gyp@https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2':
+  '@electron/node-gyp@git+https://git@github.com:electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2':
     dependencies:
       env-paths: 2.2.1
       exponential-backoff: 3.1.2
@@ -2840,7 +2832,7 @@ snapshots:
 
   '@electron/rebuild@3.7.0':
     dependencies:
-      '@electron/node-gyp': https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2
+      '@electron/node-gyp': git+https://git@github.com:electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2
       '@malept/cross-spawn-promise': 2.0.0
       chalk: 4.1.2
       debug: 4.4.0
@@ -3813,7 +3805,7 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  css-loader@6.11.0(webpack@5.99.5):
+  css-loader@7.1.2(webpack@5.99.5):
     dependencies:
       icss-utils: 5.1.0(postcss@8.5.3)
       postcss: 8.5.3
@@ -4707,8 +4699,6 @@ snapshots:
 
   kind-of@6.0.3: {}
 
-  klona@2.0.6: {}
-
   lazy-val@1.0.5: {}
 
   levn@0.4.1:
@@ -4813,9 +4803,10 @@ snapshots:
 
   mimic-response@3.1.0: {}
 
-  mini-css-extract-plugin@2.7.6(webpack@5.99.5):
+  mini-css-extract-plugin@2.9.2(webpack@5.99.5):
     dependencies:
       schema-utils: 4.3.0
+      tapable: 2.2.1
       webpack: 5.99.5(webpack-cli@4.10.0)
 
   minimatch@10.0.1:
@@ -5220,15 +5211,14 @@ snapshots:
     dependencies:
       truncate-utf8-bytes: 1.0.2
 
-  sass-loader@12.6.0(sass@1.86.3)(webpack@5.99.5):
+  sass-loader@16.0.5(sass@1.89.2)(webpack@5.99.5):
     dependencies:
-      klona: 2.0.6
       neo-async: 2.6.2
-      webpack: 5.99.5(webpack-cli@4.10.0)
     optionalDependencies:
-      sass: 1.86.3
+      sass: 1.89.2
+      webpack: 5.99.5(webpack-cli@4.10.0)
 
-  sass@1.86.3:
+  sass@1.89.2:
     dependencies:
       chokidar: 4.0.3
       immutable: 5.1.1

app/src/assets/scss/base.scss

@@ -34,5 +34,5 @@
 @use "business/av" as *;
 @use "business/emojis" as *;
 @use "component/svg" as *;
-@use "base-styles" as *;
+@use "main/main" as *;
 @use "util/responsive" as *; // 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056

app/src/assets/scss/business/_card.scss

@@ -2,7 +2,7 @@
 
 .card {
   &__main {
-    @extend %fn__flex-column;
+    @extend .fn__flex-column;
     box-sizing: border-box;
     max-height: 100%;
     background-color: var(--b3-theme-surface);

app/src/assets/scss/business/_search.scss

@@ -81,7 +81,7 @@
   }
 
   &__history-icon {
-    @extend %fn__a;
+    @extend .fn__a;
     height: 42px;
     width: 42px;
     display: block;
@@ -144,7 +144,7 @@
   }
 
   &__rmpath {
-    @extend %b3-form__icon-clear;
+    @extend .b3-form__icon-clear;
   }
 
   &__tip {

app/src/assets/scss/component/_form.scss

@@ -1,17 +1,3 @@
-%b3-form__icon-clear {
-  position: absolute;
-  height: 18px;
-  width: 16px;
-  opacity: .68;
-  transition: var(--b3-transition);
-  right: 0;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
 .b3-form {
   &__space {
     margin: 16px 24px;
@@ -61,7 +47,17 @@
   }
 
   &__icon-clear {
-    @extend %b3-form__icon-clear;
+    position: absolute;
+    height: 18px;
+    width: 16px;
+    opacity: .68;
+    transition: var(--b3-transition);
+    right: 0;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   // repo password & av description

app/src/assets/scss/component/_list.scss

@@ -1,32 +1,5 @@
 @use "../util/mixin";
 
-%b3-list-item__icon {
-  svg, img {
-    height: 16px;
-    width: 16px;
-    color: var(--b3-theme-on-surface);
-  }
-
-  text-align: center;
-  font-size: 14px;
-  font-family: var(--b3-font-family-emoji);
-  margin-right: 4px;
-  line-height: 22px;
-  transition: var(--b3-transition);
-  height: 22px;
-  padding: 0 4px;
-  flex-shrink: 0;
-  border-radius: var(--b3-border-radius);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    color: var(--b3-theme-on-background);
-    background-color: var(--b3-list-icon-hover);
-  }
-}
-
 .b3-list {
   mark {
     background-color: var(--b3-protyle-inline-mark-background);
@@ -185,7 +158,30 @@
     }
 
     &__icon {
-      @extend %b3-list-item__icon;
+      svg, img {
+        height: 16px;
+        width: 16px;
+        color: var(--b3-theme-on-surface);
+      }
+
+      text-align: center;
+      font-size: 14px;
+      font-family: var(--b3-font-family-emoji);
+      margin-right: 4px;
+      line-height: 22px;
+      transition: var(--b3-transition);
+      height: 22px;
+      padding: 0 4px;
+      flex-shrink: 0;
+      border-radius: var(--b3-border-radius);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: var(--b3-theme-on-background);
+        background-color: var(--b3-list-icon-hover);
+      }
     }
 
     &__hinttext {

app/src/assets/scss/component/_menu.scss

@@ -312,7 +312,7 @@
   }
 
   &__avemoji {
-    @extend %b3-list-item__icon;
+    @extend .b3-list-item__icon;
     align-self: center;
     margin-left: -4px;
     font-size: 14px;

app/src/assets/scss/component/_text-field.scss

@@ -1,4 +1,4 @@
-%b3-text-field {
+.b3-text-field {
   border: 0;
   border-radius: var(--b3-border-radius);
   box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
@@ -33,7 +33,3 @@
     box-shadow: 0 0 0;
   }
 }
-
-.b3-text-field {
-  @extend %b3-text-field;
-}

app/src/assets/scss/component/_typography.scss

@@ -263,7 +263,7 @@
 
   code:not(.hljs),
   span[data-type~="code"] {
-    @extend %fn__code;
+    @extend .fn__code;
     tab-size: 4;
   }
 

app/src/assets/scss/main/_main.scss

@@ -1,5 +1,3 @@
-@use "util/mixin" as *;
-
 /*
 .status: 2
 

app/src/assets/scss/main/_mobile.scss

@@ -1,5 +1,5 @@
-@use "util/mixin";
+@use "../util/mixin";
-@use "util/function";
+@use "../util/function";
 
 .block__popover {
   width: 80vw;
@@ -462,7 +462,7 @@
   width: 100%;
   box-sizing: border-box;
   background-color: var(--b3-theme-background);
-  @extend %fn__ellipsis;
+  @extend .fn__ellipsis;
   z-index: 2;
 }
 

app/src/assets/scss/mobile.scss

@@ -28,5 +28,5 @@
 @use "business/search" as *;
 @use "business/emojis" as *;
 @use "component/svg" as *;
-@use "mobile-styles" as *;
+@use "main/mobile" as *;
 @use "util/responsive" as *;

app/src/assets/scss/pickr/pcr.scss

@@ -6,7 +6,7 @@
   border-radius: var(--b3-border-radius);
 
   .pcr-interaction .pcr-result {
-    @extend %b3-text-field;
+    @extend .b3-text-field;
     background: transparent;
     font-size: 12px;
   }

app/src/assets/scss/util/_function.scss

@@ -1,46 +1,13 @@
 @use "mixin";
 
-%fn {
-  &__ellipsis {
-    @include mixin.text-clamp(1);
-    display: block; // 集市挂件名称过长遮挡星标 https://github.com/siyuan-note/siyuan/issues/4782
-  }
-
-  &__flex-column {
-    min-height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__a {
-    color: var(--b3-theme-on-surface);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--b3-theme-on-background);
-    }
-  }
-
-  &__code {
-    padding: .2em .4em;
-    margin: 0;
-    font-size: 85%;
-    border-radius: var(--b3-border-radius);
-    font-family: var(--b3-font-family-code);
-    word-break: break-word;
-    background-size: 20px 20px;
-    white-space: pre-wrap;
-    background-color: var(--b3-protyle-code-background);
-  }
-}
-
 .fn {
   &__hidescrollbar::-webkit-scrollbar {
     display: none;
   }
 
   &__ellipsis {
-    @extend %fn__ellipsis;
+    @include mixin.text-clamp(1);
+    display: block; // 集市挂件名称过长遮挡星标 https://github.com/siyuan-note/siyuan/issues/4782
   }
 
   &__space {
@@ -87,7 +54,9 @@
     }
 
     &-column {
-      @extend %fn__flex-column;
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
     }
 
     &-shrink {
@@ -116,7 +85,12 @@
   }
 
   &__a {
-    @extend %fn__a;
+    color: var(--b3-theme-on-surface);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--b3-theme-on-background);
+    }
   }
 
   &__block {
@@ -153,7 +127,15 @@
   }
 
   &__code {
-    @extend %fn__code;
+    padding: .2em .4em;
+    margin: 0;
+    font-size: 85%;
+    border-radius: var(--b3-border-radius);
+    font-family: var(--b3-font-family-code);
+    word-break: break-word;
+    background-size: 20px 20px;
+    white-space: pre-wrap;
+    background-color: var(--b3-protyle-code-background);
   }
 
   &__kbd {