refactor: 修改 html 相关逻辑与问题

2025-04-05 19:41:57 +08:00 · 2022-04-05 19:44:39 +08:00 · 2022-04-05 19:44:39 +08:00 · 5f9d3564bf
commit 5f9d3564bf
parent d07416b968
27 changed files with 226 additions and 122 deletions
--- a/docs/.vuepress/configs/sidebar/zh.ts
+++ b/docs/.vuepress/configs/sidebar/zh.ts
@ -23,6 +23,7 @@ export const zh: SidebarConfig = {
        '/zh/guide/plugin.md',
        '/zh/guide/template.md',
        '/zh/guide/mock.md',
+        '/zh/guide/upgrade2.1.md',
      ]
    },
    {
--- a/docs/zh/guide/builder.md
+++ b/docs/zh/guide/builder.md
@ -11,7 +11,7 @@

 ### 配置

-Webpack 和 Vite 构建在配置方面有一些差异，具体可以查阅[配置](../reference/config)。
+Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看[配置](../reference/config)。

 ### 静态文件处理

@ -20,3 +20,16 @@ Webpack 和 Vite 构建在配置方面有一些差异，具体可以查阅[配
 ### html 模版

 Webpack 对于 html 模版是没有什么限制的，而 Vite 推荐模版文件就放在项目根目录下。Webpack 有个非常强大的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)，Fes.js 引入了[vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 进行能力的对齐，如果开发者想要个性化定制模版，那么在配置上还是存在差异的。
+
+## 升级 2.1.x
+
+### 不变更构建方式
+
+直接添加 Webpack 构建依赖包即可： `npm i @fesjs/build-webpack -D`。
+
+### 换成 Vite
+
+1. 安装依赖包 `npm i @fesjs/build-vite`。
+2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config)。
+3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法。
+4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式。
--- a/docs/zh/guide/template.md
+++ b/docs/zh/guide/template.md
@ -1,56 +1,52 @@
 # HTML 模板

-Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能，默认模板内容是：
+Fes.js 默认模板内容是：
+
 ```html
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <title><%= title %></title>
+    </head>
+    <body>
+        <div id="<%= mountElementId %>"></div>
+    </body>
 </html>
 ```

-## 自定义模板
-在 `src/public` 文件夹中创建`index.html`，Fes.js 约定如果这个文件存在，则会替换默认模板。
+## 修改页面标题

-## 模板配置
-在配置文件（`.fes.js`）中配置 `html`，把[配置](https://github.com/jantimon/html-webpack-plugin#options)的对象作为参数传入 `html-webpack-plugin` 实例。
-
-举个 :chestnut: ：
 ```js
+// .fes.js
 export default {
-    html: {
-        title: '海贼王'
-    }
-}
+    title: '这是页面标题',
+};
 ```
-页面的标题会设置成'海贼王'。
+
+页面的标题会设置成 `这是页面标题`。

 ## 模板变量
-当然我们也可以手动编写模板，在模板中添加`link`、`link`、`meta`等标签。在我们手动配置模板时，有时候需要用到一些环境变量，模板里可以获取到的变量如下：

- **htmlWebpackPlugin**，特定于此插件的数据
- **webpackConfig**，用于此编译的webpack配置。例如，它可用于获取publicPath（webpackConfig.output.publicPath）。
- **compilation**，webpack编译对象。例如，可以使用它来获取已处理资产的内容，并将其直接内联到页面中compilation.assets[...].source()
+模版中可以使用的变量：
+
+-   `NODE_ENV`: Node.js 环境变量
+-   `FES_ENV`: Fes.js 环境变量
+-   `BASE_URL`: publicPath
+-   `.env.**`: 文件中以 `FES_APP_` 开头的变量

 举个 🌰 ：
-```html
-<link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />
+
+```env
+# .env
+FES_APP_HELLO_WORLD=hello world
 ```

-除上述 `html-webpack-plugin` 插件提供的变量外，Fes.js 还把 `process.env` 中的环境变量添加到模板作用域内：
- `NODE_ENV`
- `FES_ENV`
- `.env` 文件中以 `FES_APP_` 开头的变量
-
-举个 🌰 ：
-
 ```html
-<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-```
+<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+<body>
+    <div><%= FES_APP_HELLO_WORLD %></div>
+</body>
+```
--- a/docs/zh/guide/upgrade2.1.md
+++ b/docs/zh/guide/upgrade2.1.md
@ -0,0 +1,22 @@
+# 从 2.0.x 迁移到 2.1.x
+
+## 版本 2.1.x 的 break
+
+1. 编译时的 [base](../reference/config/#base) 配置，移到了 [router.base](../reference/config/#router) 下
+
+## 相关插件
+
+由于需要兼容 Vite 的写法，插件也做了相关代码调整，
+
+## 不变更构建方式
+
+1. 添加 Webpack 构建依赖包： `npm i @fesjs/build-webpack -D`。
+2. 如果有，将 `public/index.html` 文件挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)。
+
+## 换成 Vite
+
+1. 安装依赖包 `npm i @fesjs/build-vite`。
+2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config)。
+3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法。
+4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式。
+5. 由于需要兼容 Vite 写法，相关插件也做了相关调整，因此依赖的插件都需要升级最新的版本。如果用了 [@fesjs/plugin-sass](../reference/plugin/plugins/sass.html) 插件，直接移除，手动安装 `sass` 依赖即可。
--- a/docs/zh/reference/config/README.md
+++ b/docs/zh/reference/config/README.md
@ -213,7 +213,7 @@ export default {
 ### router

 -   类型： `object`
-   默认值： `{ mode: 'hash' }`
+-   默认值： `{ mode: 'hash', base: '/' }`
 -   详情：

    配置路由，具体请查看指南中关于路由的介绍
@ -282,6 +282,13 @@ const defaultTerserOptions = {

    配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options)

+### title
+
+-   类型： `string`
+-   详情：
+
+    html 页面标题
+
 ## webpack 专属配置

 ### analyze
--- a/packages/fes-build-vite/src/commands/dev/index.js
+++ b/packages/fes-build-vite/src/commands/dev/index.js
@ -1,12 +1,6 @@
 import { createServer } from 'vite';
 import getDevConfig from './getDevConfig';

-/**
- * TODO
- *
- * 共享 webpack 和 vite 的部分配置，降低熟悉 vite 的成本
- */
-
 export default (api) => {
    const {
        paths,
--- a/packages/fes-build-vite/src/common/getConfig.js
+++ b/packages/fes-build-vite/src/common/getConfig.js
@ -28,6 +28,7 @@ export function getInnerCommonConfig(api) {
                    inject: {
                        data: {
                            ...resolveRuntimeEnv(publicPath),
+                            title: api.config.title || 'Fes.js',
                            mountElementId: api.config.mountElementId,
                        },
                    },
--- a/packages/fes-build-webpack/src/plugins/commands/webpackConfig/html.js
+++ b/packages/fes-build-webpack/src/plugins/commands/webpackConfig/html.js
@ -4,11 +4,13 @@ import { winPath, resolveRuntimeEnv } from '@fesjs/utils';

 export default async function createHtmlWebpackConfig({ api, cwd, config, webpackConfig, headScripts, isProd, publicPath }) {
    const htmlOptions = {
-        title: 'fes.js',
        filename: '[name].html',
        ...config.html,
-        templateParameters: resolveRuntimeEnv(publicPath),
-        mountElementId: config.mountElementId,
+        templateParameters: {
+            title: config.html?.title || api.config.title || 'Fes.js',
+            ...resolveRuntimeEnv(publicPath),
+            mountElementId: config.mountElementId,
+        },
    };

    if (isProd) {
@ -24,7 +26,7 @@ export default async function createHtmlWebpackConfig({ api, cwd, config, webpac
        });
    }

-    const htmlPath = join(cwd, 'public/index.html');
+    const htmlPath = join(cwd, 'index.html');
    const defaultHtmlPath = resolve(__dirname, 'index-default.html');
    const publicCopyIgnore = [];

@ -45,10 +47,12 @@ export default async function createHtmlWebpackConfig({ api, cwd, config, webpac
                    if (_fileName !== 'index.html') {
                        const _htmlOptions = {
                            ...config.html,
-                            title: route?.meta?.title || config.html.title || 'fes.js',
                            filename: _fileName,
-                            templateParameters: resolveRuntimeEnv(publicPath),
-                            mountElementId: config.mountElementId,
+                            templateParameters: {
+                                title: route?.meta?.title || config.html.title || api.config.title || 'fes.js',
+                                ...resolveRuntimeEnv(publicPath),
+                                mountElementId: config.mountElementId,
+                            },
                        };
                        webpackConfig.plugin(_fileName).use(require.resolve('html-webpack-plugin'), [_htmlOptions]);
                    }
--- a/packages/fes-build-webpack/src/plugins/commands/webpackConfig/index-default.html
+++ b/packages/fes-build-webpack/src/plugins/commands/webpackConfig/index-default.html
@ -6,12 +6,12 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>
-    <%= htmlWebpackPlugin.options.title %>
+    <%= title %>
  </title>
 </head>

 <body>
-  <div id="<%= htmlWebpackPlugin.options.mountElementId %>"></div>
+  <div id="<%= mountElementId %>"></div>
 </body>

 </html>
--- a/packages/fes-plugin-windicss/package.json
+++ b/packages/fes-plugin-windicss/package.json
@ -31,6 +31,8 @@
    "vue": "^3.0.5"
  },
  "dependencies": {
+    "vite-plugin-windicss": "^1.8.3",
+    "windicss": "^3.5.1",
    "windicss-webpack-plugin": "^1.6.0"
  },
  "typings": "./types.d.ts"
--- a/packages/fes-plugin-windicss/src/index.js
+++ b/packages/fes-plugin-windicss/src/index.js
@ -1,35 +1,25 @@
-import WindiCSSWebpackPlugin from 'windicss-webpack-plugin';
+import WindiCSS from 'vite-plugin-windicss';
 import { name } from '../package.json';

-export default (api) => {
-    api.describe({
-        key: 'windicss',
+function getWindicssConfig(api) {
+    const { config, ...otherOption } = api.config.windicss;
+    return {
        config: {
-            schema(joi) {
-                return joi.object();
+            extract: {
+                // A common use case is scanning files from the root directory
+                include: ['**/*.{vue,jsx,js,ts,tsx}'],
+                // if you are excluding files, make sure you always include node_modules and .git
+                exclude: ['node_modules', '.git', 'dist', '.fes'],
            },
-            default: {},
+            ...config,
        },
-    });
-
-    api.addEntryImportsAhead(() => [{ source: 'windi-base.css' }, { source: 'windi-components.css' }, { source: 'windi-utilities.css' }]);
+        ...otherOption,
+    };
+}

+function buildWindicssWithWebpack(api) {
    api.chainWebpack((memo, { createCSSRule }) => {
-        const { config, ...otherOption } = api.config.windicss;
-        memo.plugin('windicss').use(WindiCSSWebpackPlugin, [
-            {
-                config: {
-                    extract: {
-                        // A common use case is scanning files from the root directory
-                        include: ['**/*.{vue,jsx,js,ts,tsx}'],
-                        // if you are excluding files, make sure you always include node_modules and .git
-                        exclude: ['node_modules', '.git', 'dist', '.fes'],
-                    },
-                    ...config,
-                },
-                ...otherOption,
-            },
-        ]);
+        memo.plugin('windicss').use(require('windicss-webpack-plugin'), [getWindicssConfig(api)]);
        if (api.env === 'development') {
            memo.module.rule('css').test((path) => {
                if (path.endsWith('windi-utilities.css')) {
@ -48,6 +38,34 @@ export default (api) => {

        return memo;
    });
+}
+
+function buildWindicssWithVite(api) {
+    api.modifyBundleConfig((memo) => {
+        memo.plugins.push(WindiCSS(getWindicssConfig(api).config));
+
+        return memo;
+    });
+}
+
+export default (api) => {
+    api.describe({
+        key: 'windicss',
+        config: {
+            schema(joi) {
+                return joi.object();
+            },
+            default: {},
+        },
+    });
+
+    api.addEntryImportsAhead(() => [{ source: 'windi-base.css' }, { source: 'windi-components.css' }, { source: 'windi-utilities.css' }]);
+
+    if (api.builder.isVite) {
+        buildWindicssWithVite(api);
+    } else {
+        buildWindicssWithWebpack(api);
+    }

    api.addConfigType(() => ({
        source: name,
--- a/packages/fes-preset-built-in/src/index.js
+++ b/packages/fes-preset-built-in/src/index.js
@ -28,6 +28,7 @@ export default function () {
            require.resolve('./plugins/features/singular'),
            require.resolve('./plugins/features/targets'),
            require.resolve('./plugins/features/terserOptions'),
+            require.resolve('./plugins/features/title'),

            // route
            require.resolve('./plugins/route'),
--- a/packages/fes-preset-built-in/src/plugins/features/proxy.js
+++ b/packages/fes-preset-built-in/src/plugins/features/proxy.js
@ -2,7 +2,7 @@ import { extname } from 'path';
 import historyFallback from 'connect-history-api-fallback';

 const ASSET_EXT_NAMES = ['.ico', '.png', '.jpg', '.jpeg', '.gif', '.svg'];
-const SKIP_PATHS_PREFIX = ['/@vite', '/@id'];
+const SKIP_PATHS_PREFIX = ['/@'];

 const proxyMiddleware = (api) => (req, res, next) => {
    const proxyConfig = api.config.proxy;
@ -15,6 +15,7 @@ const proxyMiddleware = (api) => (req, res, next) => {
    if (ASSET_EXT_NAMES.includes(extname(req.url))) {
        return next();
    }
+
    const history = historyFallback();
    history(req, res, next);
 };
--- a/packages/fes-preset-built-in/src/plugins/features/title.js
+++ b/packages/fes-preset-built-in/src/plugins/features/title.js
@ -0,0 +1,10 @@
+export default (api) => {
+    api.describe({
+        key: 'title',
+        config: {
+            schema(joi) {
+                return joi.string();
+            },
+        },
+    });
+};
--- a/packages/fes-preset-built-in/src/plugins/generateFiles/core/plugin/pluginRegister.tpl
+++ b/packages/fes-preset-built-in/src/plugins/generateFiles/core/plugin/pluginRegister.tpl
@ -3,12 +3,22 @@ import { plugin } from './plugin';
 import * as Plugin_{{{ index }}} from '{{{ path }}}';
 {{/plugins}}

-// 避免编译警告
-const defaultKey = 'default';
+function handleDefaultExport(pluginExports) {
+  // 避免编译警告
+  const defaultKey = 'default';
+  if (pluginExports[defaultKey]) {
+    const {default: defaultExport, ...otherExports} = pluginExports;
+    return {
+      ...defaultExport,
+      ...otherExports
+    }
+  }
+  return pluginExports;
+}

 {{#plugins}}
  plugin.register({
-    apply: {...Plugin_{{{ index }}}[defaultKey], ...Plugin_{{{ index }}}},
+    apply: handleDefaultExport(Plugin_{{{ index }}}),
    path: '{{{ path }}}',
  });
 {{/plugins}}
--- a/packages/fes-template-h5/.env
+++ b/packages/fes-template-h5/.env
@ -0,0 +1 @@
+FES_APP_HELLO_WORLD=hello world
--- a/packages/fes-template-h5/index.html
+++ b/packages/fes-template-h5/index.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="format-detection" content="email=no" />
+  <meta name="viewport"
+    content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
+  <title>
+    <%= title %>
+  </title>
+  <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
+</head>
+
+<body ontouchstart="">
+  <div>
+    <%= FES_APP_HELLO_WORLD %>
+  </div>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
--- a/packages/fes-template-h5/public/index.html
+++ b/packages/fes-template-h5/public/index.html
@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-    <meta name="format-detection" content="telephone=no"/>
-    <meta name="format-detection" content="email=no"/>
-    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
-  </head>
-  <body ontouchstart="">
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
--- a/packages/fes-template-vite/index.html
+++ b/packages/fes-template-vite/index.html
@ -11,7 +11,7 @@
  <meta name="viewport"
    content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>
-    Fes & vite
+    <%= title %>
  </title>
 </head>

--- a/packages/fes-template-vite/package.json
+++ b/packages/fes-template-vite/package.json
@ -48,6 +48,7 @@
    "@fesjs/fes": "^2.0.0",
    "@fesjs/plugin-icon": "^2.0.0",
    "@fesjs/plugin-request": "^2.0.0",
+    "@fesjs/plugin-windicss": "^2.0.8",
    "@fesjs/build-vite": "^1.0.0",
    "vue": "^3.2.2"
  },
--- a/packages/fes-template/public/index.html
+++ b/packages/fes-template/public/index.html
@ -1,15 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>
+        <%= title %>
+    </title>
    <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
 </head>
+
 <body>
-    <div id="app"></div>
+    <div id="<%= mountElementId %>"></div>
    <script>
        console.log('<%= FES_APP_PUBLISH_ERROR_PAGE %>');
    </script>
 </body>
-</html>
+
+</html>
--- a/packages/fes/src/cli.js
+++ b/packages/fes/src/cli.js
@ -17,7 +17,6 @@ function checkNodeVersion(wanted, id) {

 checkNodeVersion(requiredVersion, '@fesjs/fes');

-// process.argv: [node, fes.js, command, args]
 const rawArgv = process.argv.slice(2);
 const args = yParser(rawArgv);

--- a/packages/fes/src/serviceWithBuiltIn.js
+++ b/packages/fes/src/serviceWithBuiltIn.js
@ -8,16 +8,13 @@ import { Service as CoreService } from '@fesjs/compiler';

 class Service extends CoreService {
    constructor(opts) {
-        process.env.FES_VERSION = require('../package').version;
+        process.env.FES_VERSION = require('../package.json').version;
        process.env.FES_DIR = dirname(require.resolve('../package'));

        super({
            ...opts,
-            presets: [
-                require.resolve('@fesjs/preset-built-in'),
-                ...(opts.presets || [])
-            ],
-            plugins: [...(opts.plugins || [])]
+            presets: [require.resolve('@fesjs/preset-built-in'), ...(opts.presets || [])],
+            plugins: [...(opts.plugins || [])],
        });
    }
 }
--- a/packages/fes/src/utils/fork.js
+++ b/packages/fes/src/utils/fork.js
@ -1,15 +1,11 @@
-import {
-    fork
-} from 'child_process';
+import { fork } from 'child_process';

 const usedPorts = [];
 let CURRENT_PORT;

-export default function start({
-    scriptPath
-}) {
+export default function start({ scriptPath }) {
    const execArgv = process.execArgv.slice(0);
-    const inspectArgvIndex = execArgv.findIndex(argv => argv.includes('--inspect-brk'),);
+    const inspectArgvIndex = execArgv.findIndex((argv) => argv.includes('--inspect-brk'));

    if (inspectArgvIndex > -1) {
        const inspectArgv = execArgv[inspectArgvIndex];
@ -39,7 +35,7 @@ export default function start({
    }

    const child = fork(scriptPath, process.argv.slice(2), {
-        execArgv
+        execArgv,
    });

    child.on('message', (data) => {
@ -47,7 +43,7 @@ export default function start({
        if (type === 'RESTART') {
            child.kill();
            start({
-                scriptPath
+                scriptPath,
            });
        } else if (type === 'UPDATE_PORT') {
            // set current used port
--- a/packages/fes/src/utils/getCwd.js
+++ b/packages/fes/src/utils/getCwd.js
@ -3,7 +3,7 @@ import { join, isAbsolute } from 'path';
 export default () => {
    const cwd = process.cwd();
    if (process.env.APP_ROOT) {
-    // avoid repeat cwd path
+        // avoid repeat cwd path
        if (!isAbsolute(process.env.APP_ROOT)) {
            return join(cwd, process.env.APP_ROOT);
        }
--- a/packages/fes/types.d.ts
+++ b/packages/fes/types.d.ts
@ -107,6 +107,7 @@ interface InnerBuildConfig {
    singular?: boolean;
    targets?: object;
    terserOptions?: object;
+    title?: string;
 }

 export function defineBuildConfig(config: InnerBuildConfig & PluginBuildConfig ): InnerBuildConfig & PluginBuildConfig;
--- a/yarn.lock
+++ b/yarn.lock
@ -3588,7 +3588,7 @@
    jiti "^1.13.0"
    windicss "^3.5.1"

-"@windicss/plugin-utils@^1.8.2":
+"@windicss/plugin-utils@1.8.3", "@windicss/plugin-utils@^1.8.2":
  version "1.8.3"
  resolved "https://registry.npmmirror.com/@windicss/plugin-utils/-/plugin-utils-1.8.3.tgz#cec2bdc7703357de348e4512d61c7bd7802b049a"
  integrity sha512-emlMeDt73uNV1ZofLTDogcxqL9aZ5uIRYkjeHlrWiaDozFbX6Jc+a6eRo9Ieaar3JUryl6AnecTPHAiFDl4IXg==
@ -8925,6 +8925,11 @@ klona@^2.0.4:
  resolved "https://registry.npmmirror.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
  integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==

+kolorist@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/kolorist/-/kolorist-1.5.1.tgz#c3d66dc4fabde4f6b7faa6efda84c00491f9e52b"
+  integrity sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==
+
 lerna@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmmirror.com/lerna/-/lerna-4.0.0.tgz#b139d685d50ea0ca1be87713a7c2f44a5b678e9e"
@ -13389,6 +13394,16 @@ vite-plugin-html@^3.2.0:
    node-html-parser "^5.3.3"
    pathe "^0.2.0"

+vite-plugin-windicss@^1.8.3:
+  version "1.8.3"
+  resolved "https://registry.npmmirror.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.3.tgz#d5fe923ad60f5d80f153a4fae5f837d56caa25cb"
+  integrity sha512-RIw2GD6H6cKNE8wZXVOBs4L1uTicVS0FaAkeqXvy1oyuXLC4SXmvnzEuoK0+qFuWJjW0ECNwE8eU+ZZhzNQKUg==
+  dependencies:
+    "@windicss/plugin-utils" "1.8.3"
+    debug "^4.3.3"
+    kolorist "^1.5.1"
+    windicss "^3.5.1"
+
 vite@^2.8.6:
  version "2.9.1"
  resolved "https://registry.npmmirror.com/vite/-/vite-2.9.1.tgz#84bce95fae210a7beb566a0af06246748066b48f"