refactor(design): add windicss

.env.production

@@ -10,7 +10,7 @@ VITE_DROP_CONSOLE = true
 # Whether to enable gizp or brotli compression
 # Optional: gzip | brotli | none
 # If you need multiple forms, you can use `,` to separate
-VITE_BUILD_COMPRESS = 'gzip'
+VITE_BUILD_COMPRESS = 'none'
 
 # Basic interface address SPA
 VITE_GLOB_API_URL=/api

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
+    "johnsoncodehk.volar",
     "octref.vetur",
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",

.vscode/settings.json

@@ -1,5 +1,7 @@
 {
   "typescript.tsdk": "./node_modules/typescript/lib",
+  "volar.tsPlugin": true,
+  "volar.tsPluginStatus": false,
   //===========================================
   //============= Editor ======================
   //===========================================

CHANGELOG.zh_CN.md

@@ -1,10 +1,15 @@
 ## Wip
 
+### ✨ Refactor
+
+- 移除`global.less`,`mixin.less`,`design/helper`,由`windicss`代替,有用到的需要修改对应的样式
+
 ### ✨ Features
 
 - useModal 新增返回值函数 `redoModalHeight`,用于在 modal 内为动态内容时刷新 modal 高度
 - 升级 husky 到 5.0
 - 新增 `brotli`|`gzip`压缩及相关测试命令
+- 重新引入 `windicss` (与`tailwind`一样).在速度上更快
 
 ### ⚡ Performance Improvements
 
@@ -23,7 +28,8 @@
 ### 🎫 Chores
 
 - 文档更新
-- 升级 ant-design-vue 到 2.0.0
+- 升级 ant-design-vue 到 `2.0.0`
+- 升级 vite 到 `2.0.0`
 
 ## 2.0.0-rc.18 (2021-02-05)
 

build/vite/plugin/index.ts

@@ -1,10 +1,12 @@
 import type { Plugin } from 'vite';
 
-import PurgeIcons from 'vite-plugin-purge-icons';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import legacy from '@vitejs/plugin-legacy';
 
+import windiCSS from 'vite-plugin-windicss';
+import PurgeIcons from 'vite-plugin-purge-icons';
+
 import { ViteEnv } from '../../utils';
 import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
@@ -23,6 +25,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     vue(),
     // have to
     vueJsx(),
+    ...windiCSS(),
   ];
 
   // @vitejs/plugin-legacy

package.json

@@ -51,9 +51,9 @@
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@iconify/json": "^1.1.299",
+    "@iconify/json": "^1.1.303",
     "@ls-lint/ls-lint": "^1.9.2",
-    "@purge-icons/generated": "^0.6.0",
+    "@purge-icons/generated": "^0.7.0",
     "@types/echarts": "^4.9.3",
     "@types/fs-extra": "^9.0.7",
     "@types/http-proxy": "^1.17.5",
@@ -99,15 +99,16 @@
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.5",
-    "vite": "2.0.0-beta.70",
+    "vite": "2.0.0",
     "vite-plugin-compression": "^0.2.1",
     "vite-plugin-html": "^2.0.0",
     "vite-plugin-imagemin": "^0.2.6",
     "vite-plugin-mock": "^2.1.4",
-    "vite-plugin-purge-icons": "^0.6.0",
-    "vite-plugin-pwa": "^0.4.6",
+    "vite-plugin-purge-icons": "^0.7.0",
+    "vite-plugin-pwa": "^0.4.7",
     "vite-plugin-style-import": "^0.7.2",
     "vite-plugin-theme": "^0.4.3",
+    "vite-plugin-windicss": "^0.2.2",
     "vue-eslint-parser": "^7.5.0",
     "yargs": "^16.2.0"
   },

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <ConfigProvider v-bind="lockEvent" :locale="antConfigLocale">
     <AppProvider>
-      <router-view />
+      <RouterView />
     </AppProvider>
   </ConfigProvider>
 </template>

src/components/Application/src/AppLogo.vue

@@ -9,7 +9,11 @@
     @click="handleGoHome"
   >
     <img src="../../../assets/images/logo.png" />
