feat: upgrade deps

postcss + webpack + tailwind -upgrade-> booom
NaturalSelectionLabs · Feb 17, 2022 · 3c6060a · 3c6060a
1 parent 46f4524
commit 3c6060a
Show file tree

Hide file tree

Showing 32 changed files with 841 additions and 1,624 deletions.
diff --git a/package.json b/package.json
@@ -33,23 +33,20 @@
     },
     "homepage": "https://github.com/NaturalSelectionLabs/Web3Pass#readme",
     "dependencies": {
-        "@babel/runtime": "7.16.7",
+        "@babel/runtime": "7.17.2",
         "@koa/cors": "3.1.0",
         "@koa/router": "10.1.1",
-        "@sentry/tracing": "6.17.3",
-        "@sentry/vue": "6.16.1",
-        "@tailwindcss/aspect-ratio": "0.4.0",
-        "@tailwindcss/line-clamp": "0.3.1",
+        "@sentry/tracing": "6.17.9",
+        "@sentry/vue": "6.17.9",
         "@walletconnect/web3-provider": "1.7.1",
         "assert": "2.0.0",
-        "async-lock": "1.3.0",
-        "axios": "0.24.0",
+        "async-lock": "1.3.1",
+        "axios": "0.26.0",
         "boxicons": "2.1.1",
         "buffer": "6.0.3",
         "crypto-browserify": "3.12.0",
         "ejs": "3.1.6",
-        "eth-crypto": "2.1.0",
-        "ethers": "5.5.1",
+        "ethers": "5.5.4",
         "https-browserify": "1.0.0",
         "js-cookie": "3.0.1",
         "koa": "2.13.4",
@@ -66,57 +63,58 @@
         "rss3": "0.8.19",
         "stream-browserify": "3.0.0",
         "stream-http": "3.2.0",
-        "tailwind-scrollbar-hide": "1.1.6",
-        "typescript": "4.5.3",
-        "vue": "3.2.29",
+        "tailwind-scrollbar-hide": "1.1.7",
+        "typescript": "4.5.5",
+        "vue": "3.2.31",
         "vue-class-component": "8.0.0-rc.1",
         "vue-gtag": "2.0.1",
         "vue-hotjar": "1.4.0",
         "vue-lottie": "0.2.1",
         "vue-moment": "4.1.0",
-        "vue-recaptcha-v3": "2.0.1",
         "vue3-autocounter": "1.0.6",
         "vuedraggable": "4.1.0",
         "webpack-bundle-analyzer": "4.5.0"
     },
     "devDependencies": {
-        "@babel/core": "7.16.12",
-        "@babel/plugin-proposal-decorators": "7.16.7",
-        "@babel/plugin-transform-runtime": "7.16.5",
+        "@babel/core": "7.17.4",
+        "@babel/plugin-proposal-decorators": "7.17.2",
+        "@babel/plugin-transform-runtime": "7.17.0",
         "@babel/preset-env": "7.16.11",
         "@babel/preset-typescript": "7.16.7",
+        "@tailwindcss/aspect-ratio": "0.4.0",
+        "@tailwindcss/line-clamp": "0.3.1",
         "@types/async-lock": "1.1.3",
-        "@types/chrome": "0.0.159",
+        "@types/chrome": "0.0.178",
         "@types/js-cookie": "3.0.1",
         "@types/lodash": "4.14.178",
-        "@types/marked": "4.0.1",
-        "@vue/compiler-sfc": "3.2.30",
+        "@types/marked": "4.0.2",
+        "@vue/compiler-sfc": "3.2.31",
         "autoprefixer": "10.4.2",
         "babel-loader": "8.2.3",
         "boxicons": "2.1.1",
         "compression-webpack-plugin": "9.2.0",
-        "copy-webpack-plugin": "10.2.1",
+        "copy-webpack-plugin": "10.2.4",
         "css-loader": "6.6.0",
-        "cssnano": "5.0.16",
+        "cssnano": "5.0.17",
         "html-webpack-plugin": "5.5.0",
         "husky": "7.0.4",
         "js-conditional-compile-loader": "1.0.15",
         "less-loader": "10.2.0",
-        "lint-staged": "12.1.3",
-        "postcss": "8.4.5",
-        "postcss-loader": "6.2.0",
+        "lint-staged": "12.3.4",
+        "postcss": "8.4.6",
+        "postcss-loader": "6.2.1",
         "prettier": "2.5.1",
-        "prettier-plugin-tailwind": "2.2.12",
-        "tailwindcss": "2.2.17",
+        "prettier-plugin-tailwindcss": "0.1.7",
+        "tailwindcss": "3.0.23",
         "terser-webpack-plugin": "5.3.1",
         "ts-loader": "9.2.6",
         "url-loader": "4.1.1",
         "vue-loader": "17.0.0",
         "vue-router": "4.0.12",
         "vue-style-loader": "4.1.3",
         "vue-template-compiler": "2.6.14",
-        "webpack": "5.65.0",
+        "webpack": "5.69.0",
         "webpack-cli": "4.9.2",
-        "webpack-dev-server": "4.7.3"
+        "webpack-dev-server": "4.7.4"
     }
 }
