Optimize frontend developer build

This changes reduce slow webpack compilation when using Tailwind @apply
Before this changes, it takes 10 seconds to recompile whenever change is made on application.scss
According to the ref articale, Tailwind CSS's components and utilites have large file sizes,
making the recompilation very slow.
This workaround separate Tailwind CSS and custom @apply CSS so webpack never have to recompile
the large Tailwind CSS stuff since it wasn't changed.

Ref: https://rubyyagi.com/solve-slow-webpack-compilation/
Another workaround, similar idea but without using @layer:
tailwindlabs/tailwindcss#443 (comment)

convene-web/app/javascript/packs/application.js

@@ -18,5 +18,6 @@ require("channels")
 
 import "controllers"
 
+require('../src/tailwind.scss')
 require('../src/application.scss')
 require("@fortawesome/fontawesome-free/css/all.css")

convene-web/app/javascript/src/application.scss

@@ -1,8 +1,2 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-
-// All extract components must be placed between tailwindcss/components & tailwindcss/utilities to avoid being overwriting utilites
 @import "./custom_components";
 @import "./page_bem_class";
-
-@import "tailwindcss/utilities";

convene-web/app/javascript/src/custom_components/button.scss

@@ -1,9 +1,11 @@
-.button {
-  @apply font-bold py-2 px-4 rounded;
+@layer components {
+  .button {
+    @apply font-bold py-2 px-4 rounded;
+  }
+  .button-blue {
+    @apply bg-blue-500 text-white;
+  }
+  .button-blue:hover {
+    @apply bg-blue-700;
+  }
 }
-.button-blue {
-  @apply bg-blue-500 text-white;
-}
-.button-blue:hover {
-  @apply bg-blue-700;
-}

convene-web/app/javascript/src/custom_components/form.scss

@@ -1,24 +1,26 @@
-input {
-  @apply bg-white border border-gray-300 rounded-lg py-2 px-4 block appearance-none leading-normal;
+@layer components {
+  input {
+    @apply bg-white border border-gray-300 rounded-lg py-2 px-4 block appearance-none leading-normal;
+  }
+  input:focus {
+    @apply outline-none shadow-outline;
+  }
+  .access-code-form {
+    @apply m-auto flex flex-col;
+  }
+  .access-code-form__input {
+    @apply mt-4;
+  }
+  .access-code-form__input--error {
+    @apply border border-red-500;
+  }
+  .access-code-form__message {
+    @apply hidden;
+  }
+  .access-code-form__error-message {
+    @apply text-xs italic font-hairline text-red-500;
+  }
+  .access-code-form__submit {
+    @apply mt-4;
+  }
 }
-input:focus {
-  @apply outline-none shadow-outline;
-}
-.access-code-form {
-  @apply m-auto flex flex-col;
-}
-.access-code-form__input {
-  @apply mt-4;
-}
-.access-code-form__input--error {
-  @apply border border-red-500;
-}
-.access-code-form__message {
-  @apply hidden;
-}
-.access-code-form__error-message {
-  @apply text-xs italic font-hairline text-red-500;
-}
-.access-code-form__submit {
-  @apply mt-4;
-}

convene-web/app/javascript/src/custom_components/header.scss

@@ -1,13 +1,15 @@
-.header {
-  .items-container {
-    @apply flex items-center justify-between px-4 py-3 bg-blue-500 text-white font-bold;
+@layer components {
+  .header {
+    .items-container {
+      @apply flex items-center justify-between px-4 py-3 bg-blue-500 text-white font-bold;
 
-    h1 {
-      @apply text-2xl;
-    }
+      h1 {
+        @apply text-2xl;
+      }
 
-    h3 {
-      @apply text-sm;
+      h3 {
+        @apply text-sm;
+      }
     }
   }
 }

convene-web/app/javascript/src/custom_components/icons.scss

@@ -1,7 +1,9 @@
-.icon-solid::before {
-  font-family: "Font Awesome 5 Free"; font-weight: 900;
-  @apply mr-2;
+@layer components {
+  .icon-solid::before {
+    font-family: "Font Awesome 5 Free"; font-weight: 900;
+    @apply mr-2;
+  }
+  .phone-alt-icon::before {
+    content: "\f879";
+  }
 }
-.phone-alt-icon::before {
-  content: "\f879";
-}

convene-web/app/javascript/src/custom_components/room_card.scss

@@ -1,34 +1,36 @@
-.room-card {
-  @apply grid grid-cols-1 grid-rows-2 grid-flow-col shadow rounded-lg;
+@layer components {
+  .room-card {
+    @apply grid grid-cols-1 grid-rows-2 grid-flow-col shadow rounded-lg;
 
-  header {
-    @apply w-full flex items-center;
+    header {
+      @apply w-full flex items-center;
 
-    h3 {
-      @apply text-gray-900 text-sm leading-5 font-medium truncate pl-8 mr-4;
+      h3 {
+        @apply text-gray-900 text-sm leading-5 font-medium truncate pl-8 mr-4;
+      }
     }
-  }
 
 
-  footer {
-    @apply w-full flex items-center justify-center border-t border-gray-200;
+    footer {
+      @apply w-full flex items-center justify-center border-t border-gray-200;
 
-    .room-door_enter {
-      @apply flex justify-center text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-br-lg transition ease-in-out duration-150;
-      a {
-        @apply flex-1 inline-flex items-center justify-center py-4;
+      .room-door_enter {
+        @apply flex justify-center text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-br-lg transition ease-in-out duration-150;
+        a {
+          @apply flex-1 inline-flex items-center justify-center py-4;
+        }
+        span {
+          @apply pl-4;
+        }
       }
-      span {
-        @apply pl-4;
-      }
-    }
 
-    .room-door_enter:focus {
-      @apply outline-none shadow-outline-blue border-blue-300 z-10;
-    }
+      .room-door_enter:focus {
+        @apply outline-none shadow-outline-blue border-blue-300 z-10;
+      }
 
-    .room-door_enter:hover {
-      @apply text-gray-500;
+      .room-door_enter:hover {
+        @apply text-gray-500;
+      }
     }
   }
 }

convene-web/app/javascript/src/tailwind.scss

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";