Address feedback: Move to a static method

Author: DmitrySharabin

src/color-swatch/color-swatch.js

@@ -1,5 +1,4 @@
 import ColorElement from "../common/color-element.js";
-import { resolveColor } from "../common/util.js";
 import "../gamut-badge/gamut-badge.js";
 
 let importIncrementable;
@@ -24,8 +23,6 @@ const Self = class ColorSwatch extends ColorElement {
 			<slot name="after"></slot>
 		</div>`;
 
-	static resolvedColors = new Map();
-
 	constructor () {
 		super();
 
@@ -209,13 +206,7 @@ const Self = class ColorSwatch extends ColorElement {
 					return null;
 				}
 
-				try {
-					return ColorSwatch.Color.get(this.value);
-				}
-				catch {
-					// Color.js can't parse the color value; possibly one of the values we can handle gracefully
-					return resolveColor(this.value, this._el.swatch, Self.resolvedColors);
-				}
+				return ColorSwatch.resolveColor(this.value, this._el.swatch);
 			},
 			set (value) {
 				this.value = ColorSwatch.Color.get(value)?.display();

src/common/color-element.js

@@ -31,6 +31,7 @@ const Self = class ColorElement extends NudeElement {
 	static Color;
 	static all = {};
 	static dependencies = new Set();
+	static resolvedColors = new Map();
 
 	static globalStyles = [{ css: baseGlobalStyles }];
 
@@ -137,6 +138,36 @@ const Self = class ColorElement extends NudeElement {
 
 		customElements.define(this.tagName, this);
 	}
+
+	/**
+	 * Resolve a color value and cache it.
+	 * @param {string} value Color value to resolve.
+	 * @param {Element} element Element to get computed style from to resolve the color value.
+	 */
+	static resolveColor (value, element) {
+		try {
+			return Self.Color.get(value);
+		}
+		catch {
+			// Color.js can't parse the color value; possibly one of the values we can handle gracefully
+			if (Self.resolvedColors.has(value)) {
+				return Self.resolvedColors.get(value);
+			}
+
+			if (!CSS.supports("color", value)) {
+				// Not supported or invalid value
+				return null;
+			}
+
+			// One of the supported color values; resolve and cache it
+			element.style.backgroundColor = value;
+			let color = getComputedStyle(element).backgroundColor;
+			Self.resolvedColors.set(value, color);
+			element.style.backgroundColor = "";
+
+			return color;
+		}
+	}
 };
 
 export default Self;

src/common/util.js

@@ -118,32 +118,3 @@ export function getType (value) {
 export function noOpTemplateTag (strings, ...values) {
 	return strings.reduce((acc, string, i) => acc + string + (values[i] ?? ""), "");
 }
-
-/**
- * Resolve a color value and cache it.
- * @param {string} value Color value to resolve.
- * @param {Element} element Element to get computed style from to resolve the color value.
- * @param {Map<string, string>} cache
- */
-export function resolveColor (value, element, cache) {
-	if (!value || !element || !(element instanceof Element) || !cache) {
-		return null;
-	}
-
-	if (cache.has(value)) {
-		return cache.get(value);
-	}
-
-	if (!CSS.supports("color", value)) {
-		// Not supported or invalid value
-		return null;
-	}
-
-	// One of the supported color values; resolve and cache it
-	element.style.backgroundColor = value;
-	let color = getComputedStyle(element).backgroundColor;
-	cache.set(value, color);
-	element.style.backgroundColor = "";
-
-	return color;
-}