feat: decreasing bundle size

willmendesneto · May 9, 2021 · 4b50931 · 4b50931
1 parent 9751832
commit 4b50931
Show file tree

Hide file tree

Showing 6 changed files with 1,966 additions and 1,894 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Updated
 
-- Updating the project dependencies to the latest version
+- Updating the project dependencies and devDependencies to the latest version
+- Decreasing package bundle size
 
 ## [3.1.2][] - 2020-07-24
 

diff --git a/package.json b/package.json
@@ -94,11 +94,11 @@
     },
     {
       "path": "./dist/umd/hex-to-css-filter.js",
-      "maxSize": "4.90KB"
+      "maxSize": "5KB"
     },
     {
       "path": "./dist/umd/hex-to-css-filter.min.js",
-      "maxSize": "2.3KB"
+      "maxSize": "2.2KB"
     }
   ],
   "husky": {

diff --git a/src/color.ts b/src/color.ts
@@ -1,8 +1,8 @@
-type HSLData = {
+interface HSLData {
   h: number;
   s: number;
   l: number;
-};
+}
 
 export default class Color {
   r = 0;
@@ -104,6 +104,7 @@ export default class Color {
   }
 
   private multiply(matrix: number[]): void {
+    // These values are needed. It's correct because the returned values will change
     const newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
     const newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
     const newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
@@ -184,16 +185,12 @@ export default class Color {
 
     saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
 
-    switch (max) {
-      case red:
-        hue = (green - blue) / delta + (green < blue ? 6 : 0);
-        break;
-      case green:
-        hue = (blue - red) / delta + 2;
-        break;
-      case blue:
-        hue = (red - green) / delta + 4;
-        break;
+    if (max === red) {
+      hue = (green - blue) / delta + (green < blue ? 6 : 0);
+    } else if (max === green) {
+      hue = (blue - red) / delta + 2;
+    } else if (max === blue) {
+      hue = (red - green) / delta + 4;
     }
 
     hue /= 6;
@@ -216,8 +213,8 @@ export default class Color {
    * @memberof Color
    */
   private clamp(value: number): number {
-    const minRGBValue = 0;
-    const maxRGBValue = 255;
-    return Math.min(Math.max(value, minRGBValue), maxRGBValue);
+    // Minimum RGB Value = 0;
+    // Maximum RGB Value = 255;
+    return Math.min(Math.max(value, 0), 255);
   }
 }
diff --git a/src/hex-to-css-filter.ts b/src/hex-to-css-filter.ts
@@ -14,7 +14,9 @@ const hexToRgb = (hex: string): [number, number, number] | [] => {
       number,
       number,
     ];
-  } else if (hex.length === 7) {
+  }
+
+  if (hex.length === 7) {
     return [parseInt(`0x${hex[1]}${hex[2]}`), parseInt(`0x${hex[3]}${hex[4]}`), parseInt(`0x${hex[5]}${hex[6]}`)] as [
       number,
       number,

diff --git a/src/solver.ts b/src/solver.ts
@@ -2,14 +2,14 @@ import Color from './color';
 import { HexToCssConfiguration } from './hex-to-css-filter';
 
 type FilterValuesArray = [number, number, number, number, number, number];
-type SPSAPayload = {
+interface SPSAPayload {
   /** How many times the script was called to solve the color */
   called?: number;
   /** Percentage loss value for the generated filter */
   loss: number;
   /** Percentage loss per each color type organized in RGB: red, green, blue, h, s, l. */
   values: FilterValuesArray;
-};
+}
 
 export default class Solver {
   private target: Color;
@@ -260,17 +260,16 @@ export default class Solver {
    * @memberof Solver
    */
   private css(filters: number[]): string {
-    const formatCssFilterValue = (idx: number, multiplier = 1): number => {
-      return Math.round(filters[idx] * multiplier);
-    };
+    const formatCssFilterValueByMultiplier = (idx: number, multiplier = 1): number =>
+      Math.round(filters[idx] * multiplier);
 
     return [
-      `invert(${formatCssFilterValue(0)}%)`,
-      `sepia(${formatCssFilterValue(1)}%)`,
-      `saturate(${formatCssFilterValue(2)}%)`,
-      `hue-rotate(${formatCssFilterValue(3, 3.6)}deg)`,
-      `brightness(${formatCssFilterValue(4)}%)`,
-      `contrast(${formatCssFilterValue(5)}%);`,
+      `invert(${formatCssFilterValueByMultiplier(0)}%)`,
+      `sepia(${formatCssFilterValueByMultiplier(1)}%)`,
+      `saturate(${formatCssFilterValueByMultiplier(2)}%)`,
+      `hue-rotate(${formatCssFilterValueByMultiplier(3, 3.6)}deg)`,
+      `brightness(${formatCssFilterValueByMultiplier(4)}%)`,
+      `contrast(${formatCssFilterValueByMultiplier(5)}%);`,
     ].join(' ');
   }
 }