Enforce trailing commas unless ] or } is on the same line.

.eleventy.cjs

@@ -13,7 +13,7 @@ module.exports = config => {
 	config.setFrontMatterParsingOptions({
 		excerpt: true,
 		// Optional, default is "---"
-		excerpt_separator: "<!-- more -->"
+		excerpt_separator: "<!-- more -->",
 	});
 
 	// config.addFilter("readable_date", date => {
@@ -30,27 +30,27 @@ module.exports = config => {
 			let ret = require("path").relative(path, "/");
 
 			return ret || ".";
-		}
+		},
 	);
 
 	config.addFilter(
 		"unslugify",
-		slug => slug.replace(/(^|-)([a-z])/g, ($0, $1, $2) => ($1 ? " " : "") + $2.toUpperCase())
+		slug => slug.replace(/(^|-)([a-z])/g, ($0, $1, $2) => ($1 ? " " : "") + $2.toUpperCase()),
 	);
 
 	config.addFilter(
 		"first_heading",
 		content => {
 			// console.log(content);
 			return content ? content.match(/^#+\s*(.+)/)?.[1] ?? "NO_HEADING_FOUND" : "EMPTY_CONTENT";
-		}
+		},
 	);
 
 	return {
 		markdownTemplateEngine: "njk",
 		templateFormats: ["md", "njk"],
 		dir: {
-			output: "."
-		}
+			output: ".",
+		},
 	};
 };

.eslintrc.cjs

@@ -189,6 +189,9 @@ module.exports = {
 		// Enforce consistent brace style for blocks
 		// https://eslint.style/rules/default/brace-style
 		"@stylistic/brace-style": [1, "stroustrup"],
+		// Enforce trailing commas unless closing `]` or `}` is on the same line
+		// https://eslint.style/rules/default/comma-dangle
+		"@stylistic/comma-dangle": [1, "always-multiline"],
 		// Enforce no space before and one or more spaces after a comma
 		// https://eslint.style/rules/default/comma-spacing
 		"@stylistic/comma-spacing": 1,

apps/convert/convert.js

@@ -13,7 +13,7 @@ function update () {
 		let oldParams = getURLParams();
 		let newParams = [
 			["color", colorInput.value],
-			["precision", precisionInput.value || "0"]
+			["precision", precisionInput.value || "0"],
 		];
 
 		let changed = ![...new URL(location).searchParams].every((pair, i) => {

apps/gamut-mapping/index.js

@@ -29,7 +29,7 @@ let app = createApp({
 
 	methods: {
 		toPrecision: Color.util.toPrecision,
-		abs: Math.abs
+		abs: Math.abs,
 	},
 
 	watch: {
@@ -54,12 +54,12 @@ let app = createApp({
 				document.title = value.join(", ") + " • Gamut Mapping Playground";
 			},
 			immediate: true,
-			deep: true
-		}
+			deep: true,
+		},
 	},
 
 	components: {
-		"map-color": MapColor
+		"map-color": MapColor,
 	},
 }).mount(document.body);
 

apps/gamut-mapping/map-color.js

@@ -6,7 +6,7 @@ let spacesToShow = [Color.spaces.oklch, Color.spaces.p3, Color.spaces["p3-linear
 
 export default {
 	props: {
-		modelValue: String
+		modelValue: String,
 	},
 	emits: ["update:modelValue"],
 	data () {
@@ -37,7 +37,7 @@ export default {
 			},
 			set (value) {
 				this.$emit("update:modelValue", value);
-			}
+			},
 		},
 		colorLCH () {
 			return this.color.to("oklch");
@@ -49,7 +49,7 @@ export default {
 				let coords = this.color.to(space).coords.map(c => this.toPrecision(c, 3));
 				return {
 					name: space.name,
-					coords: Object.fromEntries(coordInfo.map(([c, info], i) => [c, {value: coords[i], name: info.name, id: c}]))
+					coords: Object.fromEntries(coordInfo.map(([c, info], i) => [c, {value: coords[i], name: info.name, id: c}])),
 				};
 			});
 		},
@@ -110,12 +110,12 @@ export default {
 			deltaEs = deltaEs.map(e => this.toPrecision(e, 2));
 			deltaEs.sort((a, b) => a - b);
 			return deltaEs;
-		}
+		},
 	},
 
 	methods: {
 		toPrecision: Color.util.toPrecision,
-		abs: Math.abs
+		abs: Math.abs,
 	},
 
 	watch: {
@@ -194,5 +194,5 @@ export default {
 					</dd>
 				</div>
 			</dl>
-		</section>`
+		</section>`,
 };

apps/gamut-mapping/methods.js

@@ -17,10 +17,10 @@ const methods = {
 			let lch = color.to("oklch").coords;
 			mappedColor.set({
 				"oklch.l": lch[0],
-				"oklch.h": lch[2]
+				"oklch.h": lch[2],
 			});
 			return methods.scale.compute(mappedColor);
-		}
+		},
 	},
 	"scale": {
 		label: "Scale",
@@ -38,7 +38,7 @@ const methods = {
 			});
 
 			return new Color("p3-linear", scaledCoords).to("p3");
-		}
+		},
 	},
 	// "scale125": {
 	// 	label: "Scale from 0.125",

