Add flex box gap polyfill

.postcssrc.js

@@ -1,5 +1,8 @@
-module.exports = {
+module.exports = ({ env, options }) => ({
-  plugins: {
+  ...options,
-    autoprefixer: {},
+  plugins: [
-  },
+    require('autoprefixer')({}),
-}
+    // require('flex-gap-polyfill')() // bugly with vite
+    // require('stylelint')({}), //
+  ],
+})

.stylelintignore

@@ -0,0 +1 @@
+node_modules

.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "rule-empty-line-before": "never",
+    "indentation": 2
+  }
+}

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "stylelint.enable": false,
   "php-docblocker.returnGap": true,
   "php-docblocker.qualifyClassNames": true,
   "php-docblocker.author": {

app/functions.php

@@ -5,7 +5,7 @@
 define('SAKURA_VERSION', wp_get_theme()->get('Version'));
 define('SAKURA_TEXT_DOMAIN', wp_get_theme()->get('TextDomain'));
 
-define('SAKURA_DEVEPLOMENT', false);
+define('SAKURA_DEVEPLOMENT', true);
 define('SAKURA_DEVEPLOMENT_HOST', 'http://127.0.0.1:9000');
 
 // PHP loaders

package.json

@@ -69,6 +69,7 @@
     "vue-router": "^4.0.10"
   },
   "devDependencies": {
+    "@amatlash/vite-plugin-stylelint": "^1.1.1",
     "@formatjs/cli": "^4.2.27",
     "@types/chroma-js": "^2.1.3",
     "@types/crypto-js": "^4.0.1",
@@ -92,11 +93,15 @@
     "eslint-plugin-formatjs": "^2.17.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.13.0",
+    "flex-gap-polyfill": "^4.0.6",
     "jest": "^27.0.6",
     "nodemon": "^2.0.12",
     "postcss-import": "^14.0.2",
     "prettier": "^2.3.2",
     "resize-observer-polyfill": "^1.5.1",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-scss": "^3.20.1",
     "svgo": "^2.3.1",
     "ts-jest": "^27.0.3",
     "type-fest": "^1.2.2",
@@ -109,7 +114,7 @@
   },
   "engines": {
     "npm": "please-use-yarn",
-    "yarn": ">= 1.22.10",
+    "yarn": ">= 1.22.0",
-    "node": ">= 14.17.1"
+    "node": ">= 14.0.0"
   }
 }

src/admin/Core.vue

@@ -147,6 +147,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
+
 ::v-deep() {
   @import 'swiper/swiper';
 }
@@ -211,9 +213,9 @@ export default defineComponent({
     flex-flow: row wrap;
     justify-content: flex-start;
     align-items: center;
-    gap: 12px;
     padding: 12px;
     width: calc(100% - 24px);
+    @include polyfills.flex-gap(12px, 'row wrap');
   }
 }
 </style>

src/admin/components/MediaPicker.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="picker__container">
+    <div class="flex-box">
       <div class="row__wrapper--input">
         <div class="input__wrapper">
           <OutlinedInput v-model:content="userInput" label="Input remote URL here"></OutlinedInput>
@@ -11,6 +12,8 @@
           <NormalButton icon="fas fa-box-open" context="Pick" :contained="true"></NormalButton>
         </div>
       </div>
+    </div>
+    <div class="flex-box">
       <div class="row__wrapper--preview">
         <div class="image__box" v-for="(item, index) in selection" :key="index">
           <div class="image__wrapper">
