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,23 +1,27 @@
 <template>
   <div class="picker__container">
-    <div class="row__wrapper--input">
+    <div class="flex-box">
-      <div class="input__wrapper">
+      <div class="row__wrapper--input">
-        <OutlinedInput v-model:content="userInput" label="Input remote URL here"></OutlinedInput>
+        <div class="input__wrapper">
-      </div>
+          <OutlinedInput v-model:content="userInput" label="Input remote URL here"></OutlinedInput>
-      <div class="button__wrapper" @click="add">
+        </div>
-        <NormalButton icon="fas fas fa-link" context="Add" :contained="true"></NormalButton>
+        <div class="button__wrapper" @click="add">
-      </div>
+          <NormalButton icon="fas fas fa-link" context="Add" :contained="true"></NormalButton>
-      <div class="button__wrapper" @click="open">
+        </div>
-        <NormalButton icon="fas fa-box-open" context="Pick" :contained="true"></NormalButton>
+        <div class="button__wrapper" @click="open">
+          <NormalButton icon="fas fa-box-open" context="Pick" :contained="true"></NormalButton>
+        </div>
       </div>
     </div>
-    <div class="row__wrapper--preview">
+    <div class="flex-box">
-      <div class="image__box" v-for="(item, index) in selection" :key="index">
+      <div class="row__wrapper--preview">
-        <div class="image__wrapper">
+        <div class="image__box" v-for="(item, index) in selection" :key="index">
-          <Image :src="item.url" :avatar="false" :draggable="false"></Image>
+          <div class="image__wrapper">
-        </div>
+            <Image :src="item.url" :avatar="false" :draggable="false"></Image>
-        <div class="delete__button" @click="del(index)">
+          </div>
-          <span><i class="fas fa-trash-alt"></i></span>
+          <div class="delete__button" @click="del(index)">
+            <span><i class="fas fa-trash-alt"></i></span>
+          </div>
         </div>
       </div>
     </div>
@@ -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,24 +13,36 @@
         <span>{{ $props.data.title }}</span>
       </div>
       <div class="row__wrapper--info">
-        <div class="column__wrapper--avatar">
+        <div class="flex-box">
-          <Image
+          <div class="column__wrapper--avatar">
-            :src="$props.data.author.avatar['96']"
+            <div class="image__wrapper">
-            :avatar="true"
+              <Image
-            :alt="$props.data.author.nickname"
+                :src="$props.data.author.avatar['96']"
-          ></Image>
+                :avatar="true"
+                :alt="$props.data.author.nickname"
+              ></Image>
+            </div>
+          </div>
         </div>
-        <div class="column__wrapper--author">
+        <div class="flex-box">
-          <span>{{ $props.data.author.nickname }}</span>
+          <div class="column__wrapper--author">
+            <span>{{ $props.data.author.nickname }}</span>
+          </div>
         </div>
-        <div class="column__wrapper--publish">
+        <div class="flex-box">
-          <span>{{ $props.data.publistTime }}</span>
+          <div class="column__wrapper--publish">
+            <span>{{ $props.data.publistTime }}</span>
+          </div>
         </div>
-        <div class="column__wrapper--words">
+        <div class="flex-box">
-          <span>{{ $props.data.wordCount }}</span>
+          <div class="column__wrapper--words">
+            <span>{{ $props.data.wordCount }}</span>
+          </div>
         </div>