apps/picker/index.js

@@ -110,7 +110,7 @@ let app = createApp({
 			ret.push(steps);
 
 			return ret;
-		}
+		},
 	},
 	watch: {
 		spaceId (newSpaceId, oldSpaceId) {
@@ -131,8 +131,8 @@ let app = createApp({
 				let {spaceId, coords, alpha} = this;
 				localStorage.picker_color = JSON.stringify({spaceId, coords, alpha});
 			});
-		}
-	}
+		},
+	},
 }).mount("#app");
 
 window.CSS_color_to_LCH = function CSS_color_to_LCH (str) {

assets/js/docs.js

@@ -61,7 +61,7 @@ function makePageToc (pageToc) {
 		}
 
 		let a = $.create("a", {
-			href: "#" + h2.id
+			href: "#" + h2.id,
 		});
 
 		// Linkify heading
@@ -78,7 +78,7 @@ function makePageToc (pageToc) {
 
 		$.create("li", {
 			contents: toc_a,
-			inside: pageToc
+			inside: pageToc,
 		});
 	});
 }
@@ -108,7 +108,7 @@ if (location.pathname.indexOf("/spaces") > -1) {
 					id,
 					name: meta.name,
 					min: range?.[0],
-					max: range?.[1]
+					max: range?.[1],
 				};
 			}),
 			whitePoint: Object.entries(Color.WHITES).find(([name, white]) => white === space.white)?.[0],
@@ -117,7 +117,7 @@ if (location.pathname.indexOf("/spaces") > -1) {
 	});
 
 	Mavo.all.colorSpaces.load({
-		data: {space: spaces}
+		data: {space: spaces},
 	});
 
 	Mavo.hooks.add("getdata-end", function (env) {

assets/js/index.js

@@ -12,7 +12,7 @@ let root_cs = getComputedStyle(root);
 let colors = {
 	red: new Color(root_cs.getPropertyValue("--color-red")),
 	green: new Color(root_cs.getPropertyValue("--color-green")),
-	blue: new Color(root_cs.getPropertyValue("--color-blue"))
+	blue: new Color(root_cs.getPropertyValue("--color-blue")),
 };
 
 let supportsP3 = window.CSS && CSS.supports("color", "color(display-p3 0 1 0)");
@@ -27,7 +27,7 @@ if (!Color.DEBUGGING) {
 		"gradient-steps": [
 			...Color.steps(redGreen, interpolationOptions),
 			...Color.steps(greenBlue, interpolationOptions),
-			...Color.steps(blueRed, interpolationOptions)
+			...Color.steps(blueRed, interpolationOptions),
 		],
 		"color-red-light": colors.red.clone().set({"lch.l": 80}),
 		"color-green-light": colors.green.clone().set({"lch.l": 80}),
@@ -51,7 +51,7 @@ if (!Color.DEBUGGING) {
 		textContent: `:root {
 			${Object.entries(vars).map(pair => `--${pair[0]}: ${pair[1]}`).join(";\n")};
 			--scrolltop: ${root.scrollTop};
-		}`
+		}`,
 	});
 }
 
@@ -77,7 +77,7 @@ for (let code of $$(":not(pre) > code")) {
 	if (match) {
 		$.create("a", {
 			href: `/api/#Color${match[1] === "Color" ? "." : "#"}${match[2]}`,
-			around: code
+			around: code,
 		});
 	}
 }