@@ -22,6 +25,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -150,23 +154,24 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @use '../variables';
+@use '@/styles/mixins/polyfills';
 .picker__container {
   width: 100%;
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: center;
-  gap: 12px;
+  @include polyfills.flex-gap(12px, 'column nowrap');
   > * {
     width: 100%;
   }
-  > .row__wrapper {
+  > .flex-box > .row__wrapper {
     &--input {
       display: flex;
       flex-flow: row nowrap;
       justify-content: space-between;
       align-items: center;
-      gap: 12px;
+      @include polyfills.flex-gap(12px, 'row nowrap');
       > .input__wrapper {
         flex: 1 1 auto;
         width: 100%;
@@ -177,6 +182,7 @@ export default defineComponent({
       @media screen and (max-width: variables.$small-mobile-max-width) {
         flex-flow: row wrap;
         justify-content: flex-start;
+        @include polyfills.flex-gap(12px, 'row wrap');
         > .input__wrapper {
           flex: 0 0 auto;
         }
@@ -187,7 +193,7 @@ export default defineComponent({
       flex-flow: row wrap;
       justify-content: flex-start;
       align-items: center;
-      gap: 12px;
+      @include polyfills.flex-gap(12px, 'row wrap');
       > .image__box {
         position: relative;
         overflow: hidden;

src/components/cards/postThumbCards/PostThumbCardClassic.vue

@@ -5,32 +5,32 @@
       <div class="thumbnail__wrapper" @click="handleViewPostDetailEvent">
         <Image
           class="image"
-          :src="data.featureImage.thumbnail"
+          :src="$props.data.featureImage.thumbnail"
-          :alt="data.title"
+          :alt="$props.data.title"
           placeholder="https://via.placeholder.com/1024x768"
           :draggable="false"
         />
       </div>
       <div class="details__wrapper">
         <div class="row__wrapper--date">
-          <span><i class="far fa-clock"></i> {{ data.publistTime }}</span>
+          <span><i class="far fa-clock"></i> {{ $props.data.publistTime }}</span>
         </div>
         <div class="row__wrapper--title" @click="handleViewPostDetailEvent">
-          <span>{{ data.title }}</span>
+          <span>{{ $props.data.title }}</span>
         </div>
         <div class="row__wrapper--info">
           <div class="column__wrapper--read_count">
-            <span><i class="fab fa-hotjar"></i> {{ data.readCount }}</span>
+            <span><i class="fab fa-hotjar"></i> {{ $props.data.readCount }}</span>
           </div>
           <div class="column__wrapper--comment_count">
-            <span> <i class="far fa-comment-dots"></i> {{ data.commentCount }}</span>
+            <span> <i class="far fa-comment-dots"></i> {{ $props.data.commentCount }}</span>
           </div>
           <div class="column__wrapper--word_count">
-            <span><i class="fas fa-pen-nib"></i> {{ data.wordCount }}</span>
+            <span><i class="fas fa-pen-nib"></i> {{ $props.data.wordCount }}</span>
           </div>
         </div>
         <div class="row__wrapper--abstruct">
-          <span>{{ data.excerpt }} </span>
+          <span>{{ $props.data.excerpt }} </span>
         </div>
         <!-- <div class="row__wrapper--tags">
           <div class="tags__container">
@@ -76,16 +76,11 @@ export default defineComponent({
       defaultMessage: 'Read More',
     })
 
-    const data = props.data
-
     const handleViewPostDetailEvent = () => {
-      if (data) {
+      linkHandler.handleClickLink({ url: props.data?.link ?? '', router, target: '_blank' })
-        linkHandler.handleClickLink({ url: data.value?.link ?? '', router, target: '_blank' })
-      }
     }
 
     return {
-      data,
       buttonContext,
       handleViewPostDetailEvent,
       setContentRef,
@@ -98,6 +93,7 @@ export default defineComponent({
 @use '@/styles/mixins/text';
 @use '@/styles/mixins/tags';
 // @use '@/styles/mixins/skeleton';
+@use '@/styles/mixins/polyfills';
 
 .card__container {
   // TODO: sizing in parent
@@ -189,25 +185,25 @@ export default defineComponent({
             @include text.line-number-limit(3);
           }
         }
-        // &--tags {
+        &--tags {
-        //   max-height: 16px;
+          max-height: 16px;
-        //   overflow: hidden;
+          overflow: hidden;
-        //   align-items: flex-start;
+          align-items: flex-start;
-        //   .tags__container {
+          .tags__container {
-        //     display: flex;
+            display: flex;
-        //     flex-flow: row wrap;
+            flex-flow: row wrap;
-        //     justify-content: flex-start;
+            justify-content: flex-start;
-        //     align-items: center;
+            align-items: center;
-        //     gap: 12px;
+            @include polyfills.flex-gap(12px, 'row wrap');
-        //     .tag__wrapper {
+            .tag__wrapper {
-        //       display: flex;
+              display: flex;
-        //       flex-flow: row nowrap;
+              flex-flow: row nowrap;
-        //       justify-content: flex-start;
+              justify-content: flex-start;
-        //       align-items: center;
+              align-items: center;
-        //       @include tags.tag-style;
+              @include tags.tag-style;
-        //     }
+            }
-        //   }
+          }
-        // }
+        }
         &--button {
           justify-content: flex-end;
           .button__wrapper {

src/components/cards/postThumbCards/PostThumbCardIndex.vue

@@ -1,6 +1,6 @@
 <template>
   <PostThumbCardMobile v-if="isMobile" :data="data" :type="$props.type"></PostThumbCardMobile>
-  <PostThumbCardClassic v-else :data="data"></PostThumbCardClassic>
+  <PostThumbCardClassic v-else :data="data" :type="$props.type"></PostThumbCardClassic>
 </template>
 
 <script lang="ts">

src/components/cards/postThumbCards/PostThumbCardMobile.vue

@@ -1,30 +1,30 @@
 <template>
   <div class="card__container">
-    <div class="row__wrapper--thumbnail">
+    <div class="row__wrapper--thumbnail" @click="handleViewPostDetailEvent">
       <Image
         class="image"
-        :src="data.featureImage.thumbnail"
+        :src="$props.data.featureImage.thumbnail"
-        :alt="data.title"
+        :alt="$props.data.title"
         placeholder="https://via.placeholder.com/1024x768"
         :draggable="false"
       />
     </div>
-    <div class="row__wrapper--title">
+    <div class="row__wrapper--title" @click="handleViewPostDetailEvent">
-      <span>{{ data.title }}</span>
+      <span>{{ $props.data.title }}</span>
     </div>
     <div class="row__wrapper--statistics">
       <div class="column__wrapper--read_count">
-        <span><i class="fab fa-hotjar"></i> {{ data.readCount }}</span>
+        <span><i class="fab fa-hotjar"></i> {{ $props.data.readCount }}</span>
       </div>
       <div class="column__wrapper--comment_count">
-        <span> <i class="far fa-comment-dots"></i> {{ data.commentCount }}</span>
+        <span> <i class="far fa-comment-dots"></i> {{ $props.data.commentCount }}</span>
       </div>
       <div class="column__wrapper--word_count">
-        <span><i class="fas fa-pen-nib"></i> {{ data.wordCount }}</span>
+        <span><i class="fas fa-pen-nib"></i> {{ $props.data.wordCount }}</span>
       </div>
     </div>
     <div class="row__wrapper--abstract">
-      <span>{{ data.excerpt }} </span>
+      <span>{{ $props.data.excerpt }} </span>
     </div>
     <div class="row__wrapper--tags">
       <div class="tags__container">
@@ -63,16 +63,11 @@ export default defineComponent({
       defaultMessage: 'Read More',
     })
 
-    const data = props.data
-
     const handleViewPostDetailEvent = () => {
-      if (data) {
+      linkHandler.handleClickLink({ url: props.data?.link ?? '', router, target: '_blank' })
-        linkHandler.handleClickLink({ url: data.value?.link ?? '', router, target: '_blank' })
-      }
     }
 
     return {
-      data,
       buttonContext,
       handleViewPostDetailEvent,
     }
@@ -83,6 +78,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '@/styles/mixins/text';
 @use '@/styles/mixins/tags';
+@use '@/styles/mixins/polyfills';
 
 .card__container {
   width: 100%;
@@ -90,7 +86,7 @@ export default defineComponent({
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: center;
-  gap: 12px;
+  @include polyfills.flex-gap(12px, 'column nowrap');
   > * {
     width: calc(100% - 24px);
   }
@@ -107,7 +103,7 @@ export default defineComponent({
         flex-flow: row wrap;
         justify-content: flex-start;
         align-items: center;
-        gap: 12px;
+        @include polyfills.flex-gap(12px, 'row wrap');
         .tag__wrapper {
           display: flex;
           flex-flow: row nowrap;

src/components/content/components/FeatureImage.vue

@@ -13,28 +13,40 @@
         <span>{{ $props.data.title }}</span>
       </div>
       <div class="row__wrapper--info">
+        <div class="flex-box">
           <div class="column__wrapper--avatar">
+            <div class="image__wrapper">
               <Image
                 :src="$props.data.author.avatar['96']"
                 :avatar="true"
                 :alt="$props.data.author.nickname"
               ></Image>
             </div>
+          </div>
+        </div>
+        <div class="flex-box">
           <div class="column__wrapper--author">
             <span>{{ $props.data.author.nickname }}</span>
           </div>
+        </div>
+        <div class="flex-box">
           <div class="column__wrapper--publish">
             <span>{{ $props.data.publistTime }}</span>
           </div>
+        </div>
+        <div class="flex-box">
           <div class="column__wrapper--words">
             <span>{{ $props.data.wordCount }}</span>
           </div>
+        </div>
+        <div class="flex-box">
           <div class="column__wrapper--reads">
             <span>{{ $props.data.readCount }}</span>
           </div>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -62,6 +74,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @use '@/styles/mixins/text';
+@use '@/styles/mixins/polyfills';
 .feature-image__container {
   width: 100%;
   height: 400px;
@@ -103,8 +116,8 @@ export default defineComponent({
           line-height: 48px;
           font-size: xx-large;
           color: #ffffff;
-          @include text.line-number-limit(1);
+          // @include text.line-number-limit(1);
-          @include text.text-shadow-offset;
+          // @include text.text-shadow-offset;
         }
       }
       &--info {
@@ -113,22 +126,16 @@ export default defineComponent({
         justify-content: flex-start;
         align-items: center;
         padding-top: 12px;
-        gap: 6px;
+        @include polyfills.flex-gap(6px, 'row nowrap');
+        > .flex-box {
           > * {
             flex: 1 1 auto;
             display: flex;
             flex-flow: row nowrap;
             justify-content: center;
             align-items: center;
-          gap: 6px;
+
-          &:not(:first-child):not(:last-child) {
+            @include polyfills.flex-gap(6px, 'row nowrap');
-            &::after {
-              content: '·';
-              line-height: 20px;
-              font-size: medium;
-              color: #ffffff;
-            }
-          }
             span {
               line-height: 20px;
               font-size: medium;
@@ -136,19 +143,26 @@ export default defineComponent({
               text-transform: lowercase;
             }
           }
+          &:not(:first-child):not(:last-child) {
+            > * {
+              &::after {
+                content: '·';
+                line-height: 20px;
+                font-size: medium;
+                color: #ffffff;
+              }
+            }
+          }
           .column__wrapper {
             &--avatar {
               flex: 0 0 auto;
+              > .image__wrapper {
                 width: 36px;
                 height: 36px;
                 border-radius: 50%;
                 overflow: hidden;
                 margin-right: 6px;
-            // .avatar {
+              }
-            //   width: 100%;
-            //   height: 100%;
-            //   object-fit: cover;
-            // }
             }
             &--author {
             }
@@ -163,4 +177,5 @@ export default defineComponent({
       }
     }
   }
+}
 </style>

src/components/content/components/comment/CommentListItem.vue

@@ -51,6 +51,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
 @use '@/styles/markdown/github';
 .item__container {
   width: 100%;
@@ -105,7 +106,7 @@ export default defineComponent({
         font-size: small;
         display: flex;
         flex-flow: row wrap;
-        gap: 12px;
+        @include polyfills.flex-gap(12px, 'row wrap');
       }
     }
   }

src/components/content/components/comment/Composer.vue

@@ -138,6 +138,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
 .composer__container {
   --mdc-theme-primary: orange;
   width: 100%;
@@ -167,7 +168,7 @@ export default defineComponent({
       flex-flow: row nowrap;
       justify-content: space-between;
       align-items: center;
-      gap: 12px;
+      @include polyfills.flex-gap(12px, 'row nowrap');
       .column__wrapper {
         &--avatar {
           flex: 0 0 auto;

src/components/loader/BookLoader.vue

@@ -27,15 +27,16 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
 .loader__container {
   width: 100%;
   height: 200px;
   min-width: 200px;
   display: flex;
-  flex-direction: column;
+  flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-  gap: 12px;
+  @include polyfills.flex-gap(12px, 'column nowrap');
   .text {
     text-align: center;
     color: #6c7486;

src/components/messages/MessageNormal.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="item__container mdc-card mdc-card--outlined">
+  <div class="item__container mdc-card mdc-card--outlined" :type="$props.message.type">
     <div class="item__content">
+      <div class="flex-box">
         <div class="column__wrapper--icon">
-        <span><i class="fas fa-info-circle"></i></span>
+          <span><i :class="icon"></i></span>
         </div>
         <div class="column__wrapper--content">
           <div class="row__wrapper--title">
@@ -34,6 +35,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -62,6 +64,21 @@ export default defineComponent({
       }),
     }
 
+    const icon = computed(() => {
+      switch (props.message?.type) {
+        case 'success':
+          return 'fas fa-check-circle'
+        case 'warning':
+          return 'fas fa-exclamation-circle'
+        case 'info':
+          return 'fas fa-info-circle'
+        case 'error':
+          return 'fas fa-exclamation-triangle'
+        default:
+          return 'fas fa-info-circle'
+      }
+    })
+
     const { messageList, removeMessage } = useInjector(messages)
 
     const handleCloseMessageEvent = () => {
@@ -83,6 +100,7 @@ export default defineComponent({
 
     return {
       msg,
+      icon,
       handleCloseMessageEvent,
       shouldShowDetail,
       handleShowDetailClick,
@@ -95,24 +113,41 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @use "sass:color";
+@use '@/styles/mixins/polyfills';
 
 .item__container {
+  --text-color: #3c434a;
+  --text-color-lighter-30: color.adjust(#3c434a, $lightness: 30%);
+  --background-color: #ffffff;
+  &[type='success'] {
+    --highlight-color: #00b74a;
+  }
+  &[type='warning'] {
+    --highlight-color: #ffa900;
+  }
+  &[type='info'] {
+    --highlight-color: #39c0ed;
+  }
+  &[type='error'] {
+    --highlight-color: #f93154; // danger
+  }
   width: var(--width);
-  background: #ffffff;
+  background: var(--background-color);
-  border-left: 3px solid #34d058;
+  border-left: 3px solid var(--highlight-color, #757575);
   > .item__content {
     width: calc(100% - 24px);
     padding: 12px;
+    > .flex-box {
       display: flex;
       flex-flow: row nowrap;
       align-items: space-between;
       align-items: flex-start;
-    gap: 12px;
+      @include polyfills.flex-gap(12px, 'row nowrap');
       > .column__wrapper {
         &--icon {
           flex: 0 0 auto;
           span {
-          color: #34d058;
+            color: var(--highlight-color, #757575);
             font-size: medium;
           }
         }
@@ -129,7 +164,7 @@ export default defineComponent({
               flex-flow: row nowrap;
               justify-content: space-between;
               align-items: flex-start;
-            gap: 12px;
+              @include polyfills.flex-gap(12px, 'row nowrap');
               > * span {
                 line-height: 16px;
               }
@@ -139,7 +174,7 @@ export default defineComponent({
                   width: 100%;
                   > .title {
                     span {
-                    color: #3c434a;
+                      color: var(--text-color);
                     }
                   }
                   > .detailed {
@@ -156,7 +191,7 @@ export default defineComponent({
                         transform: scaleY(1);
                       }
                       span {
-                      color: color.adjust(#3c434a, $lightness: 30%);
+                        color: var(--text-color-lighter-30);
                       }
                     }
                   }
@@ -182,4 +217,5 @@ export default defineComponent({
       }
     }
   }
+}
 </style>

src/components/pagination/Pagination.vue

@@ -104,13 +104,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
 .pagination__container {
   width: 100%;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
-  gap: 6px;
+  @include polyfills.flex-gap(6px, 'row wrap');
   .items__wrapper {
     .item__wrapper {
       --mdc-typography-button-font-size: 13px;

src/layouts/components/cover/Cover.vue

@@ -33,6 +33,7 @@
             </span>
           </div>
           <div class="social-media__wrapper">
+            <div class="social-media__content">
               <div
                 class="social-media-item__wrapper"
                 v-for="(item, index) in socialMedia"
@@ -44,6 +45,7 @@
           </div>
         </div>
       </div>
+    </div>
     <div class="mask__layer"></div>
   </div>
 </template>
@@ -154,6 +156,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
 $mobile-view-max-width: 800px;
 .cover__container {
   width: 100%;
@@ -267,12 +270,14 @@ $mobile-view-max-width: 800px;
         }
         .social-media__wrapper {
           margin-top: 6px;
+          width: 100%;
+          .social-media__content {
             width: 100%;
             display: flex;
             flex-flow: row wrap;
             justify-content: flex-end;
             align-items: center;
-          gap: 20px;
+            @include polyfills.flex-gap(20px, 'row wrap');
             .social-media-item__wrapper {
               width: 24px;
               height: 24px;
@@ -284,6 +289,7 @@ $mobile-view-max-width: 800px;
         }
       }
     }
+  }
   .mask__layer {
     position: absolute;
     top: 0;

src/layouts/components/footer/Footer.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="footer__container">
+    <div class="footer__content">
       <div class="row__wrapper">
         <div class="sakura-icon__wrapper fa-spin">
           <ui-icon name="ic.sakura"></ui-icon>
@@ -12,6 +13,7 @@
         <span v-html="$props.footer2"></span>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -33,14 +35,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
 .footer__container {
   width: 100%;
   padding: 36px 0 24px 0;
+  > .footer__content {
+    width: 100%;
     display: flex;
-  flex-direction: column;
+    flex-flow: column nowrap;
     justify-content: center;
     align-items: center;
-  gap: 12px;
+    @include polyfills.flex-gap(12px, 'column nowrap');
     .sakura-icon__wrapper {
       width: 30px;
       height: 30px;
@@ -49,4 +54,5 @@ export default defineComponent({
       align-items: center;
     }
   }
+}
 </style>

src/layouts/components/header/HeaderMobile.vue

@@ -36,7 +36,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-// @use 'sass:math';
+@use '@/styles/mixins/polyfills';
 .nav__container {
   position: relative;
   width: 100%;
@@ -121,7 +121,7 @@ export default defineComponent({
         flex-flow: row-reverse nowrap;
         justify-content: flex-end;
         align-items: center;
-        gap: 12px;
+        @include polyfills.flex-gap(12px, 'row-reverse nowrap');
         > .logo__wrapper {
           flex: 0 0 auto;
           display: flex;

src/layouts/components/header/NavDrawer.vue

@@ -2,6 +2,7 @@
   <div class="drawer__container" :ref="setScrollContainerRef">
     <div class="drawer__content">
       <div class="row__wrapper--avatar">
+        <div class="image__wrapper">
           <Image
             src="https://view.moezx.cc/images/2021/06/13/d6b010a378d392d4633008b915f98ab1.md.png"
             placeholder=""
@@ -10,6 +11,7 @@
             :draggable="false"
           ></Image>
         </div>
+      </div>
       <div class="row__wrapper--signature">Hello world...</div>
       <div class="row__wrapper--social"> social</div>
       <div class="row__wrapper--search">
@@ -115,6 +117,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
 .drawer__container {
   position: relative;
   width: 100%;
@@ -125,15 +128,18 @@ export default defineComponent({
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: center;
-    gap: 24px;
+    @include polyfills.flex-gap(24px, 'column nowrap');
     > .row__wrapper {
       &--avatar {
+        flex: 0 0 auto;
+        .image__wrapper {
           margin-top: 50px;
           width: 90px;
           height: 90px;
           border-radius: 50%;
           overflow: hidden;
         }
+      }
       &--signature {
         text-align: center;
         color: #333333;

src/store/messages.ts

@@ -16,7 +16,7 @@ export interface Message {
 export interface MessageOptions extends Omit<Message, 'id'> {}
 
 export default function msg(): object {
-  const [messageList, setMessageList]: [Ref<Message[]>, (arg: Message[]) => void] = useState([])
+  const [messageList, setMessageList] = useState([] as Message[])
 
   const addMessage = (state: typeof messageList, options: MessageOptions) => {
     const id = `message_${uniqueHash()}`

src/styles/mixins/_polyfills.scss

@@ -0,0 +1,37 @@
+@use 'sass:math';
+@mixin _flex-gap($gap, $row: true) {
+  $margin: math.div($gap, 2);
+  $transform: -$margin;
+  @if $row {
+    margin-left: $transform;
+    margin-right: $transform;
+  } @else {
+    margin-top: $transform;
+    margin-bottom: $transform;
+  }
+  > * {
+    @if $row {
+      margin-left: $margin;
+      margin-right: $margin;
+    } @else {
+      margin-top: $margin;
+      margin-bottom: $margin;
+    }
+  }
+}
+
+@mixin flex-gap($gap, $flex-flow: 'row nowrap') {
+  @if $flex-flow== 'row nowrap' or $flex-flow== 'row-reverse nowrap' {
+    @include _flex-gap($gap, true);
+  } @else if $flex-flow== 'column nowrap' or $flex-flow== 'column-reverse nowrap' {
+    @include _flex-gap($gap, false);
+  } @else if $flex-flow== 'row wrap' or $flex-flow== 'row-reverse wrap' {
+    @include _flex-gap($gap, true);
+    @include _flex-gap($gap, false);
+  } @else if $flex-flow== 'column wrap' or $flex-flow== 'column-reverse wrap' {
+    @include _flex-gap($gap, true);
+    @include _flex-gap($gap, false);
+  } @else {
+    @error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
+  }
+}

vite.config.ts

@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
 // import legacy from '@vitejs/plugin-legacy'
 import path from 'path'
 import svgicon from 'vite-plugin-svgicon'
+// import viteStylelint from '@amatlash/vite-plugin-stylelint'
 
 const target = process.env.APP_TARGET
 
@@ -23,6 +24,7 @@ export default defineConfig({
     // legacy({
     //   targets: ['defaults', 'not IE 11'],
     // }),
+    // viteStylelint(), // bugly
   ],
   server: {
     host: '0.0.0.0',
@@ -46,6 +48,7 @@ export default defineConfig({
     sourcemap: true,
     outDir: target === 'main' ? 'app/assets/main' : 'app/assets/admin',
     chunkSizeWarningLimit: 2048,
+    // minify: false, // set false if use flex-gap-polyfill
     rollupOptions: {
       // external: ['vue'],
       input: [path.resolve(__dirname, target === 'main' ? 'src/main.ts' : 'src/admin/main.ts')],
@@ -59,7 +62,14 @@ export default defineConfig({
     },
   },
   optimizeDeps: {
-    include: ['gsap', 'marked', 'gsap/ScrollTrigger', 'highlight.js', '@vueuse/core'],
+    include: [
+      'gsap',
+      'marked',
+      'gsap/ScrollTrigger',
+      'highlight.js',
+      '@vueuse/core',
+      'perfect-scrollbar',
+    ],
   },
   css: {
     preprocessorOptions: {