Switch from Rollup to esbuild (#1083)

* Install esbuild

* Install esbuild-sass-plugin

* Makes Buffer exist in the browser without plugins

* Use esbuild instead of Rollup

* Fix Sass warnings

* Increase Mocha command timeout

* Fix some file changes not triggering a rebuild

* Fix an async issue and restore Mocha timeout

* Fix async issue in Gruntfile.js

* Perform requested changes according to review

* Use eslint and stylelint on Vue file changes

* Clean up esbuild-command.js

* Move esbuild plugins to their own subfolder

* Bump esbuild to 0.12.21

* Improve Buffer global definition as per review

* Update NPM scripts in package.json

frontend/assets/style/_icons.scss

@@ -1,4 +1,4 @@
-// TODO Remove font-awesome and replace by https://icomoon.io font
+// TODO Remove font-awesome and replace by https://icomoon.io font.
 
 // More fonts icon in node_module/fontawesome
 $icons: (
@@ -68,8 +68,7 @@ $icons: (
     url("../fonts/Icons/fa-solid-900.eot?#iefix") format("embedded-opentype"),
     url("../fonts/Icons/fa-solid-900.woff2") format("woff2"),
     url("../fonts/Icons/fa-solid-900.woff") format("woff"),
-    url("../fonts/Icons/fa-solid-900.ttf") format("truetype"),
-    url("../fonts/Icons/fa-solid-900.svg#fontawesome") format("svg");
+    url("../fonts/Icons/fa-solid-900.ttf") format("truetype");
 }
 
 @font-face {
@@ -81,8 +80,7 @@ $icons: (
     url("../fonts/Icons/fa-regular-400.eot?#iefix") format("embedded-opentype"),
     url("../fonts/Icons/fa-regular-400.woff2") format("woff2"),
     url("../fonts/Icons/fa-regular-400.woff") format("woff"),
-    url("../fonts/Icons/fa-regular-400.ttf") format("truetype"),
-    url("../fonts/Icons/fa-regular-400.svg#fontawesome") format("svg");
+    url("../fonts/Icons/fa-regular-400.ttf") format("truetype");
 }
 
 [class^="icon-"] {

frontend/views/components/Toggle.vue

@@ -21,6 +21,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+@use "sass:math";
 @import "@assets/style/_variables.scss";
 @import "@assets/style/_mixins.scss";
 
@@ -35,7 +36,7 @@ $iconSize: 2.75rem;
   padding: 0.5rem 0;
   width: 2rem + $iconSize; // gap on the edge
   background-color: transparent;
-  transition: height 1ms $speed, width 1ms $speed, background $speed/2;
+  transition: height 1ms $speed, width 1ms $speed, background math.div($speed, 2);
   overflow: hidden;
   color: $text_0;
 
@@ -70,15 +71,15 @@ $iconSize: 2.75rem;
     height: $iconSize;
     text-align: center;
     line-height: $iconSize;
-    transition: opacity $speed/5 $speed;
+    transition: opacity math.div($speed, 5) $speed;
   }
 
   .is-active & {
     background-color: rgba(0, 0, 0, 0.7);
     height: 100vh;
     width: 200vw;
     top: 0;
-    transition: height 1ms 1ms, width 1ms 1ms, background $speed/2;
+    transition: height 1ms 1ms, width 1ms 1ms, background math.div($speed, 2);
 
     .icon-info,
     .icon-bars {

frontend/views/containers/group-settings/InvitationsTable.vue

@@ -274,6 +274,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use "sass:math";
 @import "@assets/style/_variables.scss";
 
 .c-section {
@@ -329,7 +330,7 @@ export default {
     align-items: center;
 
     .c-tip {
-      margin-left: $size_4 / 2;
+      margin-left: math.div($size_4, 2);
       line-height: 1.3125rem;
     }
   }