refactor: theme

2024-11-29 17:57:37 +08:00 · 2021-10-27 09:03:12 +08:00 · 2021-10-27 09:03:12 +08:00 · fc4bfc35d7
commit fc4bfc35d7
parent 25c37bb2fa
12 changed files with 288 additions and 348 deletions
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@element-plus/icons": "^0.0.11",
    "@logicflow/core": "^0.7.1",
    "@logicflow/extension": "^0.7.1",
    "@vueuse/core": "^6.7.1",
@ -70,6 +71,7 @@
    "@vue/compiler-sfc": "^3.2.20",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
+    "@zougt/vite-plugin-theme-preprocessor": "^1.2.0",
    "autoprefixer": "^10.2.4",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "chalk": "^2.4.2",
@ -92,7 +94,7 @@
    "stylelint-order": "^4.1.0",
    "typescript": "^4.4.2",
    "unplugin-element-plus": "^0.1.0",
-    "vite": "^2.6.10",
+    "vite": "^2.6.11",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-style-import": "^1.2.1",
    "vite-svg-loader": "^2.2.0",
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@ -5,7 +5,8 @@
  "HiddenSideBar": false,
  "KeepAlive": true,
  "Locale": "zh",
-  "Layout": "vertical-dark",
+  "Layout": "vertical",
+  "Theme": "default",
  "MapConfigure": {
    "amapKey": "97b3248d1553172e81f168cf94ea667e",
    "baiduKey": "wTHbkkEweiFqZLKunMIjcrb2RcqNXkhc",
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { split } from "lodash-es";
 import panel from "../panel/index.vue";
 import { useRouter } from "vue-router";
 import { emitter } from "/@/utils/mitt";
@ -99,36 +98,20 @@ function onChange({ label }) {
  emitter.emit("tagViewsShowModel", label);
 }

-const verticalDarkDom = templateRef<HTMLElement | null>(
-  "verticalDarkDom",
-  null
-);
-const verticalLightDom = templateRef<HTMLElement | null>(
-  "verticalLightDom",
-  null
-);
-const horizontalDarkDom = templateRef<HTMLElement | null>(
-  "horizontalDarkDom",
-  null
-);
-const horizontalLightDom = templateRef<HTMLElement | null>(
-  "horizontalLightDom",
-  null
-);
+const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
+const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null);

 let dataTheme =
  ref(storageLocal.getItem("responsive-layout")) ||
  ref({
-    layout: "horizontal-dark"
+    layout: "vertical"
  });

 if (unref(dataTheme)) {
  // 设置主题
-  let theme = split(unref(dataTheme).layout, "-")[1];
-  window.document.body.setAttribute("data-theme", theme);
  // 设置导航模式
-  let layout = split(unref(dataTheme).layout, "-")[0];
-  window.document.body.setAttribute("data-layout", layout);
+  let layout = unref(dataTheme).layout;
+  window.document.body.setAttribute("layout", layout);
 }

 // 侧边栏Logo
