From ef17e3ba4ab566e9bf38dba6f1871f452b30368e Mon Sep 17 00:00:00 2001 From: Tom Lee Date: Sat, 17 Oct 2020 07:16:09 -0700 Subject: [PATCH] Live Reloading Frontend Asset in Development & Optimize Webpack Recompile (#140) 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: https://github.com/tailwindlabs/tailwindcss/issues/443#issuecomment-661559687 --- .../app/javascript/packs/application.js | 1 + .../app/javascript/src/application.scss | 6 --- .../src/custom_components/button.scss | 18 +++---- .../src/custom_components/form.scss | 48 ++++++++++--------- .../src/custom_components/header.scss | 18 +++---- .../src/custom_components/icons.scss | 14 +++--- .../src/custom_components/room_card.scss | 46 +++++++++--------- convene-web/app/javascript/src/tailwind.scss | 3 ++ convene-web/bin/run | 2 +- 9 files changed, 82 insertions(+), 74 deletions(-) create mode 100644 convene-web/app/javascript/src/tailwind.scss diff --git a/convene-web/app/javascript/packs/application.js b/convene-web/app/javascript/packs/application.js index 22d1db000..7a9a4c04d 100644 --- a/convene-web/app/javascript/packs/application.js +++ b/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") diff --git a/convene-web/app/javascript/src/application.scss b/convene-web/app/javascript/src/application.scss index 6f078ec89..76ea53495 100644 --- a/convene-web/app/javascript/src/application.scss +++ b/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"; diff --git a/convene-web/app/javascript/src/custom_components/button.scss b/convene-web/app/javascript/src/custom_components/button.scss index 371851659..838d9cb8b 100644 --- a/convene-web/app/javascript/src/custom_components/button.scss +++ b/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; -} \ No newline at end of file diff --git a/convene-web/app/javascript/src/custom_components/form.scss b/convene-web/app/javascript/src/custom_components/form.scss index e2f6fb426..a08d6244d 100644 --- a/convene-web/app/javascript/src/custom_components/form.scss +++ b/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; -} \ No newline at end of file diff --git a/convene-web/app/javascript/src/custom_components/header.scss b/convene-web/app/javascript/src/custom_components/header.scss index 9fd33ed25..af11a8133 100644 --- a/convene-web/app/javascript/src/custom_components/header.scss +++ b/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; + } } } } diff --git a/convene-web/app/javascript/src/custom_components/icons.scss b/convene-web/app/javascript/src/custom_components/icons.scss index d17735840..cf01bcc28 100644 --- a/convene-web/app/javascript/src/custom_components/icons.scss +++ b/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"; -} \ No newline at end of file diff --git a/convene-web/app/javascript/src/custom_components/room_card.scss b/convene-web/app/javascript/src/custom_components/room_card.scss index 78586933e..6a4607dd8 100644 --- a/convene-web/app/javascript/src/custom_components/room_card.scss +++ b/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; + } } } } diff --git a/convene-web/app/javascript/src/tailwind.scss b/convene-web/app/javascript/src/tailwind.scss new file mode 100644 index 000000000..76fcadcc0 --- /dev/null +++ b/convene-web/app/javascript/src/tailwind.scss @@ -0,0 +1,3 @@ +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; diff --git a/convene-web/bin/run b/convene-web/bin/run index 0f84d1e84..e3509929e 100755 --- a/convene-web/bin/run +++ b/convene-web/bin/run @@ -9,4 +9,4 @@ # interface in development instead of localhost so that the application can be # visited in browser without doing port forwarding. : ${BINDING:=localhost} -bin/rails s -p $PORT -b $BINDING +bin/webpack-dev-server & bin/rails s -p $PORT -b $BINDING