-        <div class="column__wrapper--reads">
+        <div class="flex-box">
-          <span>{{ $props.data.readCount }}</span>
+          <div class="column__wrapper--reads">
+            <span>{{ $props.data.readCount }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -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,50 +126,52 @@ 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: 1 1 auto;
-          flex-flow: row nowrap;
+            display: flex;
-          justify-content: center;
+            flex-flow: row nowrap;
-          align-items: center;
+            justify-content: center;
-          gap: 6px;
+            align-items: center;
-          &:not(:first-child):not(:last-child) {
+
-            &::after {
+            @include polyfills.flex-gap(6px, 'row nowrap');
-              content: '·';
+            span {
               line-height: 20px;
               font-size: medium;
               color: #ffffff;
+              text-transform: lowercase;
             }
           }
-          span {
+          &:not(:first-child):not(:last-child) {
-            line-height: 20px;
+            > * {
-            font-size: medium;
+              &::after {
-            color: #ffffff;
+                content: '·';
-            text-transform: lowercase;
+                line-height: 20px;
+                font-size: medium;
+                color: #ffffff;
+              }
+            }
           }
-        }
+          .column__wrapper {
-        .column__wrapper {
+            &--avatar {
-          &--avatar {
+              flex: 0 0 auto;
-            flex: 0 0 auto;
+              > .image__wrapper {
-            width: 36px;
+                width: 36px;
-            height: 36px;
+                height: 36px;
-            border-radius: 50%;
+                border-radius: 50%;
-            overflow: hidden;
+                overflow: hidden;
-            margin-right: 6px;
+                margin-right: 6px;
-            // .avatar {
+              }
-            //   width: 100%;
+            }
-            //   height: 100%;
+            &--author {
-            //   object-fit: cover;
+            }
-            // }
+            &--publish {
-          }
+            }
-          &--author {
+            &--words {
-          }
+            }
-          &--publish {
+            &--reads {
-          }
+            }
-          &--words {
-          }
-          &--reads {
           }
         }
       }

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,34 +1,36 @@
 <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="column__wrapper--icon">
+      <div class="flex-box">
-        <span><i class="fas fa-info-circle"></i></span>
+        <div class="column__wrapper--icon">
-      </div>
+          <span><i :class="icon"></i></span>
-      <div class="column__wrapper--content">
+        </div>
-        <div class="row__wrapper--title">
+        <div class="column__wrapper--content">
-          <div class="title__content--message">
+          <div class="row__wrapper--title">
-            <div class="title">
+            <div class="title__content--message">
-              <span>{{ $props.message.title }}</span>
+              <div class="title">
-            </div>
+                <span>{{ $props.message.title }}</span>
-            <div
+              </div>
-              class="detailed"
+              <div
-              :style="{ height: shouldShowDetail ? `${expandContentHeight}px` : '0px' }"
+                class="detailed"
-            >
+                :style="{ height: shouldShowDetail ? `${expandContentHeight}px` : '0px' }"
-              <div :class="['content', { show: shouldShowDetail }]" :ref="setExpandContentRef">
+              >
-                <span>{{ $props.message.detail }}</span>
+                <div :class="['content', { show: shouldShowDetail }]" :ref="setExpandContentRef">
+                  <span>{{ $props.message.detail }}</span>
+                </div>
               </div>
             </div>
-          </div>
+            <div
-          <div
+              v-if="$props.message.detail"
-            v-if="$props.message.detail"
+              :class="['title__content--collapse', { reverse: shouldShowDetail }]"
-            :class="['title__content--collapse', { reverse: shouldShowDetail }]"
+              :title="msg.showDetails"
-            :title="msg.showDetails"
+              @click="handleShowDetailClick"
-            @click="handleShowDetailClick"
+            >
-          >
+              <i class="fas fa-angle-double-down"></i>
-            <i class="fas fa-angle-double-down"></i>
+            </div>
-          </div>
+            <div class="title__content--close" :title="msg.close" @click="handleCloseMessageEvent">
-          <div class="title__content--close" :title="msg.close" @click="handleCloseMessageEvent">
+              <i class="fas fa-times-circle"></i>
-            <i class="fas fa-times-circle"></i>
+            </div>
           </div>
         </div>
       </div>
@@ -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,87 +113,105 @@ 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;
-    display: flex;
+    > .flex-box {
-    flex-flow: row nowrap;
+      display: flex;
-    align-items: space-between;
+      flex-flow: row nowrap;
-    align-items: flex-start;
+      align-items: space-between;
-    gap: 12px;
+      align-items: flex-start;
-    > .column__wrapper {
+      @include polyfills.flex-gap(12px, 'row nowrap');
-      &--icon {
+      > .column__wrapper {
-        flex: 0 0 auto;
+        &--icon {
-        span {
+          flex: 0 0 auto;
-          color: #34d058;
+          span {
-          font-size: medium;
+            color: var(--highlight-color, #757575);
-        }
+            font-size: medium;
-      }
-      &--content {
-        flex: 1 1 auto;
-        width: 100%;
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: flex-start;
-        > .row__wrapper {
-          &--title {
-            width: 100%;
-            display: flex;
-            flex-flow: row nowrap;
-            justify-content: space-between;
-            align-items: flex-start;
-            gap: 12px;
-            > * span {
-              line-height: 16px;
-            }
-            > .title__content {
-              &--message {
-                flex: 1 1 auto;
-                width: 100%;
-                > .title {
-                  span {
-                    color: #3c434a;
-                  }
-                }
-                > .detailed {
-                  transition: height 0.5s cubic-bezier(0, 0, 0.3, 1);
-                  overflow: hidden;
-                  > .content {
-                    padding-top: 6px;
-                    width: 100%;
-                    height: auto;
-                    transform: scaleY(0);
-                    transform-origin: top;
-                    transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
-                    &.show {
-                      transform: scaleY(1);
-                    }
-                    span {
-                      color: color.adjust(#3c434a, $lightness: 30%);
-                    }
-                  }
-                }
-              }
-              &--collapse {
-                flex: 0 0 auto;
-                transform: scaleY(1);
-                transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
-                &.reverse {
-                  transform: scaleY(-1);
-                }
-              }
-              &--close {
-                flex: 0 0 auto;
-              }
-            }
           }
-          &--buttons {
+        }
-            align-self: flex-end;
+        &--content {
+          flex: 1 1 auto;
+          width: 100%;
+          display: flex;
+          flex-flow: column nowrap;
+          align-items: flex-start;
+          > .row__wrapper {
+            &--title {
+              width: 100%;
+              display: flex;
+              flex-flow: row nowrap;
+              justify-content: space-between;
+              align-items: flex-start;
+              @include polyfills.flex-gap(12px, 'row nowrap');
+              > * span {
+                line-height: 16px;
+              }
+              > .title__content {
+                &--message {
+                  flex: 1 1 auto;
+                  width: 100%;
+                  > .title {
+                    span {
+                      color: var(--text-color);
+                    }
+                  }
+                  > .detailed {
+                    transition: height 0.5s cubic-bezier(0, 0, 0.3, 1);
+                    overflow: hidden;
+                    > .content {
+                      padding-top: 6px;
+                      width: 100%;
+                      height: auto;
+                      transform: scaleY(0);
+                      transform-origin: top;
+                      transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
+                      &.show {
+                        transform: scaleY(1);
+                      }
+                      span {
+                        color: var(--text-color-lighter-30);
+                      }
+                    }
+                  }
+                }
+                &--collapse {
+                  flex: 0 0 auto;
+                  transform: scaleY(1);
+                  transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
+                  &.reverse {
+                    transform: scaleY(-1);
+                  }
+                }
+                &--close {
+                  flex: 0 0 auto;
+                }
+              }
+            }
+            &--buttons {
+              align-self: flex-end;
+            }
           }
         }
       }

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,12 +33,14 @@
             </span>
           </div>
           <div class="social-media__wrapper">
-            <div
+            <div class="social-media__content">
-              class="social-media-item__wrapper"
+              <div
-              v-for="(item, index) in socialMedia"
+                class="social-media-item__wrapper"
-              :key="index"
+                v-for="(item, index) in socialMedia"
-            >
+                :key="index"
-              <UiIcon :name="`social.${item.name}`"></UiIcon>
+              >
+                <UiIcon :name="`social.${item.name}`"></UiIcon>
+              </div>
             </div>
           </div>
         </div>
@@ -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%;
@@ -268,17 +271,20 @@ $mobile-view-max-width: 800px;
         .social-media__wrapper {
           margin-top: 6px;
           width: 100%;
-          display: flex;
+          .social-media__content {
-          flex-flow: row wrap;
+            width: 100%;
-          justify-content: flex-end;
-          align-items: center;
-          gap: 20px;
-          .social-media-item__wrapper {
-            width: 24px;
-            height: 24px;
             display: flex;
+            flex-flow: row wrap;
+            justify-content: flex-end;
             align-items: center;
-            justify-content: center;
+            @include polyfills.flex-gap(20px, 'row wrap');
+            .social-media-item__wrapper {
+              width: 24px;
+              height: 24px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
           }
         }
       }

src/layouts/components/footer/Footer.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="footer__container">
-    <div class="row__wrapper">
+    <div class="footer__content">
-      <div class="sakura-icon__wrapper fa-spin">
+      <div class="row__wrapper">
-        <ui-icon name="ic.sakura"></ui-icon>
+        <div class="sakura-icon__wrapper fa-spin">
+          <ui-icon name="ic.sakura"></ui-icon>
+        </div>
+      </div>
+      <div class="row__wrapper">
+        <span v-html="$props.footer1"></span>
+      </div>
+      <div class="row__wrapper">
+        <span v-html="$props.footer2"></span>
       </div>
-    </div>
-    <div class="row__wrapper">
-      <span v-html="$props.footer1"></span>
-    </div>
-    <div class="row__wrapper">
-      <span v-html="$props.footer2"></span>
     </div>
   </div>
 </template>
@@ -33,20 +35,24 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
 .footer__container {
   width: 100%;
   padding: 36px 0 24px 0;
-  display: flex;
+  > .footer__content {
-  flex-direction: column;
+    width: 100%;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  .sakura-icon__wrapper {
-    width: 30px;
-    height: 30px;
     display: flex;
+    flex-flow: column nowrap;
     justify-content: center;
     align-items: center;
+    @include polyfills.flex-gap(12px, 'column nowrap');
+    .sakura-icon__wrapper {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      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,13 +2,15 @@
   <div class="drawer__container" :ref="setScrollContainerRef">
     <div class="drawer__content">
       <div class="row__wrapper--avatar">
-        <Image
+        <div class="image__wrapper">
-          src="https://view.moezx.cc/images/2021/06/13/d6b010a378d392d4633008b915f98ab1.md.png"
+          <Image
-          placeholder=""
+            src="https://view.moezx.cc/images/2021/06/13/d6b010a378d392d4633008b915f98ab1.md.png"
-          :avatar="true"
+            placeholder=""
-          alt=""
+            :avatar="true"
-          :draggable="false"
+            alt=""
-        ></Image>
+            :draggable="false"
+          ></Image>
+        </div>
       </div>
       <div class="row__wrapper--signature">Hello world...</div>
       <div class="row__wrapper--social"> social</div>
@@ -115,6 +117,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/mixins/polyfills';
 .drawer__container {
   position: relative;
   width: 100%;
@@ -125,14 +128,17 @@ 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 {
-        margin-top: 50px;
+        flex: 0 0 auto;
-        width: 90px;
+        .image__wrapper {
-        height: 90px;
+          margin-top: 50px;
-        border-radius: 50%;
+          width: 90px;
-        overflow: hidden;
+          height: 90px;
+          border-radius: 50%;
+          overflow: hidden;
+        }
       }
       &--signature {
         text-align: center;

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: {