diff --git a/src/components/Account/AccountItem.vue b/src/components/Account/AccountItem.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="relative">
         <div
-            class="account-item"
+            class="rounded-full border border-item-border bg-item-bg bg-85 bg-center bg-no-repeat filter"
             :class="{
                 'bg-BSC': chain === 'BSC',
                 'bg-Ethereum': chain === 'Ethereum',
@@ -26,7 +26,7 @@
         <Button
             v-show="deleteMode"
             size="sm"
-            class="absolute z-20 right-0 top-0 w-6 h-6 text-account-btn-m-text bg-account-btn-m"
+            class="absolute right-0 top-0 z-20 h-6 w-6 bg-account-btn-m text-account-btn-m-text"
             @click="deleteAccount"
         >
             <i class="bx bx-minus bx-sm"></i>
@@ -66,10 +66,4 @@ export default class AccountItem extends Vue {
 }
 </script>
 
-<style scoped lang="postcss">
-@layer components {
-    .account-item {
-        @apply bg-item-bg bg-85 bg-center bg-no-repeat border border-item-border rounded-full filter;
-    }
-}
-</style>
+<style></style>
diff --git a/src/components/Account/EVMpAccountItem.vue b/src/components/Account/EVMpAccountItem.vue
@@ -1,21 +1,24 @@
 <template>
     <div class="relative">
         <div
-            class="account-item bg-item-bg"
+            class="flex items-center justify-center overflow-hidden rounded-full border border-item-border bg-item-bg filter"
             :style="{ width: size + 'px', height: size + 'px' }"
             @mouseenter="isHover = true"
             @mouseout="isHover = false"
             @touchstart="isHover = true"
             @touchend="isHover = false"
             ref="account"
         >
-            <div class="icon" :class="[address ? 'mix-blend-overlay' : 'opacity-50']" />
+            <div
+                class="h-full w-full bg-EVM bg-85 bg-center bg-no-repeat"
+                :class="[address ? 'mix-blend-overlay' : 'opacity-50']"
+            />
         </div>
         <Tooltip v-if="enableTooltip" v-show="isHover" :text="addressFilter($props.address)" view-option="account" />
         <Button
             v-show="deleteMode"
             size="sm"
-            class="absolute z-20 right-0 top-0 w-6 h-6 text-account-btn-m-text bg-account-btn-m"
+            class="absolute right-0 top-0 z-20 h-6 w-6 bg-account-btn-m text-account-btn-m-text"
             @click="deleteAccount"
         >
             <i class="bx bx-minus bx-sm"></i>
@@ -82,14 +85,4 @@ export default class EVMpAccountItem extends Vue {
 }
 </script>
 
-<style scoped lang="postcss">
-@layer components {
-    .account-item {
-        @apply flex items-center justify-center border border-item-border rounded-full overflow-hidden filter;
-
-        .icon {
-            @apply w-full h-full bg-EVM bg-85 bg-center bg-no-repeat;
-        }
-    }
-}
-</style>
+<style></style>
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
@@ -1,10 +1,10 @@
 <template>
     <button
