perf: minify html for smaller svelte bundle

rollup.config.js

@@ -10,6 +10,26 @@ import cssnano from 'cssnano'
 const dev = process.env.NODE_ENV !== 'production'
 const svelte = dev ? hotSvelte : mainSvelte
 
+const preprocessConfig = preprocess({
+  scss: true,
+  postcss: {
+    plugins: [
+      cssnano({
+        preset: 'default'
+      })
+    ]
+  }
+})
+
+const origMarkup = preprocessConfig.markup
+// minify the HTML by removing extra whitespace
+// TODO: this is fragile, but it also results in a lot of bundlesize savings. let's find a better solution
+preprocessConfig.markup = async function () {
+  const res = await origMarkup.apply(this, arguments)
+  res.code = res.code.replace(/([>}])\s+([<{])/sg, '$1$2')
+  return res
+}
+
 // Build Database.test.js and Picker.js as separate modules at build times so that they are properly tree-shakeable.
 // Most of this has to happen because customElements.define() has side effects
 const baseConfig = {
@@ -28,16 +48,7 @@ const baseConfig = {
       css: true,
       customElement: true,
       dev,
-      preprocess: preprocess({
-        scss: true,
-        postcss: {
-          plugins: [
-            cssnano({
-              preset: 'default'
-            })
-          ]
-        }
-      })
+      preprocess: preprocessConfig
     }),
     !dev && analyze({ summaryOnly: true })
   ],

src/picker/components/Picker/Picker.html

@@ -2,9 +2,8 @@
 <section
   class="picker"
   aria-label={i18n.regionLabel}
-  {style}
-  bind:this={rootElement}
->
+  style={pickerStyle}
+  bind:this={rootElement}>
   <!-- using a spacer div because this allows us to cover up the skintone picker animation -->
   <div class="pad-top"></div>
   <div class="search-row">
@@ -42,8 +41,9 @@
               aria-haspopup="listbox"
               aria-expanded={skinTonePickerExpanded}
               aria-controls="skintone-list"
-              on:click={onClickSkinToneButton}
-      >{skinToneButtonText}</button>
+              on:click={onClickSkinToneButton}>
+        {skinToneButtonText}
+      </button>
     </div>
     <span id="skintone-description" class="sr-only">{i18n.skinToneDescription}</span>
     <div id="skintone-list"
@@ -56,8 +56,7 @@
          on:keydown={onSkinToneOptionKeydown}
          on:focusout={onSkinToneOptionsBlur}
          on:click={onClickSkinToneOption}
-         bind:this={skinToneDropdown}
-    >
+         bind:this={skinToneDropdown}>
       {#each skinTones as skinTone, i (skinTone)}
         <button id="skintone-{i}"
                 class="emoji skintone-option hide-focus {i === activeSkinTone ? 'active' : ''}"
@@ -65,8 +64,9 @@
                 role="option"
                 title={i18n.skinTones[i]}
                 tabindex="-1"
-                aria-label={i18n.skinTones[i]}
-        >{skinTone}</button>
+                aria-label={i18n.skinTones[i]}>
+          {skinTone}
+        </button>
       {/each}
     </div>
 
@@ -83,22 +83,26 @@
               aria-label={i18n.categories[group.name]}
               aria-selected={currentGroup.id === group.id}
               title={i18n.categories[group.name]}
-              on:click={() => onNavClick(group)}
-      ><div class="emoji">{group.emoji}</div></button>
+              on:click={() => onNavClick(group)}>
+        <div class="emoji">
+          {group.emoji}
+        </div>
+      </button>
     {/each}
   </div>
   <div class="indicator-wrapper"
        aria-hidden="true">
     <div class="indicator"
          style={indicatorStyle}
-         use:calculateIndicatorWidth
-    ></div>
+         use:calculateIndicatorWidth>
+    </div>
   </div>
 
   <div class="message {message ? '' : 'gone'}"
        role="alert"
-       aria-live="polite"
-  >{message}</div>
+       aria-live="polite">
+    {message}
+  </div>
 
   <!-- tabindex is so people can scroll up and down with the keyboard -->
   <div class="tabpanel {(!loaded || message) ? 'gone': ''}"
@@ -126,8 +130,7 @@
            role={searchMode ? 'listbox' : 'menu'}
            aria-labelledby="menu-label-{i}"
            id={searchMode ? 'search-results' : ''}
-           use:calculateEmojiGridWith
-      >
+           use:calculateEmojiGridWith>
         {#each emojiWithCategory.emojis as emoji, i (emoji.id)}
           <button role={searchMode ? 'option' : 'menuitem'}
                   aria-selected={searchMode ? i == activeSearchItem : ''}

src/picker/components/Picker/Picker.js

@@ -53,7 +53,7 @@ let skinToneDropdown
 let currentSkinTone = 0
 let activeSkinTone = 0
 let skinToneButtonText // eslint-disable-line no-unused-vars
-let style = '' // eslint-disable-line no-unused-vars
+let pickerStyle // eslint-disable-line no-unused-vars
 let skinToneButtonLabel = '' // eslint-disable-line no-unused-vars
 let skinTones = []
 let currentFavorites = [] // eslint-disable-line no-unused-vars
@@ -154,7 +154,7 @@ onDestroy(async () => {
 // Global styles for the entire picker
 //
 
-$: style = `
+$: pickerStyle = `
   --font-family: ${FONT_FAMILY};
   --num-groups: ${groups.length}; 
   --indicator-opacity: ${searchMode ? 0 : 1};