Fixes mapper() when mode = null.

Author: danburzo

docs/api.md

@@ -853,9 +853,9 @@ Returns the point `t` at which the value `v` is located between the values `a` a
 
 Creates a mapping that applies _fn_ on each channel of the color in the _mode_ color space.
 
-The resulting function accepts a single argument (a color object or a string), which it converts to the _mode_ color space if not already there.
+The resulting function accepts a single argument (a color object or a string), which it converts to the _mode_ color space if necessary.
 
-The _mode_ parameter can be set to `null`, in which case the mapper will iterate through all the channels in the color's original color space.
+The _mode_ parameter can be set to `null`, in which case the mapper will iterate through the channels in the color's original color space.
 
 The _fn_ callback has the following signature:
 
@@ -884,9 +884,9 @@ multiplyAlpha({ r: 1, g: 0.6, b: 0.4, a: 0.5 });
 // ⇒ { mode: 'rgb', r: 0.5, g: 0.3, b: 0.2, a: 0.5 }
 ```
 
-All channels are included in the mapping, so you might want to exclude the `alpha` channel from your function, like we do above.
+All channels, including `alpha`, are included in the mapping. You may want to handle the `alpha` channel differently in the callback function, like in the example above.
 
-Returning `undefined` or `NaN` from the function will omit that channel from the resulting color.
+Returning `undefined` or `NaN` from the callback function will omit that channel from the resulting color object.
 
 #### Built-in mappings
 

src/map.js

@@ -10,15 +10,15 @@ const mapper = (fn, mode = 'rgb', preserve_mode = false) => {
 		if (!conv_color) {
 			return undefined;
 		}
-		let res = (channels || getMode(color.mode).channels).reduce(
+		let res = (channels || getMode(conv_color.mode).channels).reduce(
 			(res, ch) => {
 				let v = fn(conv_color[ch], ch, conv_color, mode);
 				if (v !== undefined && !isNaN(v)) {
 					res[ch] = v;
 				}
 				return res;
 			},
-			{ mode }
+			{ mode: conv_color.mode }
 		);
 		if (!preserve_mode) {
 			return res;

test/map.test.js

@@ -30,95 +30,61 @@ tape('gamma transfer function', t => {
 	t.end();
 });
 
-tape('when mode is null and color is rgb string', t => {
+tape('mode = null', t => {
 	let increaser = mapper(v => v + 0.1, null);
-
-	// might be incorrect
-	t.throws(() => {
-		increaser('#cc0033');
-	}, "Cannot read properties of undefined (reading 'channels')");
-	t.end();
-});
-
-tape('when mode is null and color is rgb', t => {
-	let increaser = mapper(v => v + 0.1, null);
-	const res = increaser({ mode: 'rgb', r: 0.8, g: 0, b: 0.2 });
-
-	// might be incorrect
-	t.equal(res.mode, null);
-	t.end();
-});
-
-tape('when mode is null and preserve_mode is true', t => {
-	let increaser = mapper(v => v + 1, null, true);
-
-	// might be incorrect
-	t.throws(
-		() => {
-			const res = increaser({ mode: 'rgb', r: 0.8, g: 0, b: 0.2 });
-			console.log(res);
-		},
-		{ message: "Cannot read properties of undefined (reading 'rgb')" }
+	t.equal(formatHex(increaser('#cc0033')), '#e61a4d', 'color is rgb string');
+	t.equal(
+		increaser({ mode: 'rgb', r: 0.8, g: 0, b: 0.2 }).mode,
+		'rgb',
+		'color is rgb'
 	);
 	t.end();
 });
 
-tape('when mode is undefined and preserve_mode is true', t => {
-	let decreaseMapper = mapper(v => v - 0.1, undefined, true);
-	const res = decreaseMapper('#cc0033');
-	t.equal(res.mode, 'rgb');
-	t.end();
-});
-
-tape('when mode is hsl and preserve_mode is true', t => {
-	let increaser = mapper(v => v + 0.1, 'hsl', true);
-	const res = increaser('#cc0033');
-	t.equal(res.mode, 'rgb');
-	t.end();
-});
-
-tape('when mode is hsl and preserve_mode is false', t => {
-	let increaser = mapper(v => v + 0.1, 'hsl', false);
-	const res = increaser('#cc0033');
-	t.equal(res.mode, 'hsl');
-	t.end();
-});
-
-tape('when mode is oklch and preserve_mode is false', t => {
-	let increaser = mapper(v => v + 0.1, 'oklch', false);
-	const res = increaser('#cc0033');
-	t.equal(res.mode, 'oklch');
+tape('preserve_mode', t => {
+	const rgbColor = { mode: 'rgb', r: 0.8, g: 0, b: 0.2 };
+	const fn = v => v + 0.1;
+	t.equal(
+		formatHex(mapper(fn, null, true)(rgbColor)),
+		'#e61a4d',
+		'mode = null, preserve_mode = true'
+	);
+	t.equal(
+		mapper(fn, undefined, true)('#cc0033').mode,
+		'rgb',
+		'mode = undefined, preserve_mode = true'
+	);
+	t.equal(
+		mapper(fn, 'hsl', true)('#cc0033').mode,
+		'rgb',
+		'mode = hsl, preserve_mode = true'
+	);
+	t.equal(
+		mapper(fn, 'hsl', false)('#cc0033').mode,
+		'hsl',
+		'mode = hsl, preserve_mode = false'
+	);
+	t.equal(
+		mapper(fn, 'oklch', false)('#cc0033').mode,
+		'oklch',
+		'mode = oklch, preserve_mode = false'
+	);
+	const oklchColor = {
+		mode: 'oklch',
+		alpha: 0.25,
+		l: 30,
+		c: 0.5,
+		h: 1
+	};
+	t.equal(
+		mapper(fn, 'hsl', false)(oklchColor).mode,
+		'hsl',
+		'oklch color, mode = hsl, preserve_mode = false'
+	);
+	t.equal(
+		mapper(fn, 'hsl', true)(oklchColor).mode,
+		'oklch',
+		'oklch color, mode = hsl, preserve_mode = true'
+	);
 	t.end();
 });
-
-tape(
-	`when input color is oklch('color(--oklch 30 0.5 1 / 0.25)') and when mode is hsl and preserve_mode is false`,
-	t => {
-		let increaser = mapper(v => v + 0.1, 'hsl', false);
-		const res = increaser({
-			mode: 'oklch',
-			alpha: 0.25,
-			l: 30,
-			c: 0.5,
-			h: 1
-		});
-		t.equal(res.mode, 'hsl');
-		t.end();
-	}
-);
-
-tape(
-	`when input color is oklch('color(--oklch 30 0.5 1 / 0.25)') and when mode is hsl and preserve_mode is true`,
-	t => {
-		let increaser = mapper(v => v + 0.1, 'hsl', true);
-		const res = increaser({
-			mode: 'oklch',
-			alpha: 0.25,
-			l: 30,
-			c: 0.5,
-			h: 1
-		});
-		t.equal(res.mode, 'oklch');
-		t.end();
-	}
-);