-        class="btn"
+        class="flex transform flex-row items-center justify-center gap-2 border-button border-btn-border text-center leading-none focus:outline-none active:-translate-y-px"
         :class="{
-            'btn-lg': size === 'lg',
-            'btn-sm': size === 'sm',
-            circle: shape === 'circle',
+            'rounded px-5 py-4': size === 'lg',
+            'rounded-sm px-2 py-2': size === 'sm',
+            'rounded-full': shape === 'circle',
         }"
     >
         <slot></slot>
@@ -26,19 +26,4 @@ export default class Button extends Vue {
 }
 </script>
 
-<style scoped lang="postcss">
-@layer components {
-    .btn {
-        @apply flex flex-row gap-2 items-center justify-center text-center leading-none border-button border-btn-border focus:outline-none transform active:-translate-y-px;
-    }
-    .btn-lg {
-        @apply px-5 py-4 rounded;
-    }
-    .btn-sm {
-        @apply px-2 py-2 rounded-sm;
-    }
-    .circle {
-        @apply rounded-full;
-    }
-}
-</style>
+<style></style>
diff --git a/src/components/Button/LinkButton.vue b/src/components/Button/LinkButton.vue
@@ -1,5 +1,7 @@
 <template>
-    <button class="link-btn">
+    <button
+        class="flex flex-row items-center justify-center gap-2 rounded-sm bg-secondary-btn px-3 pb-1 pt-1 text-center text-base font-light leading-none focus:outline-none"
+    >
         <slot></slot>
     </button>
 </template>
@@ -16,10 +18,4 @@ export default class LinkButton extends Vue {
 }
 </script>
 
-<style scoped lang="postcss">
-@layer components {
-    .link-btn {
-        @apply flex flex-row gap-2 items-center justify-center pb-1 pt-1 px-3 text-center text-base font-light leading-none bg-secondary-btn rounded-sm focus:outline-none;
-    }
-}
-</style>
+<style></style>
diff --git a/src/components/Card/AssetCard.vue b/src/components/Card/AssetCard.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="flex flex-row gap-2 items-center justify-start w-full cursor-pointer">
-        <NFTItem class="flex-shrink-0 mr-1 cursor-pointer" :image-url="imageUrl || defaultAvatar" :size="size" />
-        <div class="flex flex-1 flex-col gap-0.5 w-0 text-sm">
+    <div class="flex w-full cursor-pointer flex-row items-center justify-start gap-2">
+        <NFTItem class="mr-1 shrink-0 cursor-pointer" :image-url="imageUrl || defaultAvatar" :size="size" />
+        <div class="flex w-0 flex-1 flex-col gap-0.5 text-sm">
             <span class="line-clamp-2">{{ username + getTitle(type) + name }}</span>
         </div>
     </div>

diff --git a/src/components/Card/BarCard.vue b/src/components/Card/BarCard.vue
@@ -1,10 +1,13 @@
 <template>
-    <div class="card" :class="[`bg-${$props.color}-bg`, `border-${$props.color}-border`]">
+    <div
+        class="box-border flex h-16 flex-row items-center rounded-xl border-card px-3 py-1"
+        :class="[`bg-${$props.color}-bg`, `border-${$props.color}-border`]"
+    >
         <div class="p-2">
             <slot name="header" />
         </div>
-        <div class="card-body">
-            <div class="content-wrapper">
+        <div class="w-full overflow-y-auto p-2" style="scrollbar-width: thin">
+            <div class="flex w-max items-center">
                 <slot name="content" />
             </div>
         </div>
@@ -25,19 +28,4 @@ import { Vue, Options } from 'vue-class-component';
 export default class BarCard extends Vue {}
 </script>
 
-<style lang="postcss" scoped>
-@layer components {
-    .card {
-        @apply flex flex-row items-center px-3 py-1 h-16 border-card rounded-xl box-border;
-
-        .card-body {
-            scrollbar-width: thin;
-            @apply p-2 w-full overflow-y-auto;
-
-            .content-wrapper {
-                @apply flex items-center w-max;
-            }
-        }
-    }
-}
-</style>
+<style></style>
diff --git a/src/components/Card/TransBarCard.vue b/src/components/Card/TransBarCard.vue
@@ -1,42 +1,42 @@
 <template>
     <div
