feat!: migrate to userStyle option

Author: Mister-Hope

docs/plugins/development/palette.md

@@ -32,13 +32,11 @@ export default {
 
 ## Palette and Style
 
-This plugin provides a `@vuepress/plugin-palette/palette` (palette file) and a `@vuepress/plugin-palette/style` (style file) for import in your theme styles.
+This plugin provides a `@vuepress/plugin-palette/palette` (palette file) for import in your theme styles.
 
 The palette file is used to define style variables, so it's typically imported at the beginning of your theme styles. For example, users can define [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), [SASS variables](https://sass-lang.com/documentation/variables), [LESS variables](http://lesscss.org/features/#variables-feature), or [Stylus variables](https://stylus-lang.com/docs/variables.html) in the palette, and then you can use those variables in your theme styles.
 
-The style file is used to override default styles or add extra styles, so it's typically imported at the end of your theme styles.
-
-## Usage
+## Cookbook
 
 Use this plugin in your theme, assuming you're using SASS:
 
@@ -83,25 +81,6 @@ Then users can customize variables in `.vuepress/styles/palette.scss`:
 $color: green;
 ```
 
-### Usage of Style
-
-Import the plugin's style file after your theme's styles, for example, in the `clientConfigFile`:
-
-```ts
-// import your theme's style file
-import 'path/to/your/theme/style'
-// import the plugin's style file
-import '@vuepress/plugin-palette/style'
-```
-
-Then users can add extra styles in `.vuepress/styles/index.scss` and override your theme's default styles:
-
-```scss
-h1 {
-  font-size: 2.5rem;
-}
-```
-
 ## Options
 
 ### preset
@@ -152,42 +131,6 @@ h1 {
 
   You should import the palette file via `'@vuepress/plugin-palette/palette'` alias, so you don't need to change this option in most cases.
 
-### userStyleFile
-
-- Type: `string`
-
-- Default:
-  - css: `'.vuepress/styles/index.css'`
-  - less: `'.vuepress/styles/index.less'`
-  - sass: `'.vuepress/styles/index.scss'`
-  - stylus: `'.vuepress/styles/index.styl'`
-
-- Details:
-
-  File path of the user style file, relative to source directory.
-
-  The default value depends on the [preset](#preset) option.
-
-  This file is where users override default styles or add extra styles, and it's recommended to keep the default file path as a convention.
-
-### tempStyleFile
-
-- Type: `string`
-
-- Default:
-  - css: `'styles/index.css'`
-  - less: `'styles/index.less'`
-  - sass: `'styles/index.scss'`
-  - stylus: `'styles/index.styl'`
-
-- Details:
-
-  File path of the generated style temp file, relative to temp directory.
-
-  The default value depends on the [preset](#preset) option.
-
-  You should import the style file via `'@vuepress/plugin-palette/style'` alias, so you don't need to change this option in most cases.
-
 ### importCode
 
 - Type: `(filePath: string) => string`
@@ -204,4 +147,4 @@ h1 {
 
   The default value depends on the [preset](#preset) option.
 
-  This option is used for generating [tempPaletteFile](#temppalettefile) and [tempStyleFile](#tempstylefile), and you don't need to change this option in most cases.
+  This option is used for generating [tempPaletteFile](#temppalettefile) , and you don't need to change this option in most cases.

docs/plugins/development/sass-palette/config.md

@@ -72,16 +72,10 @@ As a plugin developer, you should use this file to provide default CSS variables
 
   For example, you can use this to generate a `$theme-color-light` variable based on the `$theme-color` provided by the user.
 
-### style
-
-- Type: `string`
-- Details: The path to the user's custom style file, relative to the source directory. This is used for standard CSS/Sass customization.
-
 ## Alias
 
 The following aliases are available for import:
 
 - **config**: `@sass-palette/${id}-config` (Derived from `id`)
 - **palette**: `@sass-palette/${id}-palette` (Derived from `id`)
-- **style**: `@sass-palette/${id}-style` (Only available when the `style` option is set)
 - **helper**: `@sass-palette/helper`

docs/plugins/development/sass-palette/guide.md

@@ -241,13 +241,3 @@ $code-c-bg: abc-config.$highlighter == 'shiki'? #fff: #f8f8f8;
 ```
 
 :::
-
-## User Styles
-
-Theme developers can use the `style` option to allow users to customize the site's appearance with standard CSS/Sass.
-
-You must manually include the user style file by importing the alias `@sass-palette/${id}-style`. This should be imported **after** your theme's base styles to ensure user overrides take precedence.
-
-::: tip
-`@sass-palette/${id}-style` is a direct alias to the user's style file and can be imported in JS, TS, or Sass.
-:::

docs/zh/plugins/development/palette.md

@@ -32,13 +32,11 @@ export default {
 
 ## 调色板和样式
 
-该插件会提供一个 `@vuepress/plugin-palette/palette`（调色板文件）和一个 `@vuepress/plugin-palette/style`（样式文件），用于在你的主题样式中引入。
+该插件会提供一个 `@vuepress/plugin-palette/palette`（调色板文件），用于在你的主题样式中引入。
 
 调色板文件用于定义样式变量，因此它通常会在你主题样式的开头引入。举例来说，用户可以在调色板中定义 [CSS 变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)、[SASS 变量](https://sass-lang.com/documentation/variables)、[LESS 变量](http://lesscss.org/features/#variables-feature)或 [Stylus 变量](https://stylus-lang.com/docs/variables.html)，然后你可以在你的主题样式中使用这些变量。
 
-样式文件用于覆盖默认样式或添加额外样式，因此它通常会在你主题样式的末尾引入。
-
-## 使用
+## 教程
 
 在你的主题中使用该插件，假设你使用 SASS 作为 CSS 预处理器：
 
@@ -78,25 +76,6 @@ $color: red !default;
 $color: green;
 ```
 
-### 使用样式
-
-在你主题的样式之后引入该插件的样式文件，比如在 `clientConfigFile` 中：
-
-```ts
-// 引入你主题本身的样式文件
-import 'path/to/your/theme/style'
-// 引入该插件的样式文件
-import '@vuepress/plugin-palette/style'
-```
-
-然后，用户就可以在 `.vuepress/styles/index.scss` 中添加额外样式，并可以覆盖你主题的默认样式：
-
-```scss
-h1 {
-  font-size: 2.5rem;
-}
-```
-
 ## 配置项
 
 ### preset
@@ -147,42 +126,6 @@ h1 {
 
   你应该通过 `'@vuepress/plugin-palette/palette'` 别名引入调色板文件，因此大部分情况下你不需要修改该配置项。
 
-### userStyleFile
-
-- 类型： `string`
-
-- 默认值：
-  - css: `'.vuepress/styles/index.css'`
-  - less: `'.vuepress/styles/index.less'`
-  - sass: `'.vuepress/styles/index.scss'`
-  - stylus: `'.vuepress/styles/index.styl'`
-
-- 详情：
-
-  用户样式文件的路径，相对于源文件目录。
-
-  默认值依赖于 [preset](#preset) 配置项。
-
-  此文件用于用户覆盖默认样式或添加额外样式，建议保持默认文件路径作为约定。
-
-### tempStyleFile
-
-- 类型： `string`
-
-- 默认值：
-  - css: `'styles/index.css'`
-  - less: `'styles/index.less'`
-  - sass: `'styles/index.scss'`
-  - stylus: `'styles/index.styl'`
-
-- 详情：
-
-  生成的样式临时文件的路径，相对于临时文件目录。
-
-  默认值依赖于 [preset](#preset) 配置项。
-
-  你应该通过 `'@vuepress/plugin-palette/style'` 别名引入样式文件，因此大部分情况下你不需要修改该配置项。
-
 ### importCode
 
 - 类型： `(filePath: string) => string`
@@ -199,4 +142,4 @@ h1 {
 
   默认值依赖于 [preset](#preset) 配置项。
 
-  该配置项用于生成 [tempPaletteFile](#temppalettefile) 和 [tempStyleFile](#tempstylefile)，大部分情况下你不需要修改该配置项。
+  该配置项用于生成 [tempPaletteFile](#temppalettefile)，大部分情况下你不需要修改该配置项。

docs/zh/plugins/development/sass-palette/config.md

@@ -72,16 +72,10 @@ icon: settings-2
 
   例如：你可以利用它基于用户提供的 `$theme-color` 来生成一个 `$theme-color-light` 变量。
 
-### style
-
-- 类型：`string`
-- 详情：用户自定义样式文件的路径，相对于源码目录。这通常用于标准的 CSS/Sass 样式覆盖。
-
 ## 别名 (Alias)
 
 可用的导入别名如下：
 
 - **config**：`@sass-palette/${id}-config` (基于 `id` 生成)
 - **palette**：`@sass-palette/${id}-palette` (基于 `id` 生成)
-- **style**：`@sass-palette/${id}-style` (仅在设置了 `style` 选项时可用)
 - **helper**：`@sass-palette/helper`

docs/zh/plugins/development/sass-palette/guide.md

@@ -246,15 +246,3 @@ $code-c-bg: abc-config.$highlighter == 'shiki'? #fff: #f8f8f8;
 ```
 
 :::
-
-## 用户样式
-
-如果你是主题开发者，你可能希望为用户提供一种自定义主题或站点样式的方法。
-
-在这种情况下，你应该在使用此插件时将 `style` 选项设置为用户样式文件。
-
-随后，你需要手动导入 `@sass-palette/${id}-style`，并确保将其放置在 **你的主题样式之后**。
-
-::: tip
-`@sass-palette/${id}-style` 是用户样式文件的别名，你可以在 JS/TS/SASS 中导入它。
-:::

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

@@ -1,4 +1,3 @@
 export * from './palettePlugin.js'
 export * from './preparePaletteFile.js'
-export * from './prepareStyleFile.js'
 export * from './presetOptions.js'

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

@@ -3,7 +3,6 @@ import { watch } from 'chokidar'
 import type { Plugin } from 'vuepress/core'
 
 import { preparePaletteFile } from './preparePaletteFile.js'
-import { prepareStyleFile } from './prepareStyleFile.js'
 import { presetOptions } from './presetOptions.js'
 
 /**
@@ -35,20 +34,6 @@ export interface PalettePluginOptions {
    */
   tempPaletteFile?: string
 
-  /**
-   * File path of the user style file, relative to source directory
-   *
-   * 用户样式文件的路径，相对于源文件目录
-   */
-  userStyleFile?: string
-
-  /**
-   * File path of the generated style temp file, relative to temp directory
-   *
-   * 生成的样式临时文件的路径，相对于临时文件目录
-   */
-  tempStyleFile?: string
-
   /**
    * Function to generate import code
    *
@@ -77,15 +62,12 @@ export const palettePlugin = ({
   preset = 'css',
   userPaletteFile = presetOptions[preset].userPaletteFile,
   tempPaletteFile = presetOptions[preset].tempPaletteFile,
-  userStyleFile = presetOptions[preset].userStyleFile,
-  tempStyleFile = presetOptions[preset].tempStyleFile,
   importCode = presetOptions[preset].importCode,
 }: PalettePluginOptions = {}): Plugin => ({
   name: '@vuepress/plugin-palette',
 
   alias: (app) => ({
     '@vuepress/plugin-palette/palette': app.dir.temp(tempPaletteFile),
-    '@vuepress/plugin-palette/style': app.dir.temp(tempStyleFile),
   }),
 
   extendsBundlerOptions: (bundlerOptions, app) => {
@@ -125,18 +107,11 @@ export const palettePlugin = ({
   },
 
   onPrepared: async (app) => {
-    await Promise.all([
-      preparePaletteFile(app, {
-        userPaletteFile,
-        tempPaletteFile,
-        importCode,
-      }),
-      prepareStyleFile(app, {
-        userStyleFile,
-        tempStyleFile,
-        importCode,
-      }),
-    ])
+    await preparePaletteFile(app, {
+      userPaletteFile,
+      tempPaletteFile,
+      importCode,
+    })
   },
 
   onWatched: (app, watchers) => {
@@ -145,11 +120,6 @@ export const palettePlugin = ({
       ignoreInitial: true,
     })
 
-    const styleWatcher = watch(userStyleFile, {
-      cwd: app.dir.source(),
-      ignoreInitial: true,
-    })
-
     const handlePaletteChange = (): void => {
       void preparePaletteFile(app, {
         userPaletteFile,
@@ -158,19 +128,9 @@ export const palettePlugin = ({
       })
     }
 
-    const handleStyleChange = (): void => {
-      void prepareStyleFile(app, {
-        userStyleFile,
-        tempStyleFile,
-        importCode,
-      })
-    }
-
     paletteWatcher.on('add', handlePaletteChange)
     paletteWatcher.on('unlink', handlePaletteChange)
-    styleWatcher.on('add', handleStyleChange)
-    styleWatcher.on('unlink', handleStyleChange)
 
-    watchers.push(paletteWatcher, styleWatcher)
+    watchers.push(paletteWatcher)
   },
 })