@versatiles/style 5.8.3 → 5.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/style",
-  "version": "5.8.3",
+  "version": "5.8.4",
   "description": "Generate StyleJSON for MapLibre",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
     }
   },
   "scripts": {
-    "check": "npm run lint && npm run build && npm run test ",
+    "check": "npm run lint && npm run build && npm run test && npm run format:check",
     "build": "rm -rf release; npm run build-browser && npm run build-node && npm run build-styles && npm run build-sprites && npm run doc",
     "build-browser": "rollup -c --environment BUILD:browser && $(cd release/versatiles-style; tar -cf - versatiles-style.* | gzip -9 > ../versatiles-style.tar.gz)",
     "build-node": "rm -rf dist && rollup -c --environment BUILD:node && chmod +x dist/index.js && rm -r dist/declaration",
@@ -22,13 +22,16 @@
     "doc-graph": "vrt deps-graph | vrt doc-insert README.md '### Dependency Graph'",
     "doc-screenshots": "tsx scripts/screenshots.ts",
     "doc-typescript": "vrt doc-typescript -f html",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "lint": "eslint --color .",
     "prepack": "npm run build",
     "release": "vrt release-npm",
     "test": "npm run test-typescript",
     "test-coverage": "vitest run --coverage",
     "test-typescript": "vitest run",
-    "upgrade": "vrt deps-upgrade"
+    "upgrade": "vrt deps-upgrade",
+    "prepare": "husky"
   },
   "repository": {
     "type": "git",
@@ -54,16 +57,18 @@
     "@types/bin-pack": "^1.0.3",
     "@types/brace-expansion": "^1.1.2",
     "@types/inquirer": "^9.0.9",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.2",
     "@types/tar-stream": "^3.1.4",
-    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/parser": "^8.48.1",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
     "@versatiles/release-tool": "^2.5.0",
     "@vitest/coverage-v8": "^4.0.15",
     "bin-pack": "^1.0.2",
     "esbuild": "^0.27.1",
     "eslint": "^9.39.1",
+    "husky": "^9.1.7",
     "inquirer": "^13.0.2",
+    "prettier": "^3.7.4",
     "rollup": "^4.53.3",
     "rollup-plugin-dts": "^6.3.0",
     "rollup-plugin-sourcemaps2": "^0.5.4",
@@ -71,7 +76,7 @@
     "tar-stream": "^3.1.7",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.1",
+    "typescript-eslint": "^8.49.0",
     "vitest": "^4.0.15"
   }
 }

package/src/color/abstract.ts

@@ -6,7 +6,7 @@ import type { RGB } from './rgb.js';
  * The abstract `Color` class provides a blueprint for color manipulation and conversion.
  * It includes methods for converting between different color models ({@link HSL}, {@link HSV}, {@link RGB}),
  * as well as various color transformations such as inversion, rotation, saturation, and blending.
