replace colord with colorjs.io to support more colors (#76)

benchmarks.js

@@ -81,12 +81,6 @@ bench.add('real world sort example #2 (nerdy.dev)', () => {
 		"rgb(43, 138, 62)",
 		"rgb(211, 249, 216)",
 		"rgb(51, 154, 240)",
-		"hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%))",
-		"hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%))",
-		"hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%))",
-		"hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%))",
-		"hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%))",
-		"hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%))",
 		"rgb(22, 25, 29)",
 		"rgb(173, 181, 189)",
 		"rgb(13, 15, 18)",
@@ -124,8 +118,6 @@ bench.add('real world sort example #2 (nerdy.dev)', () => {
 		"rgba(0, 0, 0, 0)",
 		"rgb(137, 41, 255)",
 		"rgb(230, 98, 230)",
-		"hsl(var(--indigo-12-hsl)/50%)",
-		"hsl(var(--indigo-12-hsl)/75%)",
 		"color(display-p3 0.001 0.015 0.03)"
 	])
 })

index.js

@@ -1,7 +1,4 @@
-import { colord, extend } from 'colord'
-import namesPlugin from 'colord/plugins/names'
-
-extend([namesPlugin])
+import Color from 'colorjs.io'
 
 /**
  * @typedef NormalizedColor
@@ -11,20 +8,55 @@ extend([namesPlugin])
  * @property {number} alpha
  */
 
+/**
+ * @param {string | number | {raw: string} | undefined} value
+ * @returns {number}
+ * @todo Make this faster based on usage heuristics
+ */
+function numerify(value) {
+	if (typeof value === 'number' && Number.isFinite(value)) {
+		return value
+	}
+	if (Number.isNaN(value)) {
+		return 0
+	}
+	if (typeof value === 'object' && 'raw' in value) {
+		return parseFloat(value.raw)
+	}
+	return 0
+}
+
 /**
  * Convert a CSS (string) color into a normalized object that can be used for comparison
- * @param {string} color
+ * @param {string} authored
  * @returns {NormalizedColor & { authored: string }}
  */
-export function convert(color) {
-	let result = colord(color).toHsl()
+export function convert(authored) {
+	// TODO: get rid of try/catch
+	// TODO: use Color.js's faster exports
+	try {
+		let converted = new Color(authored)
+		let hsl = converted.hsl
+		let hue = numerify(hsl[0])
+		let saturation = numerify(hsl[1])
+		let lightness = numerify(hsl[2])
+		let alpha = numerify(converted.alpha)
 
-	return {
-		hue: result.h,
-		saturation: result.s,
-		lightness: result.l,
-		alpha: result.a,
-		authored: color
+		return {
+			hue,
+			saturation,
+			lightness,
+			alpha,
+			authored
+		}
+	} catch (error) {
+		return {
+			hue: 0,
+			saturation: 0,
+			lightness: 0,
+			alpha: 0,
+			authored
+		}
 	}
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "color-sorter",
-  "version": "6.0.2",
+  "version": "6.1.0-next.1",
   "description": "Sort colors in a visually pleasing way.",
   "homepage": "https://github.com/projectwallace/color-sorter",
   "repository": "projectwallace/color-sorter",
@@ -40,7 +40,7 @@
     "url": "https://github.com/projectwallace/color-sorter/issues"
   },
   "dependencies": {
-    "colord": "^2.9.3"
+    "colorjs.io": "^0.5.2"
   },
   "devDependencies": {
     "@codecov/vite-plugin": "^0.0.1-beta.9",
@@ -51,4 +51,4 @@
     "vite": "^5.2.12",
     "vite-plugin-dts": "^3.9.1"
   }
-}
+}

test.js

@@ -21,17 +21,34 @@ test('the convert fn converts colors to an HSLA object', () => {
 		'hsl(0, 100%, 50%)',
 		'rgb(255, 0, 0)',
 		'rgba(255, 0, 0, 1)'
-	].map(color => convert(color))
+	]
 
-	colors.forEach(color => {
-		assert.equal(color, {
+	for (let color of colors) {
+		assert.equal(convert(color), {
 			hue: 0,
 			saturation: 100,
 			lightness: 50,
 			alpha: 1,
-			authored: color.authored
-		})
-	})
+			authored: color
+		}, `Failed convert for '${color}'`)
+	}
+})
+
+test('invalid colors return a default object', () => {
+	const colors = [
+		'invalid',
+		'hsl(0, 0, 0)',
+	]
+
+	for (let color of colors) {
+		assert.equal(convert(color), {
+			hue: 0,
+			saturation: 0,
+			lightness: 0,
+			alpha: 0,
+			authored: color
+		}, `Failed convert for '${color}'`)
+	}
 })
 
 test('Colors are sorted by Hue', () => {
@@ -74,16 +91,16 @@ test('Colors are sorted by Hue, then by saturation', () => {
 
 test('Grey-ish values are shifted to the end (lightest first)', () => {
 	const colors = [
-		'hsl(0, 0, 0)', // Black
+		'hsl(0, 0%, 0%)', // Black
 		'hsl(0, 100%, 50%)', // Red,
-		'hsl(0, 0, 100%)', // White
+		'hsl(0, 0%, 100%)', // White
 		'hsl(240, 100%, 50%)' // Blue
 	]
 	const expected = [
 		'hsl(0, 100%, 50%)', // Red
 		'hsl(240, 100%, 50%)', // Blue
-		'hsl(0, 0, 0)', // Black
-		'hsl(0, 0, 100%)' // White
+		'hsl(0, 0%, 100%)', // White
+		'hsl(0, 0%, 0%)', // Black
 	]
 	const actual = sort(colors)
 
@@ -114,16 +131,16 @@ test('Grey-ish colors are sorted by Lightness', () => {
 
 test('Grey-ish colors are sorted by Lightness, then by Alpha', () => {
 	const colors = [
-		'hsla(0, 0, 20%, 1)',
-		'hsla(0, 0, 10%, 1)',
-		'hsla(0, 0, 10%, 0)',
-		'hsla(0, 0, 0, 0)'
+		'hsla(0, 0%, 20%, 1)',
+		'hsla(0, 0%, 10%, 1)',
+		'hsla(0, 0%, 10%, 0)',
+		'hsla(0, 0%, 0%, 0)'
 	]
 	const expected = [
-		'hsla(0, 0, 0, 0)',
-		'hsla(0, 0, 10%, 0)',
-		'hsla(0, 0, 10%, 1)',
-		'hsla(0, 0, 20%, 1)'
+		'hsla(0, 0%, 20%, 1)',
+		'hsla(0, 0%, 10%, 1)',
+		'hsla(0, 0%, 10%, 0)',
+		'hsla(0, 0%, 0%, 0)',
 	]
 	const actual = sort(colors)
 
@@ -141,8 +158,8 @@ test('Fully transparent colors are sorted along their opaque companions', () =>
 test('smoke test', () => {
 	const colors = [
 		'#4b4747',
-		'#d70c0b',
 		'#f00',
+		'#d70c0b',
 		'#f22b24',
 		'#ff6930',
 		'#eb6c1e',
@@ -161,8 +178,8 @@ test('smoke test', () => {
 		'#10ac47',
 		'#04a03b',
 		'#03fff3',
-		'#25bbc3',
 		'#38d7df',
+		'#25bbc3',
 		'#15b8ec',
 		'#00adea',
 		'#8e34c9',