Optimized app imports

Author: shivanshs9

pwa.config.js

@@ -1,4 +1,5 @@
 const { InjectManifest } = require("workbox-webpack-plugin");
+const stylusLoader = require("stylus-loader");
 const { join } = require("path");
 
 exports.webpack = function(config, env) {
@@ -15,6 +16,18 @@ exports.webpack = function(config, env) {
       swSrc: join(src, "sw.js"),
     })
   );
+  config.module.rules.forEach(({ test, use }) => {
+    if ((test.test(".styl") || test.test(".stylus")) && Array.isArray(use)) {
+      use.forEach((loader) => {
+        if (loader.loader === "stylus-loader") {
+          loader.options.import = [
+            join(src, "styles/theme/index.styl"),
+            join(src, "styles/mixins.styl"),
+          ];
+        } else loader;
+      });
+    }
+  });
 };
 
 exports.brotli = {

src/App.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import Terminal from "@components/Terminal";
+const Terminal = () => import("@components/Terminal");
 
 export default {
   components: {
@@ -83,8 +83,6 @@ export default {
 </script>
 
 <style module lang="stylus">
-@require '~@styles/theme';
-
 .app {
   color: var(--text-color);
   background: var(--background-color);

src/components/Countdown.vue

@@ -27,12 +27,12 @@ export default {
   props: {
     until: {
       type: Date,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
-      now: Math.trunc(new Date().getTime() / 1000)
+      now: Math.trunc(new Date().getTime() / 1000),
     };
   },
   computed: {
@@ -53,7 +53,7 @@ export default {
     },
     seconds() {
       return this.timeDiff % 60;
-    }
+    },
   },
   mounted() {
     window.setInterval(() => {
@@ -69,15 +69,12 @@ export default {
         return `0${value}`;
       }
       return value;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style module lang="stylus">
-@require '~@styles/theme';
-@require '~@styles/mixins';
-
 .countdown {
   font-family: 'Roboto Slab';
   display: flex;
@@ -91,19 +88,18 @@ export default {
 
     .txt {
       text-align: center;
-      font-size: 21px;
+      $font-size: 21px;
     }
 
     .value {
       text-align: center;
-      font-size: 50px;
+      $font-size: 50px;
       font-weight: 600;
 
       ~/.xs ^[1..-1], ~/.sm ^[1..-1] {
-        font-size: 24px;
+        $font-size: 24px;
       }
     }
   }
 }
 </style>
-

src/components/FloatingButton.vue

@@ -12,31 +12,28 @@ export default {
   props: {
     text: {
       required: true,
-      type: String
+      type: String,
     },
     link: {
       required: false,
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   computed: {
     animateClass() {
       return isMinimal(this.$mq) ? "" : this.$style.animate;
-    }
+    },
   },
   methods: {
     openLink() {
       if (this.link != null) this.$router.push({ name: this.link });
-    }
-  }
+    },
+  },
 };
 </script>
 
-<style module lang = "stylus">
-@require '~@styles/theme';
-@require '~@styles/mixins';
-
+<style module lang="stylus">
 $btn-height = 60px;
 $btn-width = 60px;
 $btn-radius = 30px;
@@ -65,7 +62,7 @@ $image-expand-width = 18px;
   .txt {
     color: black;
     font-family: 'Aldo the Apache';
-    font-size: 18px;
+    $font-size: 18px;
     margin-left: 5px;
   }
 
@@ -81,4 +78,4 @@ $image-expand-width = 18px;
     margin-top: (($btn-height - 18px) / 2);
   }
 }
-</style>
+</style>

src/components/Footer.vue

@@ -35,11 +35,8 @@ export default {};
 </script>
 
 <style module lang="stylus">
-@require '~@styles/theme';
-@require '~@styles/mixins';
-
 .footer {
-  font-size: 10px;
+  $font-size: 10px;
   font-weight: 800;
   background: $mine-shaft;
   letter-spacing: 0.5px;

src/components/ForgotPassword.vue

@@ -62,11 +62,10 @@ export default {
 };
 </script>
 <style module lang="stylus">
-@require '~@styles/theme';
 @require '~@styles/anims';
 
 .authContainer {
-  font-size: 16px;
+  $font-size: 16px;
   font-family: courier, monospace;
   max-width: 800px;
   margin: auto;
@@ -89,7 +88,7 @@ export default {
   top: 0;
   z-index: 1;
   font-family: 'Roboto Mono';
-  font-size: 18px;
+  $font-size: 18px;
 }
 
 .root {
@@ -114,7 +113,7 @@ export default {
   outline: 0;
   max-width: 600px;
   width: 100%;
-  font-size: 16px;
+  $font-size: 16px;
   background: #fff2;
   border-radius: 5px;
   padding-left: 5px;
@@ -146,7 +145,7 @@ export default {
   background: transparent;
   color: $white;
   border-radius: 100%;
-  font-size: 40px;
+  $font-size: 40px;
   height: 40px;
   width: 40px;
   justify-content: space-between;