- * 
+ *
  * @abstract
  */
 /**

package/src/color/hsl.test.ts

@@ -4,9 +4,7 @@ import { HSV } from './hsv.js';
 import { RGB } from './rgb.js';
 
 describe('HSL Class', () => {
-
 	describe('constructor', () => {
-
 		it('should initialize small HSL values correctly', () => {
 			const color = new HSL(10, 20, 30, 0.4);
 			expect(color.asArray()).toStrictEqual([10, 20, 30, 0.4]);
@@ -21,7 +19,7 @@ describe('HSL Class', () => {
 			const color = new HSL(-60, -10, -10, -1);
 			expect(color.asArray()).toStrictEqual([300, 0, 0, 0]);
 		});
-	})
+	});
 
 	it('clone should return a new HSL instance with identical values', () => {
 		const color = new HSL(120, 50, 50, 0.5);
@@ -32,7 +30,6 @@ describe('HSL Class', () => {
 	});
 
 	describe('conversion', () => {
-
 		it('asString should return correct HSL and HSLA strings', () => {
 			const color1 = new HSL(120, 50, 50);
 			expect(color1.asString()).toBe('hsl(120,50%,50%)');
@@ -52,8 +49,7 @@ describe('HSL Class', () => {
 				const hsl = new HSL(...input);
 				const hsv = hsl.asHSV();
 				expect(hsv).toBeInstanceOf(HSV);
-				expect(hsv.asArray().map(Math.round))
-					.toStrictEqual([...output, 1]);
+				expect(hsv.asArray().map(Math.round)).toStrictEqual([...output, 1]);
 			}
 
 			check([10, 0, 0], [10, 0, 0]);
@@ -69,11 +65,10 @@ describe('HSL Class', () => {
 
 		it('asRGB should correctly convert HSL to RGB', () => {
 			function check(input: [number, number, number], output: [number, number, number]) {
-				const hsl = new HSL(...input)
+				const hsl = new HSL(...input);
 				const rgb = hsl.asRGB();
 				expect(rgb).toBeInstanceOf(RGB);
-				expect(rgb.asArray().map(Math.round))
-					.toStrictEqual([...output, 1]);
+				expect(rgb.asArray().map(Math.round)).toStrictEqual([...output, 1]);
 			}
 
 			check([10, 0, 0], [0, 0, 0]);
@@ -86,8 +81,7 @@ describe('HSL Class', () => {
 			check([17, 100, 50], [255, 72, 0]);
 			check([18, 100, 100], [255, 255, 255]);
 		});
-
-	})
+	});
 
 	describe('should parse valid HSL and HSLA strings', () => {
 		function check(str: string, result: number[]) {
@@ -95,7 +89,7 @@ describe('HSL Class', () => {
 				const color = HSL.parse(str);
 				expect(color).toBeInstanceOf(HSL);
 				expect(color.asArray()).toStrictEqual(result);
-			})
+			});
 		}
 
 		check('hsl(240,100%,50%)', [240, 100, 50, 1]);
@@ -109,7 +103,7 @@ describe('HSL Class', () => {
 
 	describe('invertLuminosity', () => {
 		let color: HSL;
-		beforeEach(() => color = new HSL(120, 50, 50, 0.8));
+		beforeEach(() => (color = new HSL(120, 50, 50, 0.8)));
 
 		it('inverts luminosity correctly', () => {
 			expect(color.invertLuminosity().asArray()).toStrictEqual([120, 50, 50, 0.8]); // Luminosity inverted to 50%
@@ -126,7 +120,7 @@ describe('HSL Class', () => {
 
 	describe('rotateHue', () => {
 		let color: HSL;
-		beforeEach(() => color = new HSL(120, 50, 50, 0.8));
+		beforeEach(() => (color = new HSL(120, 50, 50, 0.8)));
 
 		it('rotates hue correctly within the range of 0-360', () => {
 			expect(color.rotateHue(180).asArray()).toStrictEqual([300, 50, 50, 0.8]); // Hue rotated by 180 degrees
@@ -144,7 +138,7 @@ describe('HSL Class', () => {
 	describe('saturate', () => {
 		let color: HSL, grey: HSL;
 		beforeEach(() => {
-			color = new HSL(120, 50, 50, 0.8)
+			color = new HSL(120, 50, 50, 0.8);
 			grey = new HSL(120, 0, 50, 0.8);
 		});
 
@@ -166,7 +160,7 @@ describe('HSL Class', () => {
 
 	describe('fade', () => {
 		let color: HSL;
-		beforeEach(() => color = new HSL(120, 50, 50, 0.8));
+		beforeEach(() => (color = new HSL(120, 50, 50, 0.8)));
 
 		it('reduces alpha correctly', () => {
 			expect(color.fade(0.5).asArray()).toStrictEqual([120, 50, 50, 0.4]); // Alpha reduced by 50%

package/src/color/hsl.ts

@@ -56,12 +56,7 @@ export class HSL extends Color {
 	 * @returns A new HSL color with rounded hue, saturation, lightness, and alpha components.
 	 */
 	round(): HSL {
-		return new HSL(
-			Math.round(this.h),
-			Math.round(this.s),
-			Math.round(this.l),
-			Math.round(this.a * 1000) / 1000,
-		);
+		return new HSL(Math.round(this.h), Math.round(this.s), Math.round(this.l), Math.round(this.a * 1000) / 1000);
 	}
 
 	/**
@@ -105,7 +100,8 @@ export class HSL extends Color {
 	 * @returns A new HSV color representing the same color.
 	 */
 	asHSV(): HSV {
-		const s = this.s / 100, l = this.l / 100;
+		const s = this.s / 100,
+			l = this.l / 100;
 		const v = l + s * Math.min(l, 1 - l);
 		const sv = v === 0 ? 0 : 2 * (1 - l / v);
 		return new HSV(this.h, sv * 100, v * 100, this.a);
@@ -136,12 +132,7 @@ export class HSL extends Color {
 		};
 
 		// Convert to RGB in the 0-255 range and return
-		return new RGB(
-			255 * hueToRgb(h + 1 / 3),
-			255 * hueToRgb(h),
-			255 * hueToRgb(h - 1 / 3),
-			this.a
-		);
+		return new RGB(255 * hueToRgb(h + 1 / 3), 255 * hueToRgb(h), 255 * hueToRgb(h - 1 / 3), this.a);
 	}
 
 	/**
@@ -162,7 +153,12 @@ export class HSL extends Color {
 
 		match = input.match(/^hsla\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%,(?<a>[-+0-9.]+)\)$/);
 		if (match) {
-			return new HSL(parseFloat(match.groups!.h), parseFloat(match.groups!.s), parseFloat(match.groups!.l), parseFloat(match.groups!.a));
+			return new HSL(
+				parseFloat(match.groups!.h),
+				parseFloat(match.groups!.s),
+				parseFloat(match.groups!.l),
+				parseFloat(match.groups!.a)
+			);
 		}
 
 		throw new Error(`Invalid HSL color string: "${input}"`);
@@ -202,4 +198,4 @@ export class HSL extends Color {
 	fade(value: number): HSL {
 		return new HSL(this.h, this.s, this.l, this.a * (1 - value));
 	}
-}
+}

package/src/color/hsv.test.ts

@@ -4,7 +4,6 @@ import { HSL } from './hsl.js';
 import { RGB } from './rgb.js';
 
 describe('HSV Class', () => {
-
 	it('constructor initializes values correctly with clamping', () => {
 		const color = new HSV(400, 120, 120, 2);
 		expect(color.asArray()).toStrictEqual([40, 100, 100, 1]);
@@ -63,14 +62,12 @@ describe('HSV Class', () => {
 	});
 
 	describe('color conversion', () => {
-
 		it('asHSL converts HSV to HSL correctly', () => {
 			function check(input: [number, number, number], output: [number, number, number]) {
 				const hsv = new HSV(...input);
 				const hsl = hsv.asHSL();
 				expect(hsl).toBeInstanceOf(HSL);
-				expect(hsl.asArray().map(Math.round))
-					.toStrictEqual([...output, 1]);
+				expect(hsl.asArray().map(Math.round)).toStrictEqual([...output, 1]);
 
 				expect(hsv.asHex()).toStrictEqual(hsl.asHex());
 			}
@@ -90,8 +87,7 @@ describe('HSV Class', () => {
 			const color = new HSV(120, 100, 100);
 			const rgb = color.asRGB();
 			expect(rgb).toBeInstanceOf(RGB);
-			expect(rgb.asArray().map(value => Math.round(value)))
-				.toStrictEqual([0, 255, 0, 1]);
+			expect(rgb.asArray().map((value) => Math.round(value))).toStrictEqual([0, 255, 0, 1]);
 		});
 
 		it('asHSV and toHSV return the same instance or clone', () => {
@@ -104,8 +100,7 @@ describe('HSV Class', () => {
 			function check(input: [number, number, number], output: [number, number, number]) {
 				const color = new HSV(...input);
 				const rgb = color.asRGB();
-				expect(rgb.asArray().map(value => Math.round(value)))
-					.toStrictEqual([...output, 1]);
+				expect(rgb.asArray().map((value) => Math.round(value))).toStrictEqual([...output, 1]);
 			}
 
 			check([10, 0, 0], [0, 0, 0]);
@@ -143,7 +138,6 @@ describe('HSV Class', () => {
 			check(360, '#FF0000');
 			check(361, '#FF0400');
 		});
-
 	});
 
 	describe('parse errors and validations', () => {
@@ -172,4 +166,4 @@ describe('HSV Class', () => {
 			expect(transparent.fade(0.5).asArray()).toStrictEqual([0, 50, 50, 0]); // Remains fully transparent
 		});
 	});
-});
+});

package/src/color/hsv.ts

@@ -57,12 +57,7 @@ export class HSV extends Color {
 	 * @returns A new HSV color with rounded components.
 	 */
 	round(): HSV {
-		return new HSV(
-			Math.round(this.h),
-			Math.round(this.s),
-			Math.round(this.v),
-			Math.round(this.a * 1000) / 1000
-		);
+		return new HSV(Math.round(this.h), Math.round(this.s), Math.round(this.v), Math.round(this.a * 1000) / 1000);
 	}
 
 	/**
@@ -89,13 +84,8 @@ export class HSV extends Color {
 		const s = this.s / 100;
 		const v = this.v / 100;
 		const k = (2 - s) * v;
-		const q = k < 1 ? k : 2 - k
-		return new HSL(
-			this.h,
-			q == 0 ? 0 : 100 * s * v / q,
-			100 * k / 2,
-			this.a
-		);
+		const q = k < 1 ? k : 2 - k;
+		return new HSL(this.h, q == 0 ? 0 : (100 * s * v) / q, (100 * k) / 2, this.a);
 	}
 
 	/**
@@ -123,25 +113,51 @@ export class HSV extends Color {
 		const s = this.s / 100; // Normalize s to range [0, 1]
 		const v = this.v / 100; // Normalize v to range [0, 1]
 
-		let r = 0, g = 0, b = 0;
+		let r = 0,
+			g = 0,
+			b = 0;
 
 		if (s === 0) {
 			// Achromatic (grey)
 			r = g = b = v;
 		} else {
 			const i = Math.floor(h * 6); // Determine the sector of the color wheel
-			const f = h * 6 - i;         // Fractional part of h * 6
+			const f = h * 6 - i; // Fractional part of h * 6
 			const p = v * (1 - s);
 			const q = v * (1 - s * f);
 			const t = v * (1 - s * (1 - f));
 
 			switch (i % 6) {
-				case 0: r = v; g = t; b = p; break;
-				case 1: r = q; g = v; b = p; break;
-				case 2: r = p; g = v; b = t; break;
-				case 3: r = p; g = q; b = v; break;
-				case 4: r = t; g = p; b = v; break;
-				case 5: r = v; g = p; b = q; break;
+				case 0:
+					r = v;
+					g = t;
+					b = p;
+					break;
+				case 1:
+					r = q;
+					g = v;
+					b = p;
+					break;
+				case 2:
+					r = p;
+					g = v;
+					b = t;
+					break;
+				case 3:
+					r = p;
+					g = q;
+					b = v;
+					break;
+				case 4:
+					r = t;
+					g = p;
+					b = v;
+					break;
+				case 5:
+					r = v;
+					g = p;
+					b = q;
+					break;
 			}
 		}
 
@@ -170,4 +186,4 @@ export class HSV extends Color {
 	static randomColor(options?: RandomColorOptions): HSV {
 		return randomColor(options);
 	}
-}
+}

package/src/color/index.test.ts

@@ -4,9 +4,7 @@ import { HSL } from './hsl.js';
 import { HSV } from './hsv.js';
 import { RGB } from './rgb.js';
 
-
 describe('Color Conversions', () => {
-
 	const scenarios: [number, number, number, number][] = [
 		[-100, 14, 15, 0],
 		[0, 0, 0, 0.1],
@@ -19,7 +17,7 @@ describe('Color Conversions', () => {
 		[700, 100, 50, 0.8],
 		[800, 100, 100, 0.9],
 		[900, 12, 13, 1.0],
-	]
+	];
 	it('test HSV -> HSL -> RGB', () => {
 		for (const v of scenarios) {
 			const hsv = new HSV(...v);
@@ -41,7 +39,7 @@ describe('Color Conversions', () => {
 			for (let i = 0; i < 4; i++) expect(a1[i]).toBeCloseTo(a2[i]);
 		}
 	});
-})
+});
 
 describe('Color.parse', () => {
 	it('parses hexadecimal color strings correctly', () => {

package/src/color/index.ts

@@ -22,7 +22,7 @@ Color.parse = function (input: string | Color): Color {
 		default:
 			throw Error('Unknown color format: ' + input);
 	}
-}
+};
 
 Color.HSL = HSL;
 Color.HSV = HSV;

package/src/color/random.test.ts

@@ -20,7 +20,7 @@ describe('RandomColor', () => {
 			expect(array[2]).toBeGreaterThanOrEqual(0);
 			expect(array[2]).toBeLessThanOrEqual(100);
 		});
-	
+
 		it('supports options for generating random colors', () => {
 			const random = randomColor({ hue: 'red', luminosity: 'bright' });
 			expect(random).toBeInstanceOf(HSV);

package/src/color/random.ts

@@ -1,7 +1,6 @@
 import { HSV } from './hsv.js';
 import { mod } from './utils.js';
 
-
 type Range = [number, number];
 interface ColorInfo {
 	hueRange: Range | null;
@@ -33,8 +32,6 @@ export default function randomColor(options?: RandomColorOptions): HSV {
 
 	return new HSV(H, S, V, options.opacity ?? 1);
 
-
-
 	function pickHue(options: RandomColorOptions): number {
 		return mod(randomWithin(getHueRange(options.hue)), 360);
 
@@ -62,9 +59,15 @@ export default function randomColor(options?: RandomColorOptions): HSV {
 		if (options.saturation === 'strong') return sMax;
 
 		switch (options.luminosity) {
-			case 'bright': sMin = 55; break;
-			case 'dark': sMin = sMax - 10; break;
-			case 'light': sMax = 55; break;
+			case 'bright':
+				sMin = 55;
+				break;
+			case 'dark':
+				sMin = sMax - 10;
+				break;
+			case 'light':
+				sMax = 55;
+				break;
 			default:
 		}
 
@@ -72,17 +75,24 @@ export default function randomColor(options?: RandomColorOptions): HSV {
 	}
 
 	function pickBrightness(h: number, s: number, options: RandomColorOptions): number {
-		let bMin = getMinimumBrightness(h, s), bMax = 100;
-
+		let bMin = getMinimumBrightness(h, s),
+			bMax = 100;
 
 		if (typeof options.luminosity === 'number') {
 			bMin = options.luminosity;
 			bMax = options.luminosity;
 		} else {
 			switch (options.luminosity) {
-				case 'dark': bMax = Math.min(100, bMin + 20); break;
-				case 'light': bMin = (bMax + bMin) / 2; break;
-				case 'random': bMin = 0; bMax = 100; break;
+				case 'dark':
+					bMax = Math.min(100, bMin + 20);
+					break;
+				case 'light':
+					bMin = (bMax + bMin) / 2;
+					break;
+				case 'random':
+					bMin = 0;
+					bMax = 100;
+					break;
 				default:
 			}
 		}
@@ -96,7 +106,8 @@ export default function randomColor(options?: RandomColorOptions): HSV {
 				const [s1, v1] = lowerBounds[i];
 				const [s2, v2] = lowerBounds[i + 1];
 				if (s >= s1 && s <= s2) {
-					const m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
+					const m = (v2 - v1) / (s2 - s1),
+						b = v1 - m * s1;
 					return m * s + b;
 				}
 			}
@@ -108,11 +119,10 @@ export default function randomColor(options?: RandomColorOptions): HSV {
 	function randomWithin(range: Range): number {
 		//Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
 		seed = (seed * 9301 + 49297) % 233280;
-		return Math.floor(range[0] + seed / 233280.0 * (range[1] - range[0]));
+		return Math.floor(range[0] + (seed / 233280.0) * (range[1] - range[0]));
 	}
 }
 
-
 function inputToSeed(input: number | string | null | undefined): number {
 	if (input == null) return 0;
 	if (typeof input === 'number') return input;
@@ -122,8 +132,6 @@ function inputToSeed(input: number | string | null | undefined): number {
 	return i;
 }
 
-
-
 function initColorDictionary(): Map<string, ColorInfo> {
 	const dict = new Map<string, ColorInfo>();
 
@@ -139,19 +147,113 @@ function initColorDictionary(): Map<string, ColorInfo> {
 		});
 	};
 
-	defineColor('monochrome', null, [[0, 0], [100, 0]]);
-	defineColor('red', [- 26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
-	defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
-	defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
-	defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
-	defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
-	defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
-	defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
+	defineColor('monochrome', null, [
+		[0, 0],
+		[100, 0],
+	]);
+	defineColor(
+		'red',
+		[-26, 18],
+		[
+			[20, 100],
+			[30, 92],
+			[40, 89],
+			[50, 85],
+			[60, 78],
+			[70, 70],
+			[80, 60],
+			[90, 55],
+			[100, 50],
+		]
+	);
+	defineColor(
+		'orange',
+		[18, 46],
+		[
+			[20, 100],
+			[30, 93],
+			[40, 88],
+			[50, 86],
+			[60, 85],
+			[70, 70],
+			[100, 70],
+		]
+	);
+	defineColor(
+		'yellow',
+		[46, 62],
+		[
+			[25, 100],
+			[40, 94],
+			[50, 89],
+			[60, 86],
+			[70, 84],
+			[80, 82],
+			[90, 80],
+			[100, 75],
+		]
+	);
+	defineColor(
+		'green',
+		[62, 178],
+		[
+			[30, 100],
+			[40, 90],
+			[50, 85],
+			[60, 81],
+			[70, 74],
+			[80, 64],
+			[90, 50],
+			[100, 40],
+		]
+	);
+	defineColor(
+		'blue',
+		[178, 257],
+		[
+			[20, 100],
+			[30, 86],
+			[40, 80],
+			[50, 74],
+			[60, 60],
+			[70, 52],
+			[80, 44],
+			[90, 39],
+			[100, 35],
+		]
+	);
+	defineColor(
+		'purple',
+		[257, 282],
+		[
+			[20, 100],
+			[30, 87],
+			[40, 79],
+			[50, 70],
+			[60, 65],
+			[70, 59],
+			[80, 52],
+			[90, 45],
+			[100, 42],
+		]
+	);
+	defineColor(
+		'pink',
+		[282, 334],
+		[
+			[20, 100],
+			[30, 90],
+			[40, 86],
+			[60, 84],
+			[80, 80],
+			[90, 75],
+			[100, 73],
+		]
+	);
 
 	return dict;
 }
 
-
 function getColorInfo(hue: number): ColorInfo {
 	hue = mod(hue, 360);
 	if (hue >= 334) hue -= 360;