New API to normalize color values without NaN.

[facelessuser]

#476 (comment)

[LeaVerou]

My comment was:

Not a blocker, but I think we need something higher level than this, i.e. a function to drop nones either by converting to 0 or taking coords from another color. If that function does not mutate objects but returns new ones, it will also fix the serialization problem. Can you open a new issue for the API design discussion?

I’m envisioning a function that would take a single color as its first argument, and optionally a variable number of other colors which would be used to resolve none values (anything after the first such color would only be used in case the first one also has none values. If no other color is provided, none is just converted to 0.

• Would such a design work?
• What should the function be called?
• Should it mutate the color or return a new color?

We could also then add a allowNone: true | false (or dropNone depending on what we want the default to be) option to serialize() as a shortcut to this.

[kleinfreund]

I just wanted to chip in and say that I'd appreciate a new serialize option for handling none values, too. A color picker I'm building currently has color conversions that output 0 where colorjs.io outputs none. In my experiments with using colorjs.io instead of my custom conversion functions, I ended up adding result.replace(/none/g, '0') as a quick cover up, but that's not very great (though it would work).

[LeaVerou]

Are there cases where Color.js output none where it was invalid CSS, or are you looking to eliminate valid none values from the serialized colors?

[kleinfreund]

Are there cases where Color.js output none where it was invalid CSS, or are you looking to eliminate valid none values from the serialized colors?

(Not at a big computer right now) For me, the latter. I had converted a bunch of custom color conversion algorithms with test coverage to use colorjs.io instead and saw a series of tests fail that passed previously on account of 0 values now being NaN/none (depending on which colorjs.io version I used)

[LeaVerou]

If you’re gonna pass them through a function, something like this should probably do the trick:

function removeNone (color) {
	let color2 = new Color(color.space, [0, 0, 0]);
	return color.mix(color2, 0, {space: color.space});
}

We could consider adding it to the core if there's demand, but I would refrain from adding it based on a single use case.