perf: optimize utils/color.ts (#708)

windicss · Feb 25, 2022 · c6d5094 · c6d5094
1 parent bb0341d
commit c6d5094
Showing 1 changed file with 33 additions and 34 deletions.
diff --git a/src/utils/color.ts b/src/utils/color.ts
@@ -2,36 +2,35 @@ import colorString from 'color-string';
 import type { Color } from 'color-string';
 
 export function hsl2rgb(h: number, s: number, l: number): [number, number, number] {
-  s = s / 100,
-  l = l / 100;
-  if (h >= 360)
-    h %= 360;
+  l /= 100;
+  if (h >= 360) h %= 360;
 
-  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const c = (1 - Math.abs(2 * l - 1)) * (s / 100);
   const x = c * (1 - Math.abs((h / 60) % 2 - 1));
   const m = l - c/2;
-  let  r = 0;
+  let r = 0;
   let g = 0;
   let b = 0;
 
   if (0 <= h && h < 60) {
-    r = c; g = x; b = 0;
+    r = c + m; g = x + m; b = m;
   } else if (60 <= h && h < 120) {
-    r = x; g = c; b = 0;
+    r = x + m; g = c + m; b = m;
   } else if (120 <= h && h < 180) {
-    r = 0; g = c; b = x;
+    r = m; g = c + m; b = x + m;
   } else if (180 <= h && h < 240) {
-    r = 0; g = x; b = c;
+    r = m; g = x + m; b = c + m;
   } else if (240 <= h && h < 300) {
-    r = x; g = 0; b = c;
+    r = x + m; g = m; b = c + m;
   } else if (300 <= h && h < 360) {
-    r = c; g = 0; b = x;
+    r = c + m; g = m; b = x + m;
   }
-  // having obtained RGB, convert channels to hex
-  r = Math.round((r + m) * 255);
-  g = Math.round((g + m) * 255);
-  b = Math.round((b + m) * 255);
-  return [r, g, b];
+
+  return [
+    Math.round(r * 255),
+    Math.round(g * 255),
+    Math.round(b * 255),
+  ];
 }
 
 export function hwb2rgb(h: number, w: number, b: number): [number, number, number] {
@@ -51,32 +50,32 @@ export function hwb2rgb(h: number, w: number, b: number): [number, number, numbe
 
 export function toRGBA(color: string): Color | undefined {
   if (/^hsla?/.test(color)) {
-    const colorTuple = colorString.get.hsl(color);
-    if (!colorTuple) return;
-    return [...hsl2rgb(colorTuple[0], colorTuple[1], colorTuple[2]), colorTuple[3]];
+    const color_array = colorString.get.hsl(color);
+    if (!color_array) return;
+    return [...hsl2rgb(color_array[0], color_array[1], color_array[2]), color_array[3]];
   } else if (/^rgba?/.test(color)) {
-    const colorTuple = colorString.get.rgb(color);
-    if (!colorTuple) return;
-    return colorTuple;
+    const color_array = colorString.get.rgb(color);
+    if (!color_array) return;
+    return color_array;
   } else if (color.startsWith('hwb')) {
-    const colorTuple = colorString.get.hwb(color);
-    if (!colorTuple) return;
-    return [...hwb2rgb(colorTuple[0], colorTuple[1], colorTuple[2]), colorTuple[3]];
+    const color_array = colorString.get.hwb(color);
+    if (!color_array) return;
+    return [...hwb2rgb(color_array[0], color_array[1], color_array[2]), color_array[3]];
   }
   return colorString.get(color)?.value;
 }
 
 export function toRGB(color: string): number[] | undefined {
-  return toRGBA(color)?.slice(0, 3);
+  const rgba = toRGBA(color);
+  if (!rgba) return;
+  rgba.pop();
+  return rgba;
 }
 
-export function toColor(colorStr: string) : { color: string, opacity: string } {
-  const rgba = toRGBA(colorStr);
-  const color = rgba ? rgba.slice(0, 3).join(', ') : colorStr;
+export function toColor(color_string: string) : { color: string, opacity: string } {
+  const rgba = toRGBA(color_string);
+  const color = rgba ? rgba.slice(0, 3).join(', ') : color_string;
   const opacity = rgba ? rgba[3].toString() : '1';
 
-  return {
-    color,
-    opacity,
-  };
+  return { color, opacity };
 }