-        class="flex flex-col gap-2 items-start px-5 py-4 border-card rounded box-border"
+        class="box-border flex flex-col items-start gap-2 rounded border-card px-5 py-4"
         :class="$props.isSecondary ? 'bg-secondary' : 'bg-card-bg'"
     >
         <div
             v-if="title"
-            class="flex flex-row items-center justify-between w-full"
+            class="flex w-full flex-row items-center justify-between"
             :class="$props.isSecondary ? 'text-black text-opacity-50' : ''"
         >
             <div class="text-lg font-semibold leading-none">{{ title }}</div>
             <slot name="header" />
         </div>
-        <div class="flex flex-col gap-1 w-full h-full overflow-hidden" v-if="haveDetails">
+        <div class="flex h-full w-full flex-col gap-1 overflow-hidden" v-if="haveDetails">
             <slot name="details" />
         </div>
-        <div class="flex flex-row gap-x-2 items-center justify-between w-full" v-if="haveContent">
-            <div v-if="haveContentInfo" class="flex flex-1 pb-1 overflow-x-auto" style="scrollbar-width: thin">
+        <div class="flex w-full flex-row items-center justify-between gap-x-2" v-if="haveContent">
+            <div v-if="haveContentInfo" class="flex flex-1 overflow-x-auto pb-1" style="scrollbar-width: thin">
                 <div class="flex flex-row items-center"><slot name="content" /></div>
             </div>
             <div v-else class="text-light truncate">
-                <div v-if="tip === 'loading'" class="flex gap-2 items-start justify-center">
+                <div v-if="tip === 'loading'" class="flex items-start justify-center gap-2">
                     <span class="font-light">One moment </span>
                     <LoadingSmile :size="18" :isLooping="true" />
                 </div>
-                <div v-else-if="tip === 'ownerEmpty'" class="flex gap-2 items-start justify-center">
+                <div v-else-if="tip === 'ownerEmpty'" class="flex items-start justify-center gap-2">
                     <span v-if="title === 'Collectibles'" class="font-light">Grab some collectibles to get a shot</span>
                     <span v-if="title === 'Footprints'" class="font-light">Attend some events to get a shot</span>
                     <span v-if="title === 'Donations'" class="font-light">Support some projects to get a shot</span>
                     <Smile :size="18" />
                 </div>
-                <div v-else class="flex flex-row gap-2 items-end">
+                <div v-else class="flex flex-row items-end gap-2">
                     <span class="font-light">
                         Looks like this user hasn't got a shot.<br />Come back and check it out later.
                     </span>
                     <Smile :size="18" class="mb-1" />
                 </div>
             </div>
-            <div class="flex-shrink-0">
+            <div class="shrink-0">
                 <slot name="button" />
             </div>
         </div>

diff --git a/src/components/Common/ImgHolder.vue b/src/components/Common/ImgHolder.vue
@@ -1,12 +1,19 @@
 <template>
     <div
-        class="img-holder"
         :class="{
-            round: isRounded,
-            square: isSquare,
+            'rounded-full': isRounded,
+            rounded: isSquare,
         }"
     >
-        <img :src="fixedSrc" :alt="alt" />
+        <img
+            class="h-full w-full object-cover"
+            :class="{
+                'rounded-full': isRounded,
+                rounded: isSquare,
+            }"
+            :src="fixedSrc"
+            :alt="alt"
+        />
     </div>
 </template>
 
@@ -30,28 +37,4 @@ export default class ImgHolder extends Vue {
 }
 </script>
 
-<style scoped lang="postcss">
-@layer components {
-    .img-holder {
-        > img {
-            @apply w-full h-full object-cover;
-        }
-
-        &.round {
-            @apply rounded-full;
-
-            > img {
-                @apply rounded-full;
-            }
-        }
-
-        &.square {
-            @apply rounded;
-
-            > img {
-                @apply rounded;
-            }
-        }
-    }
-}
-</style>
+<style scoped lang="postcss"></style>