-    <div class="ml-2 ellipsis" :class="[`${prefixCls}__title`]" v-show="showTitle">
+    <div
+      class="ml-2 truncate xs:opacity-0 md:opacity-100"
+      :class="`${prefixCls}__title`"
+      v-show="showTitle"
+    >
       {{ title }}
     </div>
   </div>
@@ -85,12 +89,7 @@
     &__title {
       font-size: 16px;
       font-weight: 700;
-      opacity: 0;
       transition: all 0.5s;
-
-      .respond-to(medium,{
-       opacity: 1;
-      });
     }
   }
 </style>

src/components/Basic/src/BasicTitle.vue

@@ -41,8 +41,8 @@
     font-weight: 700;
     line-height: 24px;
     color: @text-color-base;
-
-    .unselect();
+    cursor: pointer;
+    user-select: none;
 
     &.show-span::before {
       position: absolute;

src/components/SimpleMenu/src/components/menu.less

@@ -41,10 +41,6 @@
       cursor: pointer;
       transition: all @transition-time @ease-in-out;
 
-      // &:hover {
-      //   color: @primary-color;
-      // }
-
       &-icon {
         position: absolute;
         top: 50%;
@@ -164,9 +160,10 @@
       position: relative;
       z-index: 1;
       padding: 12px 24px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       cursor: pointer;
-      .text-truncate();
-      // transition: all @transition-time @ease-in-out;
 
       &:hover {
         color: @primary-color;

src/components/SimpleMenu/src/index.less

@@ -18,15 +18,19 @@
   }
 
   .collapse-title {
+    overflow: hidden;
     font-size: 12px;
-    .text-truncate();
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
 .@{simple-prefix-cls} {
   &-sub-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     transition: all 0.3s;
-    .text-truncate();
   }
 
   &-tag {

src/components/Upload/src/data.tsx

@@ -40,7 +40,7 @@ export function createTableColumns(): BasicColumn[] {
         }
         return (
           <span>
-            <p class="ellipsis mb-1" title={text}>
+            <p class="truncate mb-1" title={text}>
               {text}
             </p>
             <Progress percent={percent} size="small" status={status} />

src/design/ant/input.less

@@ -1,4 +1,3 @@
-@import '../mixins.less';
 @import '../color.less';
 
 // input

src/design/config.less

@@ -1,3 +1,2 @@
 @import 'color.less';
 @import 'var/index.less';
-@import 'mixins.less';

src/design/global.less

@@ -1,73 +0,0 @@
-@import './helper/distance.less';
-.distance();
-
-.flex {
-  display: flex;
-}
-
-.align-middle {
-  vertical-align: middle;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-.relative {
-  position: relative;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-wrap: normal;
-  white-space: nowrap;
-}
-
-.shadow-xs {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-}
-
-.shadow-sm {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.shadow {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-}
-
-.shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}

src/design/helper/distance.less

@@ -1,38 +0,0 @@
-@import 'loop.less';
-// margin 步长
-@margin-size-base: 4;
-
-// 最大生成
-@margin-size-max: 10;
-
-// padding步长
-@padding-size-base: 4;
-
-// 最大生成
-@padding-size-max: 10;
-
-.distance() {
-  // 生成margin
-  .loop (m, margin, 1, @margin-size-base, @margin-size-max);
-  .loop (mt, margin-top, 1, @margin-size-base, @margin-size-max);
-  .loop (mr, margin-right, 1, @margin-size-base, @margin-size-max);
-  .loop (mb, margin-bottom, 1, @margin-size-base, @margin-size-max);
-  .loop (ml, margin-left, 1, @margin-size-base, @margin-size-max);
-  .loop (my, margin, 1, @margin-size-base, @margin-size-max, y);
-  .loop (mx, margin, 1, @margin-size-base, @margin-size-max, x);
-  .loop (mx-auto, margin, 1, @padding-size-base, @padding-size-max, autoX);
-  .loop (my-auto, margin, 1, @padding-size-base, @padding-size-max, autoY);
-  .loop (m-auto, margin, 1, @padding-size-base, @padding-size-max, auto);
-
-  // 生成padding
-  .loop (p, padding, 1, @padding-size-base, @padding-size-max);
-  .loop (pt, padding-top, 1, @padding-size-base, @padding-size-max);
-  .loop (pr, padding-right, 1, @padding-size-base, @padding-size-max);
-  .loop (pb, padding-bottom, 1, @padding-size-base, @padding-size-max);
-  .loop (pl, padding-left, 1, @padding-size-base, @padding-size-max);
-  .loop (py, padding, 1, @padding-size-base, @padding-size-max, y);
-  .loop (px, padding, 1, @padding-size-base, @padding-size-max, x);
-  .loop (px-auto, padding, 1, @padding-size-base, @padding-size-max, autoX);
-  .loop (py-auto, padding, 1, @padding-size-base, @padding-size-max, autoY);
-  .loop (p-auto, padding, 1, @padding-size-base, @padding-size-max, auto);
-}

src/design/helper/loop.less

@@ -1,67 +0,0 @@
-.loop (@style-name, @tag-name, @i,@base-size, @max:10,@xy:none) when (@i <= @max) {
-  @next: @i+1;
-  .fn() when (@xy =none) {
-    @size: @base-size * @i;
-
-    .@{style-name}-@{i} {
-      @{tag-name}: ~'@{size}px ';
-    }
-    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
-  }
-
-  .fn() when (@xy =x) {
-    @size: @base-size * @i;
-
-    @tnl: ~'@{tag-name}-left';
-    @tnr: ~'@{tag-name}-right';
-
-    .@{style-name}-@{i} {
-      @{tnl}: ~'@{size}px';
-      @{tnr}: ~'@{size}px';
-    }
-    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
-  }
-  .fn() when (@xy =y) {
-    @size: @base-size * @i;
-
-    @tnt: ~'@{tag-name}-top';
-    @tnb: ~'@{tag-name}-bottom';
-
-    .@{style-name}-@{i} {
-      @{tnt}: ~'@{size}px';
-      @{tnb}: ~'@{size}px';
-    }
-    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
-  }
-  .fn() when (@xy =auto) {
-    @tnt: ~'@{tag-name}-top';
-    @tnb: ~'@{tag-name}-bottom';
-    @tnl: ~'@{tag-name}-left';
-    @tnr: ~'@{tag-name}-right';
-    .@{style-name} {
-      @{tnl}: ~'auto';
-      @{tnr}: ~'auto';
-      @{tnt}: ~'auto';
-      @{tnb}: ~'auto';
-    }
-  }
-
-  .fn() when (@xy =autoX) {
-    @tnl: ~'@{tag-name}-left';
-    @tnr: ~'@{tag-name}-right';
-    .@{style-name} {
-      @{tnl}: ~'auto';
-      @{tnr}: ~'auto';
-    }
-  }
-
-  .fn() when (@xy =autoY) {
-    @tnt: ~'@{tag-name}-top';
-    @tnb: ~'@{tag-name}-bottom';
-    .@{style-name} {
-      @{tnt}: ~'auto';
-      @{tnb}: ~'auto';
-    }
-  }
-  .fn();
-}

src/design/index.less

@@ -1,9 +1,7 @@
 @import 'transition/index.less';
 @import 'var/index.less';
 @import 'public.less';
-@import 'mixins.less';
 @import 'ant/index.less';
-@import 'global.less';
 
 *,
 *::before,

src/design/mixins.less

@@ -1,85 +0,0 @@
-// Text truncation
-.text-truncate() {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Force no line break */
-.word-nowrap() {
-  word-wrap: normal;
-  white-space: nowrap;
-}
-
-/* Force line break */
-.break-all() {
-  word-break: break-all;
-  word-wrap: break-word;
-  white-space: normal;
-}
-
-// Prohibit selection
-.unselect() {
-  cursor: pointer;
-  user-select: none;
-}
-
-/* Suitable for webkit core and mobile */
-.ellipsis-multiple(@num: 1) {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: @num;
-}
-
-.respond-to (small, @content) {
-  @media only screen and (min-width: @screen-sm-min) {
-    @content();
-  }
-}
-.respond-to (medium, @content) {
-  @media only screen and (min-width: @screen-md-min) {
-    @content();
-  }
-}
-.respond-to (large, @content) {
-  @media only screen and (min-width: @screen-lg-min) {
-    @content();
-  }
-}
-.respond-to (xlarge, @content) {
-  @media only screen and (min-width: @screen-xl-min) {
-    @content();
-  }
-}
-.respond-to (xsmall-only, @content) {
-  @media only screen and (max-width: @screen-xs-max) {
-    @content();
-  }
-}
-.respond-to (small-only, @content) {
-  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-    @content();
-  }
-}
-.respond-to (medium-only, @content) {
-  @media only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-    @content();
-  }
-}
-.respond-to (large-only, @content) {
-  @media only screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
-    @content();
-  }
-}
-
-.respond-to (xsmall-and-small, @content) {
-  @media only screen and (max-width: @screen-sm-max) {
-    @content();
-  }
-}
-.respond-to (small-and-medium, @content) {
-  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
-    @content();
-  }
-}

src/design/var/index.less

@@ -35,7 +35,7 @@
 // left-menu
 @app-menu-item-height: 42px;
 
-.bem(@n;@content) {
+.bem(@n; @content) {
   @{namespace}-@{n} {
     @content();
   }

src/layouts/page/ParentView.vue

@@ -3,7 +3,7 @@
 -->
 <template>
   <div>
-    <router-view>
+    <RouterView>
       <template #default="{ Component, route }">
         <transition
           :name="
@@ -24,7 +24,7 @@
           <component v-else :is="Component" v-bind="getKey(Component, route)" />
         </transition>
       </template>
-    </router-view>
+    </RouterView>
   </div>
 </template>
 <script lang="ts">

src/layouts/page/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <router-view>
+    <RouterView>
       <template #default="{ Component, route }">
         <transition
           :name="
@@ -21,7 +21,7 @@
           <component v-else :is="Component" v-bind="getKey(Component, route)" />
         </transition>
       </template>
-    </router-view>
+    </RouterView>
     <FrameLayout v-if="getCanEmbedIFramePage" />
   </div>
 </template>

src/main.ts

@@ -1,3 +1,6 @@
+import '/@/design/index.less';
+import 'windi.css';
+
 import { createApp } from 'vue';
 import App from './App.vue';
 
@@ -11,8 +14,6 @@ import { registerGlobComp } from '/@/components/registerGlobComp';
 
 import { isDevMode } from '/@/utils/env';
 
-import '/@/design/index.less';
-
 const app = createApp(App);
 
 registerGlobComp(app);

src/types/shims-volar.d.ts

@@ -0,0 +1,14 @@
+import { RouterLink, RouterView } from 'vue-router';
+
+import { Button } from '/@/components/Button';
+import { Col, Row } from 'ant-design-vue';
+
+declare global {
+  interface __VLS_GlobalComponents {
+    RouterLink: typeof RouterLink;
+    RouterView: typeof RouterView;
+    'a-button': typeof Button;
+    'a-col': typeof Col;
+    'a-row': typeof Row;
+  }
+}

src/views/dashboard/analysis/index.vue

@@ -70,9 +70,5 @@
 <style lang="less" scoped>
   .analysis {
     width: 100%;
-
-    .product-total {
-      .respond-to(small-and-medium, {padding-right: 0;margin-bottom: 24px;});
-    }
   }
 </style>

src/views/demo/feat/copy/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageWrapper title="文本复制示例">
-    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Copy Example">
+    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Copy Example">
       <div class="flex justify-center">
         <a-input placeholder="请输入" v-model:value="value" />
         <a-button type="primary" @click="handleCopy"> Copy </a-button>

src/views/demo/feat/full-screen/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageWrapper title="全屏示例">
-    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Window Full Screen">
+    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Window Full Screen">
       <a-button type="primary" @click="enterFullscreen" class="mr-2">
         Enter Window Full Screen
       </a-button>
@@ -15,13 +15,13 @@
       Current State: {{ isFullscreenRef }}
     </CollapseContainer>
 
-    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Dom Full Screen">
+    <CollapseContainer class="w-full mt-5 bg-white rounded-md" title="Dom Full Screen">
       <a-button type="primary" @click="toggleDom" class="mr-2"> Enter Dom Full Screen </a-button>
     </CollapseContainer>
 
     <div
       ref="domRef"
-      class="w-1/2 h-64 flex justify-center rounded-md items-center bg-white mx-auto mt-10"
+      class="flex items-center justify-center w-1/2 h-64 mx-auto mt-10 bg-white rounded-md"
     >
       <a-button type="primary" @click="toggleDom" class="mr-2"> Exit Dom Full Screen </a-button>
     </div>

src/views/demo/feat/msg/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageWrapper title="消息示例">
-    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Message">
+    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Message">
       <a-button @click="infoMsg('Info message')" class="mr-2"> Info </a-button>
       <a-button @click="successMsg('Success message')" class="mr-2" color="success">
         Success
@@ -12,14 +12,14 @@
       <a-button @click="handleLoading" class="mr-2" type="primary"> Loading </a-button>
     </CollapseContainer>
 
-    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Comfirm">
+    <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="Comfirm">
       <a-button @click="handleConfirm('info')" class="mr-2"> Info </a-button>
       <a-button @click="handleConfirm('warning')" color="warning" class="mr-2"> Warning </a-button>
       <a-button @click="handleConfirm('success')" color="success" class="mr-2"> Success </a-button>
       <a-button @click="handleConfirm('error')" color="error" class="mr-2"> Error </a-button>
     </CollapseContainer>
 
-    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Modal">
+    <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="Modal">
       <a-button @click="handleInfoModal" class="mr-2"> Info </a-button>
       <a-button @click="handleSuccessModal" color="success" class="mr-2"> Success </a-button>
       <a-button @click="handleErrorModal" color="error" class="mr-2"> Error </a-button>
@@ -27,7 +27,7 @@
     </CollapseContainer>
 
     <CollapseContainer
-      class="px-20 bg-white w-full h-32 rounded-md mt-5"
+      class="w-full h-32 mt-5 bg-white rounded-md"
       title="Notification 用法与上面一致"
     >
       <a-button @click="handleNotify" color="success" class="mr-2"> Success </a-button>

src/views/demo/feat/watermark/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageWrapper title="水印示例">
-    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Global WaterMark">
+    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Global WaterMark">
       <a-button type="primary" class="mr-2" @click="setWatermark('WaterMark Info')">
         Create
       </a-button>

src/views/sys/login/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
-    <div class="login-mask"></div>
-    <div class="login-form-wrap">
+    <div class="opacity-0 login-mask lg:opacity-100"></div>
+    <div class="justify-center login-form-wrap lg:justify-end">
       <div class="mx-6 login-form">
         <AppLocalePicker v-if="showLocale" class="login-form__locale" />
         <div class="px-2 py-10 login-form__content">
@@ -164,13 +164,10 @@
     background-size: 100% 100%;
 
     &-mask {
-      display: none;
       height: 100%;
       background: url(../../../assets/images/login/login-in.png) no-repeat;
       background-position: 30% 30%;
       background-size: 80% 80%;
-
-      .respond-to(xlarge, { display: block;});
     }
 
     &-form {
@@ -182,7 +179,6 @@
       border-width: 8px;
       border-radius: 4px;
       background-clip: padding-box;
-      .respond-to(xlarge, { margin: 0 120px 0 50px});
 
       &__main {
         margin: 30px auto 0 auto !important;
@@ -195,12 +191,7 @@
         display: flex;
         width: 100%;
         height: 100%;
-        // height: 90%;
-        justify-content: center;
         align-items: center;
-        .respond-to(xlarge, {
-        justify-content: flex-end;
-          });
       }
 
       &__content {

tailwind.config.js

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const colors = require('windicss/colors');
+const defaultTheme = require('windicss/defaultTheme');
+module.exports = {
+  darkMode: 'class',
+  plugins: [
+    require('windicss/plugin/forms'),
+    require('windicss/plugin/typography'),
+    require('windicss/plugin/line-clamp'),
+    require('windicss/plugin/aspect-ratio'),
+  ],
+  theme: {
+    extend: {
+      colors,
+      fontFamily: {
+        sans: ['Righteous', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+};

yarn.lock

@@ -1112,10 +1112,10 @@
   dependencies:
     cross-fetch "^3.0.6"
 
-"@iconify/json@^1.1.299":
-  version "1.1.299"
-  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.299.tgz#e1aca556b83461316ba5ec04b232906b499a67a5"
-  integrity sha512-oYHUgp5RZNE2CT3wKE/MWbmGK7lmubi30PD5l33HUU7yh4CznmzPL0Ewgg51Wn86NkFveZDcT+odMBTaayh9Ew==
+"@iconify/json@^1.1.303":
+  version "1.1.303"
+  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.303.tgz#364daf69a97c02647227cc0d851a2e79a893e8e3"
+  integrity sha512-O8KDBcIVQolvUeVL9JiEIc2ifYKWyKu/5cX6PNC4EAPvtfvieOHs1YVPV4tphVhafjTTftR5XbZBmZHKG6uNIA==
 
 "@intlify/core-base@9.0.0-beta.16":
   version "9.0.0-beta.16"
@@ -1226,21 +1226,21 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
-"@purge-icons/core@^0.6.0":
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/@purge-icons/core/-/core-0.6.0.tgz#b966d042c504a256299b2d63b4d16ae26c9e0317"
-  integrity sha512-Gp7Fvx1mtPykejxldJ8+1o2C/Gzw54Mpv22JKNoKnaUlKGe1m4f0rAl2MgHDGJd/ghm4kDcfxFzjnna6Z4L5cA==
+"@purge-icons/core@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/@purge-icons/core/-/core-0.7.0.tgz#097ba8d4d8b7e8d662df687bd2391eb8b83caba0"
+  integrity sha512-PaCeTFjkQUX+MzBsNg3L8x5aCZqXwaUSNw1FY3Jn7wlLqNqxRNoShw5P//a1DQAy7hLlUHvEL6IGeDoN/xf98A==
   dependencies:
     "@iconify/iconify" "2.0.0-rc.6"
     axios "^0.21.1"
     debug "^4.3.2"
-    fast-glob "^3.2.4"
-    fs-extra "^9.0.1"
+    fast-glob "^3.2.5"
+    fs-extra "^9.1.0"
 
-"@purge-icons/generated@^0.6.0":
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/@purge-icons/generated/-/generated-0.6.0.tgz#2aa9a78fef6a4dc79d265c84548e110375b554df"
-  integrity sha512-Xg2ckJu/wRSSNEloebCaKSIAamKMZffws4+2oOjA1J3JEyD5FlP3Ewt+kkcuun/i7Mo2czjTKJG9wwSwZgf0cg==
+"@purge-icons/generated@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/@purge-icons/generated/-/generated-0.7.0.tgz#d87dbb3145e8b9a64e2e12ff660aa3cb13cbeb56"
+  integrity sha512-4SHVpZnKaW5ekRTjhPY9b1pALVlF0pDuGIDRAlxAm0V+gQVOL0+Ghav6U9XqXFj2kiG1+eQ8swpvB+kd0a+tqg==
   dependencies:
     "@iconify/iconify" ">=2.0.0-rc.6"
 
@@ -7859,13 +7859,13 @@ rollup-plugin-esbuild@^2.6.1:
     joycon "^2.2.5"
     strip-json-comments "^3.1.1"
 
-rollup-plugin-purge-icons@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-purge-icons/-/rollup-plugin-purge-icons-0.6.0.tgz#cfddf4935107180bdb14385228449c0d8b0557a2"
-  integrity sha512-8huBXnq7D1Lj2gPZP/rOjuj2hkZ3AXoGQc2r5+MK3lcD3xEgfuONd+G4WIk7P8wJTEVGux5xJ2Ho7nSISLqP1A==
+rollup-plugin-purge-icons@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-purge-icons/-/rollup-plugin-purge-icons-0.7.0.tgz#4419b810d5d75f1bba3af72a238e70b4a675f03c"
+  integrity sha512-zAff7SrjC2nA7TCm6gaOclh1cZ2IBupX1tnebn+sfvcvrezu+avS7k0BhhAC2pAtfhdOvD6G/2a+kkkm6hvpiw==
   dependencies:
-    "@purge-icons/core" "^0.6.0"
-    "@purge-icons/generated" "^0.6.0"
+    "@purge-icons/core" "^0.7.0"
+    "@purge-icons/generated" "^0.7.0"
 
 rollup-plugin-terser@^7.0.0:
   version "7.0.2"
@@ -9334,19 +9334,19 @@ vite-plugin-mock@^2.1.4:
     rollup "^2.38.4"
     rollup-plugin-esbuild "^2.6.1"
 
-vite-plugin-purge-icons@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/vite-plugin-purge-icons/-/vite-plugin-purge-icons-0.6.0.tgz#f165266f157d88368edcc7ae3baf933d6d92e779"
-  integrity sha512-YGW3wh+Pj4Tob23x29+NgVkslru5tAInIMTY0J2eltDNy32RKxSRh8ohb+W0O/X9h2xKkMeiUpNI7mY6k8Uzsw==
+vite-plugin-purge-icons@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/vite-plugin-purge-icons/-/vite-plugin-purge-icons-0.7.0.tgz#c460037438fd71372153360ccb9e7d97b030fb58"
+  integrity sha512-oGZUKFAL4waIZIeiCPT5KZvGbBA500AO/03oxW+ODTKUMq+0jbh9s+T8NPzfJQFC1jtE7eUb2ium82IP/gxZjA==
   dependencies:
-    "@purge-icons/core" "^0.6.0"
-    "@purge-icons/generated" "^0.6.0"
-    rollup-plugin-purge-icons "^0.6.0"
+    "@purge-icons/core" "^0.7.0"
+    "@purge-icons/generated" "^0.7.0"
+    rollup-plugin-purge-icons "^0.7.0"
 
-vite-plugin-pwa@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.6.tgz#e759b7840211f83cae367d306654da505cecbceb"
-  integrity sha512-3LonumSG4EcH9FT61d7wWouHkCmEciy3RPfvt25b835HMx9gb2Dt71t140+85Z5d+uANMSguC3miBnnGzagAMA==
+vite-plugin-pwa@^0.4.7:
+  version "0.4.7"
+  resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.7.tgz#32d934171fc7ec5cada741c559b5fbf2fe5a39af"
+  integrity sha512-KsC9tenzn1r6AG/Hda4wg9Es6AokVRz2RqQp+R+uM3qvfNDbdDjJWAEhB/2zUx7D0YDu5Y0h+cDC0zD0vxBoog==
   dependencies:
     debug "^4.3.2"
     fast-glob "^3.2.5"
@@ -9376,10 +9376,18 @@ vite-plugin-theme@^0.4.3:
     es-module-lexer "^0.3.26"
     tinycolor2 "^1.4.2"
 
-vite@2.0.0-beta.70:
-  version "2.0.0-beta.70"
-  resolved "https://registry.npmjs.org/vite/-/vite-2.0.0-beta.70.tgz#ec0d4f2bfd02f31d2c59aa9760f27c26647f41ce"
-  integrity sha512-rbuAYZE8T0jNOUykkyfjiiKmz4MpW2KqzHO8++WCCDXyxzIg56ICQ/B6NLZzVpWyk0iSKiUKr2k8NMkmDlZAQQ==
+vite-plugin-windicss@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.2.2.tgz#2abf1533153f5dc214a9e1a06fb58274e5892c19"
+  integrity sha512-P+iyrcuLjLfjiYP+bBisfKbg9bmeQMUBpjsTFJ9kWWX2fyqo968CHmS3euz+MzRcK5ZECccpOxx60ZXzc12VAw==
+  dependencies:
+    fast-glob "^3.2.5"
+    windicss "^2.1.11"
+
+vite@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/vite/-/vite-2.0.0.tgz#156f35eadaa7947629aa8a24eb23129b07116ee3"
+  integrity sha512-rNli5g0DaQ6+btlRqkmaR06neWaJGApmt40gocqrYDNi2XoEXYQgKiHSWzMeUgc1Cdva2HduqazaE+RaKjBpdQ==
   dependencies:
     esbuild "^0.8.34"
     postcss "^8.2.1"
@@ -9507,6 +9515,11 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+windicss@^2.1.11:
+  version "2.1.11"
+  resolved "https://registry.npmjs.org/windicss/-/windicss-2.1.11.tgz#35dc9d683488dcfacf94331967b59765a505f18b"
+  integrity sha512-79mPoUmvamwdJb+MJ/ug+XILxFzrTNCXo/HmacUn3V9sRQ6w5lA9KkpTrG70N7Oab0hbIFaq+X3Yva+QLSV0Pw==
+
 wmf@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz#7d19d621071a08c2bdc6b7e688a9c435298cc2da"