@ -147,42 +130,21 @@ function setFalse(Doms): any {

 watch(instance, ({ layout }) => {
  switch (layout["layout"]) {
-    case "vertical-dark":
-      toggleClass(true, isSelect, unref(verticalDarkDom));
-      debounce(
-        setFalse([verticalLightDom, horizontalDarkDom, horizontalLightDom]),
-        50
-      );
+    case "vertical":
+      toggleClass(true, isSelect, unref(verticalRef));
+      debounce(setFalse([horizontalRef]), 50);
      break;
-    case "vertical-light":
-      toggleClass(true, isSelect, unref(verticalLightDom));
-      debounce(
-        setFalse([verticalDarkDom, horizontalDarkDom, horizontalLightDom]),
-        50
-      );
-      break;
-    case "horizontal-dark":
-      toggleClass(true, isSelect, unref(horizontalDarkDom));
-      debounce(
-        setFalse([verticalDarkDom, verticalLightDom, horizontalLightDom]),
-        50
-      );
-      break;
-    case "horizontal-light":
-      toggleClass(true, isSelect, unref(horizontalLightDom));
-      debounce(
-        setFalse([verticalDarkDom, verticalLightDom, horizontalDarkDom]),
-        50
-      );
+    case "horizontal":
+      toggleClass(true, isSelect, unref(horizontalRef));
+      debounce(setFalse([verticalRef]), 50);
      break;
  }
 });

-function setTheme(layout: string, theme: string) {
-  dataTheme.value.layout = `${layout}-${theme}`;
-  window.document.body.setAttribute("data-layout", layout);
-  window.document.body.setAttribute("data-theme", theme);
-  instance.layout = { layout: `${layout}-${theme}` };
+function setTheme(layout: string) {
+  dataTheme.value.layout = `${layout}`;
+  window.document.body.setAttribute("layout", layout);
+  instance.layout = { layout: `${layout}` };
  useAppStoreHook().setLayout(layout);
 }
 </script>
@ -190,23 +152,12 @@ function setTheme(layout: string, theme: string) {
 <template>
  <panel>
    <el-divider>主题风格</el-divider>
-    <ul class="theme-stley">
+    <ul class="pure-theme">
      <el-tooltip class="item" content="左侧菜单暗色模式" placement="bottom">
        <li
-          :class="dataTheme.layout === 'vertical-dark' ? $style.isSelect : ''"
-          ref="verticalDarkDom"
-          @click="setTheme('vertical', 'dark')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-
-      <el-tooltip class="item" content="左侧菜单亮色模式" placement="bottom">
-        <li
-          :class="dataTheme.layout === 'vertical-light' ? $style.isSelect : ''"
-          ref="verticalLightDom"
-          @click="setTheme('vertical', 'light')"
+          :class="dataTheme.layout === 'vertical' ? $style.isSelect : ''"
+          ref="verticalRef"
+          @click="setTheme('vertical')"
        >
          <div></div>
          <div></div>
@ -215,27 +166,19 @@ function setTheme(layout: string, theme: string) {

      <el-tooltip class="item" content="顶部菜单暗色模式" placement="bottom">
        <li
-          :class="dataTheme.layout === 'horizontal-dark' ? $style.isSelect : ''"
-          ref="horizontalDarkDom"
-          @click="setTheme('horizontal', 'dark')"
+          :class="dataTheme.layout === 'horizontal' ? $style.isSelect : ''"
+          ref="horizontalRef"
+          @click="setTheme('horizontal')"
        >
          <div></div>
          <div></div>
        </li>
      </el-tooltip>
+    </ul>

-      <el-tooltip class="item" content="顶部菜单亮色模式" placement="bottom">
-        <li
-          :class="
-            dataTheme.layout === 'horizontal-light' ? $style.isSelect : ''
-          "
-          ref="horizontalLightDom"
-          @click="setTheme('horizontal', 'light')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
+    <el-divider>主题色</el-divider>
+    <ul>
+      <li>11</li>
    </ul>

    <el-divider>界面显示</el-divider>
@ -322,10 +265,10 @@ function setTheme(layout: string, theme: string) {
  font-weight: 700;
 }

-.theme-stley {
+.pure-theme {
  margin-top: 25px;
  width: 100%;
-  height: 180px;
+  height: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
@ -362,28 +305,6 @@ function setTheme(layout: string, theme: string) {
    }

    &:nth-child(2) {
-      div {
-        &:nth-child(1) {
-          width: 30%;
-          height: 100%;
-          box-shadow: 0 0 1px #888;
-          background: #fff;
-          border-radius: 4px 0 0 4px;
-        }
-
-        &:nth-child(2) {
-          width: 70%;
-          height: 30%;
-          top: 0;
-          right: 0;
-          background: #fff;
-          box-shadow: 0 0 1px #888;
-          position: absolute;
-        }
-      }
-    }
-
-    &:nth-child(3) {
      div {
        &:nth-child(1) {
          width: 100%;
@ -393,17 +314,6 @@ function setTheme(layout: string, theme: string) {
        }
      }
    }
-
-    &:nth-child(4) {
-      div {
-        &:nth-child(1) {
-          width: 100%;
-          height: 30%;
-          background: #fff;
-          box-shadow: 0 0 1px #888;
-        }
-      }
-    }
  }
 }
 </style>
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -16,7 +16,6 @@ import { useI18n } from "vue-i18n";
 import { routerArrays } from "./types";
 import { emitter } from "/@/utils/mitt";
 import { useEventListener } from "@vueuse/core";
-import { storageLocal } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
 import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
@ -83,11 +82,8 @@ const handleClickOutside = (params: boolean) => {
 };

 function setTheme(layoutModel: string) {
-  let { layout } = storageLocal.getItem("responsive-layout");
-  let theme = layout.match(/-(.*)/)[1];
-  window.document.body.setAttribute("data-layout", layoutModel);
-  window.document.body.setAttribute("data-theme", theme);
-  instance.layout = { layout: `${layoutModel}-${theme}` };
+  window.document.body.setAttribute("layout", layoutModel);
+  instance.layout = { layout: `${layoutModel}` };
 }

 // 监听容器
--- a/src/layout/theme/default-vars.scss
+++ b/src/layout/theme/default-vars.scss
@ -0,0 +1,17 @@
+/**
+*此scss变量文件作为multipleScopeVars去编译时，会自动移除!default以达到变量提升
+*同时此scss变量文件作为默认主题变量文件，被其他.scss通过 @import 时，必需 !default
+*/
+
+// 菜单选中后字体样式
+$subMenuActiveText: #f4f4f5 !default;
+//菜单背景
+$menuBg: #1b2a47 !default;
+// 鼠标覆盖菜单时的背景
+$menuHover: #2a395b !default;
+// 子菜单背景
+$subMenuBg: #1f2d3d !default;
+// 鼠标覆盖子菜单时的背景
+$subMenuHover: #001528 !default;
+$navTextColor: #fff !default;
+$menuText: #7a80b4;
--- a/src/layout/theme/index.ts
+++ b/src/layout/theme/index.ts
@ -0,0 +1,19 @@
+export const toggleTheme = (scopeName = "theme-default") => {
+  let styleLink: any = document.getElementById("theme-button");
+  if (styleLink) {
+    // 假如存在id为theme-button 的link标签，直接修改其href
+    styleLink.href = `/${scopeName}.css`;
+    // 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作
+    document.documentElement.className = scopeName;
+  } else {
+    // 不存在的话，则新建一个
+    styleLink = document.createElement("link");
+    styleLink.type = "text/css";
+    styleLink.rel = "stylesheet";
+    styleLink.id = "theme-button";
+    styleLink.href = `/${scopeName}.css`;
+    // 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作
+    document.documentElement.className = scopeName;
+    document.head.append(styleLink);
+  }
+};
--- a/src/layout/theme/light-vars.scss
+++ b/src/layout/theme/light-vars.scss
@ -0,0 +1,7 @@
+$subMenuActiveText: #409eff;
+$menuBg: #fff;
+$menuHover: #e0ebf6;
+$subMenuBg: #fff;
+$subMenuHover: #e0ebf6;
+$navTextColor: #7a80b4;
+$menuText: #7a80b4;
--- a/src/plugins/element-plus/index.ts
+++ b/src/plugins/element-plus/index.ts
@ -37,6 +37,9 @@ import {
  ElBacktop
 } from "element-plus";

+// https://element-plus.org/zh-CN/component/icon.html
+import { Menu } from "@element-plus/icons";
+
 const components = [
  ElTag,
  ElAffix,
@ -71,7 +74,8 @@ const components = [
  ElRadioGroup,
  ElDescriptions,
  ElDescriptionsItem,
-  ElBacktop
+  ElBacktop,
+  Menu
 ];

 const plugins = [ElLoading];
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@ -21,9 +21,7 @@ export const useAppStore = defineStore({
        : true,
      withoutAnimation: false
    },
-    layout:
-      storageLocal.getItem("responsive-layout")?.layout.match(/(.*)-/)[1] ??
-      "vertical",
+    layout: storageLocal.getItem("responsive-layout")?.layout ?? "vertical",
    device: deviceDetection() ? "mobile" : "desktop"
  }),
  getters: {
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@ -1,17 +1,8 @@
+@import "../layout/theme/default-vars.scss";
+
@mixin merge-style(
-  // 菜单选中后字体样式
-  $subMenuActiveText,
-  //菜单背景
-  $menuBg,
-  // 鼠标覆盖菜单时的背景
-  $menuHover,
-  // 子菜单背景
-  $subMenuBg,
-  // 鼠标覆盖子菜单时的背景
-  $subMenuHover,
  // vertical模式下主体内容距离网页文档左侧的距离
-  $sideBarWidth,
-  $navTextColor
+  $sideBarWidth
 ) {
  $menuText: #7a80b4;
  $menuActiveText: #7a80b4;
@ -72,7 +63,7 @@

  .sidebar-container {
    transition: width 0.28s;
-    width: $sideBarWidth;
+    width: $sideBarWidth !important;
    background-color: $menuBg;
    height: 100%;
    position: fixed;
@ -211,14 +202,14 @@
      display: flex;
      min-width: 280px;
      align-items: center;
-      color: $navTextColor;
+      color: $navTextColor !important;
      justify-content: flex-end;

      .screen-full {
        cursor: pointer;

        &:hover {
-          background: $menuHover;
+          background: $menuHover !important;
        }
      }

@ -282,13 +273,13 @@

    .el-menu-item,
    .el-sub-menu__title {
-      color: $menuText;
+      color: $menuText !important;
    }

    .submenu-title-noDropdown,
    .el-sub-menu__title {
      height: 60px;
-      background: $menuBg;
+      background: $menuBg !important;

      &:hover {
        background-color: $menuHover !important;
@ -529,7 +520,7 @@
    }

    .main-container {
-      margin-left: 0 !important;
+      margin-left: 0;
    }

    .sidebar-container {
@ -554,10 +545,13 @@
  }
 }

-body[data-layout="vertical"] {
+body[layout="vertical"] {
+  $sideBarWidth: 210px;
+  @include merge-style($sideBarWidth);
+
  .hideSidebar {
    .fixed-header {
-      width: calc(100% - 54px) !important;
+      width: calc(100% - 54px);
      transition: width 0.28s;
    }

@ -566,7 +560,7 @@ body[data-layout="vertical"] {
    }

    .main-container {
-      margin-left: 54px !important;
+      margin-left: 0 !important;
    }

    .submenu-title-noDropdown {
@ -605,36 +599,39 @@ body[data-layout="vertical"] {
  }
 }

-body[data-layout="horizontal"] {
+body[layout="horizontal"] {
+  $sideBarWidth: 0;
+  @include merge-style($sideBarWidth);
+
  .fixed-header {
-    width: 100% !important;
+    width: 100%;
    transition: none !important;
  }
 }

 // vertical模式下不隐藏标签页
-body[data-layout="vertical"][data-show-tag="false"] {
+body[layout="vertical"][data-show-tag="false"] {
  .fixed-header + .app-main {
    padding-top: 85px;
  }
 }

 // vertical模式下隐藏标签页
-body[data-layout="vertical"][data-show-tag="true"] {
+body[layout="vertical"][data-show-tag="true"] {
  .fixed-header + .app-main {
    padding-top: 48px;
  }
 }

 // horizontal模式下不隐藏标签页
-body[data-layout="horizontal"][data-show-tag="false"] {
+body[layout="horizontal"][data-show-tag="false"] {
  .fixed-header + .app-main {
    padding-top: 98px;
  }
 }

 // horizontal模式下隐藏标签页
-body[data-layout="horizontal"][data-show-tag="true"] {
+body[layout="horizontal"][data-show-tag="true"] {
  .fixed-header {
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  }
@ -643,87 +640,3 @@ body[data-layout="horizontal"][data-show-tag="true"] {
    padding-top: 62px;
  }
 }
-
-// vertical模式下暗色主题
-body[data-layout="vertical"][data-theme="dark"] {
-  $subMenuActiveText: #f4f4f5;
-  $menuBg: #1b2a47;
-  $menuHover: #2a395b;
-  $subMenuBg: #1f2d3d;
-  $subMenuHover: #001528;
-  $sideBarWidth: 210px;
-  $navTextColor: #fff;
-
-  @include merge-style(
-    $subMenuActiveText,
-    $menuBg,
-    $menuHover,
-    $subMenuBg,
-    $subMenuHover,
-    $sideBarWidth,
-    $navTextColor
-  );
-}
-
-// vertical模式下亮色主题
-body[data-layout="vertical"][data-theme="light"] {
-  $subMenuActiveText: #409eff;
-  $menuBg: #fff;
-  $menuHover: #e0ebf6;
-  $subMenuBg: #fff;
-  $subMenuHover: #e0ebf6;
-  $sideBarWidth: 210px;
-  $navTextColor: #7a80b4;
-
-  @include merge-style(
-    $subMenuActiveText,
-    $menuBg,
-    $menuHover,
-    $subMenuBg,
-    $subMenuHover,
-    $sideBarWidth,
-    $navTextColor
-  );
-}
-
-// horizontal模式下暗色主题
-body[data-layout="horizontal"][data-theme="dark"] {
-  $subMenuActiveText: #f4f4f5;
-  $menuBg: #1b2a47;
-  $menuHover: #2a395b;
-  $subMenuBg: #1f2d3d;
-  $subMenuHover: #001528;
-  $sideBarWidth: 0;
-  $navTextColor: #fff;
-
-  @include merge-style(
-    $subMenuActiveText,
-    $menuBg,
-    $menuHover,
-    $subMenuBg,
-    $subMenuHover,
-    $sideBarWidth,
-    $navTextColor
-  );
-}
-
-// horizontal模式下亮色主题
-body[data-layout="horizontal"][data-theme="light"] {
-  $subMenuActiveText: #409eff;
-  $menuBg: #fff;
-  $menuHover: #e0ebf6;
-  $subMenuBg: #fff;
-  $subMenuHover: #e0ebf6;
-  $sideBarWidth: 0;
-  $navTextColor: #7a80b4;
-
-  @include merge-style(
-    $subMenuActiveText,
-    $menuBg,
-    $menuHover,
-    $subMenuBg,
-    $subMenuHover,
-    $sideBarWidth,
-    $navTextColor
-  );
-}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -8,6 +8,7 @@ import { viteMockServe } from "vite-plugin-mock";
 import svgLoader from "vite-svg-loader";
 import styleImport from "vite-plugin-style-import";
 import ElementPlus from "unplugin-element-plus/vite";
+import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor";

 const pathResolve = (dir: string): string => {
  return resolve(__dirname, ".", dir);
@ -55,6 +56,34 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
    plugins: [
      vue(),
      vueJsx(),
+      themePreprocessorPlugin({
+        scss: {
+          multipleScopeVars: [
+            {
+              scopeName: "layout-default",
+              path: pathResolve("src/layout/theme/default-vars.scss")
+            },
+            {
+              scopeName: "layout-light",
+              path: pathResolve("src/layout/theme/light-vars.scss")
+            }
+          ],
+          // 默认取 multipleScopeVars[0].scopeName
+          defaultScopeName: "",
+          // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
+          extract: true,
+          // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
+          outputDir: "",
+          // 会选取defaultScopeName对应的主题css文件在html添加link
+          themeLinkTagId: "body",
+          // "head"||"head-prepend" || "body" ||"body-prepend"
+          themeLinkTagInjectTo: "body",
+          // 是否对抽取的css文件内对应scopeName的权重类名移除
+          removeCssScopeName: false,
+          // 可以自定义css文件名称的函数
+          customThemeCssFileName: scopeName => scopeName
+        }
+      }),
      svgLoader(),
      styleImport({
        libs: [
--- a/yarn.lock
+++ b/yarn.lock
@ -985,6 +985,23 @@
  dependencies:
    vue-demi "*"

+"@zougt/some-loader-utils@^1.1.0":
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/@zougt/some-loader-utils/-/some-loader-utils-1.3.1.tgz#0a6d155d879eb2cb92e202db532bff03646be618"
+  integrity sha512-6/6DN7hMMyKWf9ZwUFSl/FUWg6zMAOBmA6Icb8CWu3qN867IVkP/juQcIuZRiHFHzlqt7oay016tLSlU47lZBw==
+  dependencies:
+    parse-color "^1.0.0"
+    postcss "^8.2.9"
+
+"@zougt/vite-plugin-theme-preprocessor@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@zougt/vite-plugin-theme-preprocessor/-/vite-plugin-theme-preprocessor-1.2.0.tgz#cf3443d9bfd8dc722e2bfe7556b993c1e03b2e28"
+  integrity sha512-CTt0UmvykY5QL6DGSs/gxOBfqdmN53p1cI4eRXjbfq+cpAJO4uvZfZTk/tuHgm4FOvOVOgJ7dPCm3xX9H5WIUQ==
+  dependencies:
+    "@zougt/some-loader-utils" "^1.1.0"
+    fs-extra "^9.1.0"
+    string-hash "^1.1.3"
+
 JSONStream@^1.0.4:
  version "1.3.5"
  resolved "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@ -1117,6 +1134,11 @@ async-validator@^4.0.3:
  resolved "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz#034a0fd2103a6b2ebf010da75183bec299247afe"
  integrity sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==

+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
 autoprefixer@^10.2.4:
  version "10.3.4"
  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.4.tgz#29efe5d19f51c281953178ddb5b84c5f1ca24c86"
@ -1399,6 +1421,11 @@ color-convert@^2.0.1:
  dependencies:
    color-name "~1.1.4"

+color-convert@~0.5.0:
+  version "0.5.3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+  integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
+
 color-name@1.1.3:
  version "1.1.3"
  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@ -1871,90 +1898,90 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.3:
    d "^1.0.1"
    ext "^1.1.2"

-esbuild-android-arm64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.8.tgz#c20e875c3c98164b1ffba9b28637bdf96f5e9e7c"
-  integrity sha512-AilbChndywpk7CdKkNSZ9klxl+9MboLctXd9LwLo3b0dawmOF/i/t2U5d8LM6SbT1Xw36F8yngSUPrd8yPs2RA==
+esbuild-android-arm64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.9.tgz#6cc4a0c623332c0830a311ddd8242b1f496ff940"
+  integrity sha512-Ty0hKldtjJVLHwUwbKR4GFPiXBo5iQ3aE1OLBar9lh3myaRkUGEb+Ypl74LEKa0+t/9lS3Ev1N5+5P2Sq6UvNQ==

-esbuild-darwin-64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.8.tgz#f46e6b471ddbf62265234808a6a1aa91df18a417"
-  integrity sha512-b6sdiT84zV5LVaoF+UoMVGJzR/iE2vNUfUDfFQGrm4LBwM/PWXweKpuu6RD9mcyCq18cLxkP6w/LD/w9DtX3ng==
+esbuild-darwin-64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.9.tgz#df44297c2438032cda2b21548a82bb007e2105cc"
+  integrity sha512-Ay0/b98v0oYp3ApXNQ7QPbaSkCT9WjBU6h8bMB1SYrQ/PmHgwph91fb9V0pfOLKK1rYWypfrNbI0MyT2tWN+rQ==

-esbuild-darwin-arm64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.8.tgz#a991157a6013facd4f2e14159b7da52626c90154"
-  integrity sha512-R8YuPiiJayuJJRUBG4H0VwkEKo6AvhJs2m7Tl0JaIer3u1FHHXwGhMxjJDmK+kXwTFPriSysPvcobXC/UrrZCQ==
+esbuild-darwin-arm64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.9.tgz#704ef404a6a38eda190d40ed354e7f2c1c839081"
+  integrity sha512-nJB8chaJdWathCe6EyIiMIqfyEzbuXPyNsPlL3bYRB1zFCF8feXT874D4IHbJ/w8B6BpY3sM1Clr/I/DK8E4ow==

-esbuild-freebsd-64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.8.tgz#301601d2e443ad458960e359b402a17d9500be9d"
-  integrity sha512-zBn6urrn8FnKC+YSgDxdof9jhPCeU8kR/qaamlV4gI8R3KUaUK162WYM7UyFVAlj9N0MyD3AtB+hltzu4cysTw==
+esbuild-freebsd-64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.9.tgz#fbbf22c99e15f27d0f8a1a040d7961a86f0d3a4e"
+  integrity sha512-ktaBujf12XLkVXLGx7WjFcmh1tt34tm7gP4pHkhvbzbHrq+BbXwcl4EsW+5JT9VNKl7slOGf4Qnua/VW7ZcnIw==

-esbuild-freebsd-arm64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.8.tgz#039a63acc12ec0892006c147ea221e55f9125a9f"
-  integrity sha512-pWW2slN7lGlkx0MOEBoUGwRX5UgSCLq3dy2c8RIOpiHtA87xAUpDBvZK10MykbT+aMfXc0NI2lu1X+6kI34xng==
+esbuild-freebsd-arm64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.9.tgz#809fff4c43653dbbf071ffce9f80a030b278098e"
+  integrity sha512-vVa5zps4dmwpXwv/amxVpIWvFJuUPWQkpV+PYtZUW9lqjXsQ3LBHP51Q1cXZZBIrqwszLsEyJPa5GuDOY15hzQ==

-esbuild-linux-32@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.8.tgz#c537b67d7e694b60bfa2786581412838c6ba0284"
-  integrity sha512-T0I0ueeKVO/Is0CAeSEOG9s2jeNNb8jrrMwG9QBIm3UU18MRB60ERgkS2uV3fZ1vP2F8i3Z2e3Zju4lg9dhVmw==
+esbuild-linux-32@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.9.tgz#f9fd3423481e51674e9817d5eea25689889a5f5a"
+  integrity sha512-HxoW9QNqhO8VW1l7aBiYQH4lobeHq85+blZ4nlZ7sg5CNhGRRwnMlV6S08VYKz6V0YKnHb5OqJxx2HZuTZ7tgQ==

-esbuild-linux-64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.8.tgz#0092fc8a064001a777bfa0e3b425bb8be8f96e6a"
-  integrity sha512-Bm8SYmFtvfDCIu9sjKppFXzRXn2BVpuCinU1ChTuMtdKI/7aPpXIrkqBNOgPTOQO9AylJJc1Zw6EvtKORhn64w==
+esbuild-linux-64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.9.tgz#9d7f66866dae1abaff7cbc3749f2847d5fb72fd5"
+  integrity sha512-L+eAR8o1lAUr9g64RXnBLuWZjAItAOWSUpvkchpa6QvSnXFA/nG6PgGsOBEqhDXl9qYEpGI0ReDrFkf8ByapvQ==

-esbuild-linux-arm64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.8.tgz#5cd3f2bb924212971482e8dbc25c4afd09b28110"
-  integrity sha512-X4pWZ+SL+FJ09chWFgRNO3F+YtvAQRcWh0uxKqZSWKiWodAB20flsW/OWFYLXBKiVCTeoGMvENZS/GeVac7+tQ==
+esbuild-linux-arm64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.9.tgz#669202e71b9ced4d285bfd1d69de948e013ac28f"
+  integrity sha512-IjbhZpW5VQYK4nVI4dj/mLvH5oXAIf57OI8BYVkCqrdVXJwR8nVrSqux3zJSY+ElrkOK3DtG9iTPpmqvBXaU0g==

-esbuild-linux-arm@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.8.tgz#ad634f96bf2975536907aeb9fdb75a3194f4ddce"
-  integrity sha512-4/HfcC40LJ4GPyboHA+db0jpFarTB628D1ifU+/5bunIgY+t6mHkJWyxWxAAE8wl/ZIuRYB9RJFdYpu1AXGPdg==
+esbuild-linux-arm@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.9.tgz#c3ceb56ec0e3dbd1a3a89dca6cb7fc0ca360bcc8"
+  integrity sha512-DT0S+ufCVXatPZHjkCaBgZSFIV8FzY4GEHz/BlkitTWzUvT1dIUXjPIRPnqBUVa+0AyS1bZSfHzv9hTT4LHz7A==

-esbuild-linux-mips64le@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.8.tgz#57857edfebf9bf65766dc8be1637f2179c990572"
-  integrity sha512-o7e0D+sqHKT31v+mwFircJFjwSKVd2nbkHEn4l9xQ1hLR+Bv8rnt3HqlblY3+sBdlrOTGSwz0ReROlKUMJyldA==
+esbuild-linux-mips64le@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.9.tgz#bf4bd389ee14b67c5c77669952f2de6b2cc8a003"
+  integrity sha512-ec9RgAM4r+fe1ZmG16qeMwEHdcIvqeW8tpnpkfSQu9T4487KtQF6lg3TQasTarrLLEe7Qpy+E+r4VwC8eeZySQ==

-esbuild-linux-ppc64le@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.8.tgz#fdb82a059a5b86bb10fb42091b4ebcf488b9cd46"
-  integrity sha512-eZSQ0ERsWkukJp2px/UWJHVNuy0lMoz/HZcRWAbB6reoaBw7S9vMzYNUnflfL3XA6WDs+dZn3ekHE4Y2uWLGig==
+esbuild-linux-ppc64le@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.9.tgz#465b7bdc70577da606b3b5d463028292b6d834ad"
+  integrity sha512-7b2/wg8T1n/L1BgCWlMSez0aXfGkNjFuOqMBQdnTti3LRuUwzGJcrhRf/FdZGJ5/evML9mqu60vLRuXW1TdXCg==

-esbuild-netbsd-64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.8.tgz#d7879e7123d3b2c04754ece8bd061aa6866deeff"
-  integrity sha512-gZX4kP7gVvOrvX0ZwgHmbuHczQUwqYppxqtoyC7VNd80t5nBHOFXVhWo2Ad/Lms0E8b+wwgI/WjZFTCpUHOg9Q==
+esbuild-netbsd-64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.9.tgz#94f2dabe83520066cc1e1fae3ecff78695a8ebb1"
+  integrity sha512-PiZu3h4+Szj0iZPgvuD2Y0isOXnlNetmF6jMcOwW54BScwynW24/baE+z7PfDyNFgjV04Ga2THdcpbKBDhgWQw==

-esbuild-openbsd-64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.8.tgz#88b280b6cb0a3f6adb60abf27fc506c506a35cf0"
-  integrity sha512-afzza308X4WmcebexbTzAgfEWt9MUkdTvwIa8xOu4CM2qGbl2LanqEl8/LUs8jh6Gqw6WsicEK52GPrS9wvkcw==
+esbuild-openbsd-64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.9.tgz#b47f6a641ca37358aeedb2b7c4bb73dd0682c6d5"
+  integrity sha512-SJKN4Ez+ilY7mu+1gAdGQ9N6dktBfbEkiOAvw+hT7xHrNnTnrTGH0FT4qx9dazB9HX6D04L4PXmVOyynqi+oEQ==

-esbuild-sunos-64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.8.tgz#229ae7c7703196a58acd0f0291ad9bebda815d63"
-  integrity sha512-mWPZibmBbuMKD+LDN23LGcOZ2EawMYBONMXXHmbuxeT0XxCNwadbCVwUQ/2p5Dp5Kvf6mhrlIffcnWOiCBpiVw==
+esbuild-sunos-64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.9.tgz#b0df4a316b7c98eb490f4bd0db381cf2c391ae73"
+  integrity sha512-9N0RjZ7cElE8ifrS0nBrLQgBMQNPiIIKO2GzLXy7Ms8AM3KjfLiV2G2+9O0B9paXjRAHchIwazTeOyeWb1vyWA==

-esbuild-windows-32@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.8.tgz#892d093e32a21c0c9135e5a0ffdc380aeb70e763"
-  integrity sha512-QsZ1HnWIcnIEApETZWw8HlOhDSWqdZX2SylU7IzGxOYyVcX7QI06ety/aDcn437mwyO7Ph4RrbhB+2ntM8kX8A==
+esbuild-windows-32@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.9.tgz#e229563e134e634f9748cc8315c691e2013259ef"
+  integrity sha512-awxWs1kns+RfjhqBbTbdlePjqZrAE2XMaAQJNg9dtu+C7ghC3QKsqXbu0C26OuF5YeAdJcq9q+IdG6WPLjvj9w==

-esbuild-windows-64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.8.tgz#7defd8d79ae3bb7e6f53b65a7190be7daf901686"
-  integrity sha512-76Fb57B9eE/JmJi1QmUW0tRLQZfGo0it+JeYoCDTSlbTn7LV44ecOHIMJSSgZADUtRMWT9z0Kz186bnaB3amSg==
+esbuild-windows-64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.9.tgz#103ad3f13e1a0e44934b91f358e81dd201b86b34"
+  integrity sha512-VmA9GQMCzOr8rFfD72Dum1+AWhJui7ZO6sYwp6rBHYu4vLmWITTSUsd/zgXXmZuHBPkkvxLJLF8XsKFCRKflJA==

-esbuild-windows-arm64@0.13.8:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.8.tgz#e59ae004496fd8a5ab67bfc7945a2e47480d6fb9"
-  integrity sha512-HW6Mtq5eTudllxY2YgT62MrVcn7oq2o8TAoAvDUhyiEmRmDY8tPwAhb1vxw5/cdkbukM3KdMYtksnUhF/ekWeg==
+esbuild-windows-arm64@0.13.9:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.9.tgz#545bb58848008258b339b1b00fcfe92c85bc7251"
+  integrity sha512-P/jPY2JwmTpgEPh9BkXpCe690tcDSSo0K9BHTniSeEAEz26kPpqldVa4XDm0R+hNnFA7ecEgNskr4QAxE1ry0w==

 esbuild@0.11.3:
  version "0.11.3"
@ -1962,27 +1989,27 @@ esbuild@0.11.3:
  integrity sha512-BzVRHcCtFepjS9WcqRjqoIxLqgpK21a8J4Zi4msSGxDxiXVO1IbcqT1KjhdDDnJxKfe7bvzZrvMEX+bVO0Elcw==

 esbuild@^0.13.2:
-  version "0.13.8"
-  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.13.8.tgz#bd7cc51b881ab067789f88e17baca74724c1ec4f"
-  integrity sha512-A4af7G7YZLfG5OnARJRMtlpEsCkq/zHZQXewgPA864l9D6VjjbH1SuFYK/OSV6BtHwDGkdwyRrX0qQFLnMfUcw==
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.13.9.tgz#aafc4b3375ac443ae7b223c26c4e58d10d2d535b"
+  integrity sha512-8bYcckmisXjGvBMeylp1PRtu21uOoCDFAgXGGF2BR241zYQDN6ZLNvcmQlnQ7olG0p6PRWmJI8WVH3ca8viPuw==
  optionalDependencies:
-    esbuild-android-arm64 "0.13.8"
-    esbuild-darwin-64 "0.13.8"
-    esbuild-darwin-arm64 "0.13.8"
-    esbuild-freebsd-64 "0.13.8"
-    esbuild-freebsd-arm64 "0.13.8"
-    esbuild-linux-32 "0.13.8"
-    esbuild-linux-64 "0.13.8"
-    esbuild-linux-arm "0.13.8"
-    esbuild-linux-arm64 "0.13.8"
-    esbuild-linux-mips64le "0.13.8"
-    esbuild-linux-ppc64le "0.13.8"
-    esbuild-netbsd-64 "0.13.8"
-    esbuild-openbsd-64 "0.13.8"
-    esbuild-sunos-64 "0.13.8"
-    esbuild-windows-32 "0.13.8"
-    esbuild-windows-64 "0.13.8"
-    esbuild-windows-arm64 "0.13.8"
+    esbuild-android-arm64 "0.13.9"
+    esbuild-darwin-64 "0.13.9"
+    esbuild-darwin-arm64 "0.13.9"
+    esbuild-freebsd-64 "0.13.9"
+    esbuild-freebsd-arm64 "0.13.9"
+    esbuild-linux-32 "0.13.9"
+    esbuild-linux-64 "0.13.9"
+    esbuild-linux-arm "0.13.9"
+    esbuild-linux-arm64 "0.13.9"
+    esbuild-linux-mips64le "0.13.9"
+    esbuild-linux-ppc64le "0.13.9"
+    esbuild-netbsd-64 "0.13.9"
+    esbuild-openbsd-64 "0.13.9"
+    esbuild-sunos-64 "0.13.9"
+    esbuild-windows-32 "0.13.9"
+    esbuild-windows-64 "0.13.9"
+    esbuild-windows-arm64 "0.13.9"

 escalade@^3.1.1:
  version "3.1.1"
@ -2367,6 +2394,16 @@ fs-extra@^5.0.0:
    jsonfile "^4.0.0"
    universalify "^0.1.0"

+fs-extra@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs.realpath@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@ -3261,7 +3298,7 @@ nanoid@^3.1.23:
  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
  integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==

-nanoid@^3.1.28:
+nanoid@^3.1.30:
  version "3.1.30"
  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
@ -3446,6 +3483,13 @@ parent-module@^1.0.0:
  dependencies:
    callsites "^3.0.0"

+parse-color@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/parse-color/-/parse-color-1.0.0.tgz#7b748b95a83f03f16a94f535e52d7f3d94658619"
+  integrity sha1-e3SLlag/A/FqlPU15S1/PZRlhhk=
+  dependencies:
+    color-convert "~0.5.0"
+
 parse-entities@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
@ -3527,10 +3571,10 @@ path@^0.12.7:
    process "^0.11.1"
    util "^0.10.3"

-picocolors@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
-  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==

 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
  version "2.3.0"
@ -3698,13 +3742,13 @@ postcss@^8.1.10, postcss@^8.2.6:
    nanoid "^3.1.23"
    source-map-js "^0.6.2"

-postcss@^8.3.8:
-  version "8.3.9"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.3.9.tgz#98754caa06c4ee9eb59cc48bd073bb6bd3437c31"
-  integrity sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw==
+postcss@^8.2.9, postcss@^8.3.8:
+  version "8.3.11"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
+  integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
  dependencies:
-    nanoid "^3.1.28"
-    picocolors "^0.2.1"
+    nanoid "^3.1.30"
+    picocolors "^1.0.0"
    source-map-js "^0.6.2"

 preact@^10.4.8:
@ -3933,9 +3977,9 @@ rimraf@^3.0.2:
    glob "^7.1.3"

 rollup@^2.57.0:
-  version "2.58.0"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.58.0.tgz#a643983365e7bf7f5b7c62a8331b983b7c4c67fb"
-  integrity sha512-NOXpusKnaRpbS7ZVSzcEXqxcLDOagN6iFS8p45RkoiMqPHDLwJm758UF05KlMoCRbLBTZsPOIa887gZJ1AiXvw==
+  version "2.58.3"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-2.58.3.tgz#71a08138d9515fb65043b6a18618b2ed9ac8d239"
+  integrity sha512-ei27MSw1KhRur4p87Q0/Va2NAYqMXOX++FNEumMBcdreIRLURKy+cE2wcDJKBn0nfmhP2ZGrJkP1XPO+G8FJQw==
  optionalDependencies:
    fsevents "~2.3.2"

@ -4150,7 +4194,7 @@ string-argv@0.3.1:
  resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==

-string-hash@^1.1.1:
+string-hash@^1.1.1, string-hash@^1.1.3:
  version "1.1.3"
  resolved "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
@ -4657,10 +4701,10 @@ vite-svg-loader@^2.2.0:
    "@vue/compiler-sfc" "^3.0.11"
    svgo "^2.3.0"

-vite@^2.6.10:
-  version "2.6.10"
-  resolved "https://registry.npmjs.org/vite/-/vite-2.6.10.tgz#7a4f420c6e2c7d9062c7f9ce4578a817c72b3842"
-  integrity sha512-XbevwpDJMs3lKiGEj0UQScsOCpwHIjFgfzPnFVkPgnxsF9oPv1uGyckLg58XkXv6LnO46KN9yZqJzINFmAxtUg==
+vite@^2.6.11:
+  version "2.6.11"
+  resolved "https://registry.npmjs.org/vite/-/vite-2.6.11.tgz#20d3d8f4b4fe38904a2e425356aab1cb23325e12"
+  integrity sha512-JWnGmiO1IFwou9aUWS4N0kMyHcgTTt1+2f4bJyzgBJLJDyAqGEX3HewE4jgrL6V4d9+mxs+lZ4L8HL2kyVBe7A==
  dependencies:
    esbuild "^0.13.2"
    postcss "^8.3.8"