Revert "feat: @ctrl/tinycolor treeshaking" (#75)

jest.config.js

@@ -1,5 +1,4 @@
 module.exports = {
+  preset: 'ts-jest',
   collectCoverage: true,
-  // transform @ctrl/tinycolor imports from node_modules
-  transformIgnorePatterns: [],
 };

package.json

@@ -35,8 +35,6 @@
     "@ctrl/tinycolor": "^3.3.1"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.12.13",
-    "@babel/preset-typescript": "^7.12.13",
     "@types/jest": "^26.0.0",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^4.7.0",
@@ -48,6 +46,7 @@
     "jest": "^26.0.1",
     "np": "^7.0.0",
     "prettier": "^2.0.0",
+    "ts-jest": "^26.0.0",
     "typescript": "^4.0.2"
   },
   "homepage": "https://github.com/ant-design/ant-design-colors#readme"

src/generate.ts

@@ -1,5 +1,4 @@
-import { rgbToHsv, rgbToHex } from '@ctrl/tinycolor/dist/module/conversion';
-import { inputToRGB } from '@ctrl/tinycolor/dist/module/format-input';
+import { TinyColor } from '@ctrl/tinycolor';
 
 const hueStep = 2; // 色相阶梯
 const saturationStep = 0.16; // 饱和度阶梯，浅色部分
@@ -28,38 +27,6 @@ interface HsvObject {
   v: number;
 }
 
-interface RgbObject {
-  r: number;
-  g: number;
-  b: number;
-}
-
-// Wrapper function ported from TinyColor.prototype.toHsv
-// Keep it here because of `hsv.h * 360`
-function toHsv({ r, g, b }: RgbObject): HsvObject {
-  const hsv = rgbToHsv(r, g, b);
-  return { h: hsv.h * 360, s: hsv.s, v: hsv.v };
-}
-
-// Wrapper function ported from TinyColor.prototype.toHexString
-// Keep it here because of the prefix `#`
-function toHex({ r, g, b }: RgbObject): string {
-  return `#${rgbToHex(r, g, b, false)}`;
-}
-
-// Wrapper function ported from TinyColor.prototype.mix, not treeshakable.
-// Amount in range [0, 1]
-// Assume color1 & color2 has no alpha, since the following src code did so.
-function mix(rgb1: RgbObject, rgb2: RgbObject, amount: number): RgbObject {
-  const p = amount / 100;
-  const rgb = {
-    r: (rgb2.r - rgb1.r) * p + rgb1.r,
-    g: (rgb2.g - rgb1.g) * p + rgb1.g,
-    b: (rgb2.b - rgb1.b) * p + rgb1.b,
-  };
-  return rgb;
-}
-
 function getHue(hsv: HsvObject, i: number, light?: boolean): number {
   let hue: number;
   // 根据色相不同，色相转向不同
@@ -123,37 +90,33 @@ interface Opts {
 
 export default function generate(color: string, opts: Opts = {}): string[] {
   const patterns: Array<string> = [];
-  const pColor = inputToRGB(color);
+  const pColor = new TinyColor(color);
   for (let i = lightColorCount; i > 0; i -= 1) {
-    const hsv = toHsv(pColor);
-    const colorString: string = toHex(
-      inputToRGB({
-        h: getHue(hsv, i, true),
-        s: getSaturation(hsv, i, true),
-        v: getValue(hsv, i, true),
-      }),
-    );
+    const hsv = pColor.toHsv();
+    const colorString: string = new TinyColor({
+      h: getHue(hsv, i, true),
+      s: getSaturation(hsv, i, true),
+      v: getValue(hsv, i, true),
+    }).toHexString();
     patterns.push(colorString);
   }
-  patterns.push(toHex(pColor));
+  patterns.push(pColor.toHexString());
   for (let i = 1; i <= darkColorCount; i += 1) {
-    const hsv = toHsv(pColor);
-    const colorString: string = toHex(
-      inputToRGB({
-        h: getHue(hsv, i),
-        s: getSaturation(hsv, i),
-        v: getValue(hsv, i),
-      }),
-    );
+    const hsv = pColor.toHsv();
+    const colorString: string = new TinyColor({
+      h: getHue(hsv, i),
+      s: getSaturation(hsv, i),
+      v: getValue(hsv, i),
+    }).toHexString();
     patterns.push(colorString);
   }
 
   // dark theme patterns
   if (opts.theme === 'dark') {
     return darkColorMap.map(({ index, opacity }) => {
-      const darkColorString: string = toHex(
-        mix(inputToRGB(opts.backgroundColor || '#141414'), inputToRGB(patterns[index]), opacity * 100),
-      );
+      const darkColorString: string = new TinyColor(opts.backgroundColor || '#141414')
+        .mix(patterns[index], opacity * 100)
+        .toHexString();
       return darkColorString;
     });
   }