perf: reduce bundle size by optimizing HTML/CSS a bit (#97)

* perf: reduce bundle size by optimizing HTML/CSS a bit * perf: reduce a bit more * perf: more cleanup
nolanlawson · Dec 26, 2020 · 3bf8225 · 3bf8225
1 parent 4f03bfc
commit 3bf8225
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 17 deletions.
diff --git a/src/picker/components/Picker/Picker.html b/src/picker/components/Picker/Picker.html
@@ -49,7 +49,7 @@
     <span id="skintone-description" class="sr-only">{i18n.skinToneDescription}</span>
     <div id="skintone-list"
          class="skintone-list {skinTonePickerExpanded ? '' : 'hidden no-animate'}"
-         style="{skinTonePickerExpanded ? 'transform: translateY(0);' : 'transform: translateY(calc(-1 * var(--num-skintones) * var(--total-emoji-size)))'}"
+         style="transform:translateY({ skinTonePickerExpanded ? 0 : 'calc(-1 * var(--num-skintones) * var(--total-emoji-size))'})"
          role="listbox"
          aria-label={i18n.skinTonesLabel}
          aria-activedescendant="skintone-{activeSkinTone}"
@@ -64,7 +64,7 @@
         <!-- see https://stackoverflow.com/a/42764495/680742 -->
         <!-- see also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus -->
         <div    id="skintone-{i}"
-                class="emoji skintone-option cursor-pointer hide-focus {i === activeSkinTone ? 'active' : ''}"
+                class="emoji hide-focus {i === activeSkinTone ? 'active' : ''}"
                 aria-selected={i === activeSkinTone}
                 role="option"
                 title={i18n.skinTones[i]}

diff --git a/src/picker/components/Picker/Picker.js b/src/picker/components/Picker/Picker.js
@@ -74,12 +74,12 @@ let activeSearchItemId // eslint-disable-line no-unused-vars
 // Utils/helpers
 //
 
-function focus (id) {
+const focus = id => {
   rootElement.getRootNode().getElementById(id).focus()
 }
 
 // fire a custom event that crosses the shadow boundary
-function fireEvent (name, detail) {
+const fireEvent = (name, detail) => {
   rootElement.dispatchEvent(new CustomEvent(name, {
     detail,
     bubbles: true,
@@ -88,14 +88,17 @@ function fireEvent (name, detail) {
 }
 
 // eslint-disable-next-line no-unused-vars
-function unicodeWithSkin (emoji, currentSkinTone) {
-  return (currentSkinTone && emoji.skins && emoji.skins[currentSkinTone]) || emoji.unicode
-}
+const unicodeWithSkin = (emoji, currentSkinTone) => (
+  (currentSkinTone && emoji.skins && emoji.skins[currentSkinTone]) || emoji.unicode
+)
 
 // eslint-disable-next-line no-unused-vars
-function labelWithSkin (emoji, currentSkinTone) {
-  return uniq([(emoji.name || unicodeWithSkin(emoji, currentSkinTone)), ...(emoji.shortcodes || [])]).join(', ')
-}
+const labelWithSkin = (emoji, currentSkinTone) => (
+  uniq([(emoji.name || unicodeWithSkin(emoji, currentSkinTone)), ...(emoji.shortcodes || [])]).join(', ')
+)
+
+// Detect a skintone option button
+const isSkinToneOption = element => /^skintone-/.test(element.id)
 
 //
 // Determine the emoji support level (in requestIdleCallback)
@@ -547,7 +550,7 @@ async function onEmojiClick (event) {
 // eslint-disable-next-line no-unused-vars
 async function onSkinToneOptionsClick (event) {
   const { target } = event
-  if (!target.classList.contains('skintone-option')) {
+  if (!isSkinToneOption(target)) {
     return
   }
   halt(event)
@@ -632,7 +635,7 @@ async function onSkinToneOptionsFocusOut (event) {
   // On blur outside of the skintone options, collapse the skintone picker.
   // Except if focus is just moving to another skintone option, e.g. pressing up/down to change focus
   const { relatedTarget } = event
-  if (!relatedTarget || !relatedTarget.classList.contains('skintone-option')) {
+  if (!relatedTarget || !isSkinToneOption(relatedTarget)) {
     skinTonePickerExpanded = false
   }
 }

diff --git a/src/picker/components/Picker/Picker.scss b/src/picker/components/Picker/Picker.scss
@@ -90,6 +90,7 @@ button.emoji,
   line-height: 1;
   overflow: hidden;
   font-family: var(--font-family);
+  cursor: pointer;
 
   // see https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
   @media(hover: hover) and (pointer: fine) {

diff --git a/src/picker/styles/global.scss b/src/picker/styles/global.scss
@@ -45,8 +45,4 @@
 
 .gone {
   display: none !important;
-}
-
-.cursor-pointer {
-  cursor: pointer;
 }
diff --git a/src/picker/styles/resets.scss b/src/picker/styles/resets.scss
@@ -4,7 +4,6 @@ button {
   border: none;
   background: none;
   box-shadow: none;
-  cursor: pointer;
   -webkit-tap-highlight-color: transparent; // see https://stackoverflow.com/a/21003770/680742
 
   &::-moz-focus-inner {