feat: bump deps and avoid using @import

.stylelintrc.yml

@@ -14,6 +14,8 @@ rules:
   declaration-block-no-redundant-longhand-properties: true
   media-feature-range-notation: prefix
   no-descending-specificity: null
+  # workaround for mixed-declarations
+  no-duplicate-selectors: null
 
 overrides:
   - files:

docs/package.json

@@ -35,7 +35,7 @@
     "@vuepress/theme-default": "workspace:*",
     "katex": "0.16.11",
     "mathjax-full": "3.2.2",
-    "sass-embedded": "1.79.5",
+    "sass-embedded": "1.80.3",
     "sass-loader": "^16.0.2",
     "vue": "^3.5.12",
     "vuepress": "2.0.0-rc.18"

docs/plugins/development/palette.md

@@ -56,7 +56,7 @@ Import the plugin's palette file where your theme needs to use the corresponding
 
 <style lang="scss">
 /* import variables from the plugin's palette file */
-@import '@vuepress/plugin-palette/palette';
+@use '@vuepress/plugin-palette/palette' as *;
 
 /* set default value for variables */
 $color: red !default;

docs/zh/plugins/development/palette.md

@@ -56,7 +56,7 @@ export default {
 
 <style lang="scss">
 /* 从该插件的调色板中引入变量 */
-@import '@vuepress/plugin-palette/palette';
+@use '@vuepress/plugin-palette/palette' as *;
 
 /* 设置变量的默认值 */
 $color: red !default;

e2e/docs/.vuepress/components/ArticleList.vue

@@ -65,7 +65,10 @@ defineProps<{
 
 .article-wrapper {
   @include mixins.content-wrapper;
-  text-align: center;
+
+  & {
+    text-align: center;
+  }
 }
 
 .article {

e2e/docs/.vuepress/layouts/Category.vue

@@ -41,9 +41,11 @@ const categoryMap = useBlogCategory<ArticleInfo>('category')
 .category-wrapper {
   @include mixins.content-wrapper;
 
-  padding-top: 1rem !important;
-  padding-bottom: 0 !important;
-  font-size: 14px;
+  & {
+    padding-top: 1rem !important;
+    padding-bottom: 0 !important;
+    font-size: 14px;
+  }
 
   a {
     color: inherit;

e2e/docs/.vuepress/layouts/Tag.vue

@@ -41,9 +41,11 @@ const tagMap = useBlogCategory<ArticleInfo>('tag')
 .tag-wrapper {
   @include mixins.content-wrapper;
 
-  padding-top: 1rem !important;
-  padding-bottom: 0 !important;
-  font-size: 14px;
+  & {
+    padding-top: 1rem !important;
+    padding-bottom: 0 !important;
+    font-size: 14px;
+  }
 
   a {
     color: inherit;

e2e/package.json

@@ -29,12 +29,12 @@
     "@vuepress/plugin-theme-data": "workspace:*",
     "@vuepress/plugin-watermark": "workspace:*",
     "@vuepress/theme-default": "workspace:*",
-    "sass-embedded": "1.79.5",
+    "sass-embedded": "1.80.3",
     "sass-loader": "^16.0.2",
     "vue": "^3.5.12",
     "vuepress": "2.0.0-rc.18"
   },
   "devDependencies": {
-    "@playwright/test": "^1.48.0"
+    "@playwright/test": "^1.48.1"
   }
 }

package.json

@@ -33,18 +33,18 @@
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@lerna-lite/cli": "^3.9.3",
-    "@lerna-lite/publish": "^3.9.3",
-    "@rollup/plugin-commonjs": "^28.0.0",
+    "@lerna-lite/cli": "^3.10.0",
+    "@lerna-lite/publish": "^3.10.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.7.7",
     "@types/webpack-env": "^1.18.5",
-    "@vitest/coverage-istanbul": "^2.1.2",
+    "@vitest/coverage-istanbul": "^2.1.3",
     "conventional-changelog-cli": "^5.0.0",
     "cpx2": "^8.0.0",
     "cross-env": "^7.0.3",
-    "eslint": "^9.12.0",
-    "eslint-config-vuepress": "^5.2.0",
+    "eslint": "^9.13.0",
+    "eslint-config-vuepress": "^5.2.1",
     "http-server": "^14.1.1",
     "husky": "^9.1.6",
     "nano-staged": "^0.8.0",
@@ -56,19 +56,19 @@
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-resolve-shebang": "^1.0.1",
-    "sass-embedded": "1.79.5",
+    "sass-embedded": "^1.80.3",
     "sort-package-json": "^2.10.1",
     "stylelint": "^16.10.0",
-    "stylelint-config-hope": "^7.0.2",
+    "stylelint-config-hope": "^7.0.4",
     "stylelint-config-html": "^1.1.0",
-    "tsconfig-vuepress": "^5.2.0",
+    "tsconfig-vuepress": "^5.2.1",
     "tsx": "^4.19.1",
     "typescript": "^5.6.3",
-    "vite": "~5.4.8",
-    "vitest": "^2.1.2",
+    "vite": "~5.4.9",
+    "vitest": "^2.1.3",
     "vuepress": "2.0.0-rc.18"
   },
-  "packageManager": "pnpm@9.12.1",
+  "packageManager": "pnpm@9.12.2",
   "engines": {
     "node": ">=18.19.0"
   }

plugins/development/plugin-git/package.json

@@ -35,7 +35,7 @@
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
   },
   "dependencies": {
-    "execa": "^9.4.0"
+    "execa": "^9.4.1"
   },
   "peerDependencies": {
     "vuepress": "2.0.0-rc.18"

plugins/development/plugin-palette/src/node/palettePlugin.ts

@@ -58,19 +58,21 @@ export const palettePlugin = ({
   }),
 
   extendsBundlerOptions: (bundlerOptions: unknown, app): void => {
-    // switch to modern api for vite
-    addViteConfig(bundlerOptions, app, {
-      css: {
-        preprocessorOptions: {
-          sass: {
-            api: 'modern',
-          },
-          scss: {
-            api: 'modern',
+    if (preset === 'sass') {
+      // switch to modern api for vite
+      addViteConfig(bundlerOptions, app, {
+        css: {
+          preprocessorOptions: {
+            sass: {
+              api: 'modern',
+            },
+            scss: {
+              api: 'modern',
+            },
           },
         },
-      },
-    })
+      })
+    }
   },
 
   onPrepared: async (app) => {

plugins/development/plugin-sass-palette/package.json

@@ -55,9 +55,9 @@
     "@vuepress/bundler-webpack": "2.0.0-rc.18"
   },
   "peerDependencies": {
-    "sass": "^1.79.2",
-    "sass-embedded": "^1.79.2",
-    "sass-loader": "^16.0.1",
+    "sass": "^1.80.3",
+    "sass-embedded": "^1.80.3",
+    "sass-loader": "^16.0.2",
     "vuepress": "2.0.0-rc.18"
   },
   "peerDependenciesMeta": {

plugins/development/plugin-sass-palette/src/node/sassPalettePlugin.ts

@@ -1,4 +1,4 @@
-import { addViteConfig } from '@vuepress/helper'
+import { addViteConfig, chainWebpack } from '@vuepress/helper'
 import { watch } from 'chokidar'
 import type { PluginFunction } from 'vuepress/core'
 import { getDirname, path } from 'vuepress/utils'
@@ -68,19 +68,39 @@ export const sassPalettePlugin =
       },
 
       extendsBundlerOptions: (bundlerOptions: unknown): void => {
-        // switch to modern api for vite
+        // switch to modern api and silent import deprecation for vite
         addViteConfig(bundlerOptions, app, {
           css: {
             preprocessorOptions: {
               sass: {
                 api: 'modern',
+                silenceDeprecations: ['import'],
               },
               scss: {
                 api: 'modern',
+                silenceDeprecations: ['import'],
               },
             },
           },
         })
+        // silent import deprecation for webpack
+        chainWebpack(bundlerOptions, app, (webpackOptions) => {
+          webpackOptions.module
+            .rule('scss')
+            .use('sass-loader')
+            .tap((loaderOptions) => ({
+              ...loaderOptions,
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              sassOptions: {
+                ...loaderOptions.sassOptions,
+                silenceDeprecations: [
+                  'import',
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+                  ...(loaderOptions.sassOptions?.silenceDeprecations ?? []),
+                ],
+              },
+            }))
+        })
         injectScssConfigModule(bundlerOptions, app, id)
       },
 

plugins/development/plugin-theme-data/package.json

@@ -37,7 +37,7 @@
     "copy": "cpx \"src/**/*.d.ts\" lib"
   },
   "dependencies": {
-    "@vue/devtools-api": "^7.4.6",
+    "@vue/devtools-api": "^7.5.2",
     "vue": "^3.5.12"
   },
   "peerDependencies": {

plugins/features/plugin-back-to-top/src/client/styles/back-to-top.scss

@@ -38,11 +38,8 @@
 
     background: var(--back-to-top-c-icon);
 
-    -webkit-mask-image: var(--back-to-top-icon);
     mask-image: var(--back-to-top-icon);
-    -webkit-mask-position: 50%;
     mask-position: 50%;
-    -webkit-mask-size: cover;
     mask-size: cover;
   }
 }

plugins/features/plugin-copy-code/src/client/styles/copy-code.scss

@@ -36,13 +36,9 @@
 
     font-size: 1.25rem;
 
-    -webkit-mask-image: var(--code-copy-icon);
     mask-image: var(--code-copy-icon);
-    -webkit-mask-position: 50%;
     mask-position: 50%;
-    -webkit-mask-size: 1em;
     mask-size: 1em;
-    -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
   }
 
@@ -58,7 +54,6 @@
 
   &.copied {
     &::before {
-      -webkit-mask-image: var(--code-copied-icon);
       mask-image: var(--code-copied-icon);
     }
 

plugins/features/plugin-medium-zoom/src/client/styles/medium-zoom.css

@@ -9,6 +9,7 @@
   z-index: calc(var(--medium-zoom-z-index) + 1);
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .medium-zoom--opened .medium-zoom-overlay {
   opacity: var(--medium-zoom-opacity);
 }

plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss

@@ -8,6 +8,8 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-coldark-cold.css
  */
 
+/* stylelint-disable selector-max-class */
+
 $code-text-color: #111b27;
 $code-bg-color: #e3eaf2;
 

plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss

@@ -8,6 +8,8 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-coldark-dark.css
  */
 
+/* stylelint-disable selector-max-class */
+
 $code-text-color: #e3eaf2;
 $code-bg-color: #111b27;
 

plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss

@@ -4,6 +4,8 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css
  */
 
+/* stylelint-disable selector-max-class */
+
 $code-text-color: #abb2bf;
 $code-bg-color: #282c34;
 

plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss

@@ -4,6 +4,8 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css
  */
 
+/* stylelint-disable selector-max-class */
+
 $code-text-color: #383a42;
 $code-bg-color: #ecf4fa;
 

plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss

@@ -6,6 +6,8 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-shades-of-purple.css
  */
 
+/* stylelint-disable selector-max-class */
+
 $code-text-color: #9efeff;
 $code-bg-color: #1e1e3f;
 

plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss

@@ -2,6 +2,8 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vsc-dark-plus.css
  */
 
+/* stylelint-disable selector-max-class */
+
 $code-text-color: #d4d4d4;
 $code-bg-color: #1e1e1e;
 

plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss

@@ -5,6 +5,8 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-forest.css
  */
 
+/* stylelint-disable selector-max-class */
+
 $code-text-color: #76d9e6;
 $code-bg-color: #2a2a2a;