elements/css-color/css-color.js

@@ -91,8 +91,8 @@ export default class CSSColor extends HTMLElement {
 
 			this.dispatchEvent(new CustomEvent("colorchange", {
 				detail: {
-					color: this.#color
-				}
+					color: this.#color,
+				},
 			}));
 		}
 

notebook/color-notebook.js

@@ -57,7 +57,7 @@ export default class Notebook {
 		this.wrapper = $.create("div", {
 			className: "cn-wrapper",
 			around: this.pre,
-			contents: {className: "cn-results"}
+			contents: {className: "cn-results"},
 		});
 
 		// Create Prism Live instance if not already present
@@ -89,7 +89,7 @@ export default class Notebook {
 			<style>:root {--color-red: hsl(0 80% 50%); --color-green: hsl(90 50% 45%); --color-blue: hsl(210 80% 55%)}</style>`,
 			// sandbox: "allow-scripts allow-same-origin",
 			inside: document.body,
-			hidden: true
+			hidden: true,
 		});
 
 		this.initialized = true;
@@ -256,7 +256,7 @@ export default class Notebook {
 			if (ret instanceof win.Error) {
 				console.log(
 					"Error during statement evaluation:", ret,
-					"Statement was:", lineCode
+					"Statement was:", lineCode,
 				);
 			}
 			else {
@@ -291,7 +291,7 @@ export default class Notebook {
 							className: "variable",
 							"data-varname": name,
 							"data-line": i,
-							around: text
+							around: text,
 						});
 
 						try {
@@ -428,23 +428,23 @@ export function serialize (ret, color, win = window) {
 			className: "cn-error",
 			textContent: ret.name,
 			title: ret + ". Click to see error in the console.",
-			onclick: _ => console.error(ret)
+			onclick: _ => console.error(ret),
 		});
 	}
 
 	let template = {
 		title: "Click to see value in the console",
 		events: {
-			click: _ => console.log(ret)
-		}
+			click: _ => console.log(ret),
+		},
 	};
 
 	if (ret instanceof Color) {
 		color = ret;
 
 		element = $.create({
 			...template,
-			textContent: ret.toString({precision: 3, inGamut: false})
+			textContent: ret.toString({precision: 3, inGamut: false}),
 		});
 
 		flag = true;
@@ -461,8 +461,8 @@ export function serialize (ret, color, win = window) {
 					}
 
 					return color;
-				})
-			}
+				}),
+			},
 		});
 	}
 	else if (Array.isArray(ret)) {
@@ -484,36 +484,36 @@ export function serialize (ret, color, win = window) {
 		return $.create({
 			...template,
 			className: "cn-value cn-array",
-			contents
+			contents,
 		});
 	}
 	else if (typeof ret === "number") {
 		element = $.create({
 			...template,
 			className: "cn-number",
-			textContent: util.toPrecision(ret, 3) + ""
+			textContent: util.toPrecision(ret, 3) + "",
 		});
 	}
 	else if (typeof ret === "boolean") {
 		element = $.create({
 			...template,
 			className: "cn-boolean",
-			textContent: ret
+			textContent: ret,
 		});
 	}
 	else if (util.isString(ret)) {
 		element = $.create({
 			...template,
 			className: "cn-string",
-			textContent: `"${ret}"`
+			textContent: `"${ret}"`,
 		});
 	}
 	else if (ret && typeof ret === "object") {
 		let keys = Object.keys(ret);
 		element = $.create({
 			...template,
 			className: "cn-object",
-			textContent: `Object {${keys.slice(0, 3).join(", ") + (keys.length > 3 ? ", ..." : "")}}`
+			textContent: `Object {${keys.slice(0, 3).join(", ") + (keys.length > 3 ? ", ..." : "")}}`,
 		});
 	}
 
@@ -545,11 +545,11 @@ export function serialize (ret, color, win = window) {
 
 		$.set(element, {
 			style: {
-				"--color": color.to(outputSpace)
+				"--color": color.to(outputSpace),
 			},
 			properties: {
-				color
-			}
+				color,
+			},
 		});
 	}