Update unit test, add a few more minification tweaks

nathansmith · Feb 11, 2022 · 9f9ff0a · 9f9ff0a
1 parent e504d6b
commit 9f9ff0a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ CTA Modal is a self-contained call to action [ARIA modal](https://www.w3.org/TR/
 
 - All the TypeScript code is well tested, with 💯 [coverage](https://host.sonspring.com/cta-modal/coverage/cta-modal.ts.html).
 
-- The compiled [cta-modal.js](https://host.sonspring.com/cta-modal/dist/cta-modal.js) file is less than **9** kilobytes.
+- The compiled [cta-modal.js](https://host.sonspring.com/cta-modal/dist/cta-modal.js) file is less than **8** kilobytes.
 
 - You can view the source code on [GitHub](https://github.com/nathansmith/cta-modal).
 

diff --git a/index.html b/index.html
@@ -68,7 +68,7 @@ <h1>CTA Modal 🦒</h1>
         <p
           >The compiled
           <a href="https://host.sonspring.com/cta-modal/dist/cta-modal.js">cta-modal.js</a> file is
-          less than <b>9</b> kilobytes.</p
+          less than <b>8</b> kilobytes.</p
         >
       </li>
 

diff --git a/scripts/minifyWebComponent.js b/scripts/minifyWebComponent.js
@@ -37,10 +37,10 @@ const minifyWebComponent = (pathToAssets) => {
       fileText = fileText.replace(/\s+/g, ' ');
 
       // Minify CSS animation names.
-      fileText = fileText.replace(/HIDE-DIALOG/g, 'd0');
-      fileText = fileText.replace(/SHOW-DIALOG/g, 'd1');
-      fileText = fileText.replace(/HIDE-OVERLAY/g, 'o0');
-      fileText = fileText.replace(/SHOW-OVERLAY/g, 'o1');
+      fileText = fileText.replace(/HIDE-DIALOG/g, 'a');
+      fileText = fileText.replace(/SHOW-DIALOG/g, 'b');
+      fileText = fileText.replace(/HIDE-OVERLAY/g, 'c');
+      fileText = fileText.replace(/SHOW-OVERLAY/g, 'd');
 
       // Minify CSS class names.
       fileText = fileText.replace(/cta-modal__close/g, 'c');

diff --git a/src/assets/ts/cta-modal.test.ts b/src/assets/ts/cta-modal.test.ts
@@ -55,7 +55,7 @@ describe('index.ts', () => {
       writable: true,
       value: () => {
         return {
-          matches: true,
+          matches: false,
         };
       },
     });

diff --git a/src/assets/ts/cta-modal.ts b/src/assets/ts/cta-modal.ts
@@ -26,7 +26,7 @@ if ('customElements' in window) {
   const FUNCTION = 'function';
   const HIDDEN = 'hidden';
   const KEYDOWN = 'keydown';
-  const MEDIA_QUERY_FOR_MOTION = '(prefers-reduced-motion: reduce)';
+  const PREFERS_REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
   const NONE = 'none';
   const SPACE = ' ';
   const STATIC = 'static';
@@ -57,7 +57,7 @@ if ('customElements' in window) {
         padding: 0;
       }
 
-      @media ${MEDIA_QUERY_FOR_MOTION} {
+      @media ${PREFERS_REDUCED_MOTION} {
         *,
         *:after,
         *:before {
@@ -539,10 +539,12 @@ if ('customElements' in window) {
       // Add a11y heading.
       if (this._heading) {
         // Get ID.
-        const id = this._heading.id || `id_${Math.random()}`;
+        const id = this._heading.id || Math.random();
 
-        // Set ID.
+        // @ts-expect-error number
         this._heading.id = id;
+
+        // @ts-expect-error number
         this._modal.setAttribute(ARIA_LABELLEDBY, id);
       }
     }
@@ -624,7 +626,7 @@ if ('customElements' in window) {
 
     _isMotionOkay() {
       // Get pref.
-      const { matches } = window.matchMedia(MEDIA_QUERY_FOR_MOTION);
+      const { matches } = window.matchMedia(PREFERS_REDUCED_MOTION);
 
       // Expose boolean.
       return this._isAnimated && !matches;
@@ -635,8 +637,8 @@ if ('customElements' in window) {
     // =====================
 
     _toggleModalDisplay(callback: () => void) {
-      // Set attribute.
-      this.setAttribute(ACTIVE, String(this._isActive));
+      // @ts-expect-error boolean
+      this.setAttribute(ACTIVE, this._isActive);
 
       // Get booleans.
       const isModalVisible = this._modalScroll.style.display === BLOCK;