Add more ESLint recommended rules, and enforce them in CI.

.eleventy.cjs

@@ -35,14 +35,14 @@ module.exports = config => {
 
 	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 content ? content.match(/^#+\s*(.+)/)?.[1] ?? "NO_HEADING_FOUND" : "EMPTY_CONTENT";
 		}
 	);
 

.github/workflows/lint.yml

@@ -0,0 +1,23 @@
+name: Lint & Test Types
+on:
+    push:
+    pull_request:
+        types: [reopened]
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.ref }}
+    cancel-in-progress: true
+
+jobs:
+    lint:
+        name: Lint & Test Types
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: "lts/*"
+
+            - run: npm install
+            - run: npm run lint:ci

apps/blackwhite/index.js

@@ -20,7 +20,7 @@ function computeTextColor () {
 		let color = div.color;
 		let onWhite = Math.abs(color.contrast("white", algo));
 		let onBlack = Math.abs(color.contrast("black", algo));
-		let textColor = onWhite > onBlack? "white" : "black";
+		let textColor = onWhite > onBlack ? "white" : "black";
 		let changed = div.style.color && textColor !== div.style.color;
 		div.style.color = textColor;
 		div.classList.toggle("changed", changed);
@@ -35,9 +35,9 @@ function drawColors () {
 	// root.style.setProperty("--granularity", granularity);
 	let increment = 1 / granularity;
 
-	for (let r=0; r<=1; r += increment) {
-		for (let g=0; g<=1; g += increment) {
-			for (let b=0; b<=1; b += increment) {
+	for (let r = 0; r <= 1; r += increment) {
+		for (let g = 0; g <= 1; g += increment) {
+			for (let b = 0; b <= 1; b += increment) {
 				let color = new Color("srgb", [r, g, b]);
 				let [l, c, h] = color.getAll("oklch");
 				l = Math.round(l * 100);

apps/blackwhite/style.postcss

@@ -44,15 +44,15 @@ main {
 	padding: .3em .5em;
 	border-radius: 1px;
 
-	@nest [data-order="l"] & {
+	[data-order="l"] & {
 		order: var(--l);
 	}
 
-	@nest [data-order="c"] & {
+	[data-order="c"] & {
 		order: var(--c);
 	}
 
-	@nest [data-order="h"] & {
+	[data-order="h"] & {
 		order: var(--h);
 	}
 }
@@ -69,4 +69,4 @@ main {
 
 #current_algo:empty::before {
 	content: "current algorithm";
-}
+}

apps/convert/convert.js

@@ -25,7 +25,7 @@ function update () {
 
 		let title = newParams[0][1] + " convert";
 		let query = newParams.map(pair => `${pair[0]}=${encodeURIComponent(pair[1])}`).join("&");
-		history[(changed? "push" : "replace") + "State"](null, title, "?" + query);
+		history[(changed ? "push" : "replace") + "State"](null, title, "?" + query);
 		document.title = title;
 	}
 	catch (e) {
@@ -66,11 +66,11 @@ function update () {
 				<th>${space.name}</th>
 				<td>${converted.coords.join(", ")}</td>
 				<td>
-					<div class="serialization ${inGamut || str === str_mapped? "in-gamut" : "out-of-gamut"} ${!inGamut && str === str_mapped? "gamut-mapped" : ""}">
-						<a href="${permalink}" ${!inGamut? 'title="Out of gamut"' : ""}>${str}</a>
+					<div class="serialization ${inGamut || str === str_mapped ? "in-gamut" : "out-of-gamut"} ${!inGamut && str === str_mapped ? "gamut-mapped" : ""}">
+						<a href="${permalink}" ${!inGamut ? 'title="Out of gamut"' : ""}>${str}</a>
 						<button class="copy" data-clipboard-text="${str}" title="Copy">📋</button>
 					</div>
-					${str !== str_mapped? `
+					${str !== str_mapped ? `
 					<div class="serialization gamut-mapped">
 						<a href="${permalink_mapped}">${str_mapped}</a>
 						<button class="copy" data-clipboard-text="${str_mapped}" title="Copy">📋</button>

apps/named/index.js

@@ -6,7 +6,7 @@ const L_CUTOFF = .65;
 for (let method in Color.prototype) {
 	if (method.startsWith("deltaE")) {
 		method = method.slice(6);
-		let selected = method === "OK"? " selected" : "";
+		let selected = method === "OK" ? " selected" : "";
 		deltaE_method.insertAdjacentHTML("beforeend", `<option${selected}>${method}</option>`);
 	}
 }
@@ -50,7 +50,7 @@ function render () {
 		let deltaE = result.deltaE;
 
 		closest_colors.insertAdjacentHTML("beforeend", `
-		<article class="keyword-color ${keywordColor.oklch.l > L_CUTOFF? "light-color" : "dark-color"}" style="--color: ${keywordColor}">
+		<article class="keyword-color ${keywordColor.oklch.l > L_CUTOFF ? "light-color" : "dark-color"}" style="--color: ${keywordColor}">
 			<code class="keyword">${keyword}</code>
 			<code class="delta-e">${deltaE.toFixed(2)}</code>
 		</article>

apps/palette/index.js

@@ -20,7 +20,7 @@ function render () {
 	palette.insertAdjacentHTML("beforeend", `<div class="swatch" style="--color: ${color.display()}"></div>`);
 	palette2.insertAdjacentHTML("beforeend", `<div class="swatch" style="--color: ${color.display()}"></div>`);
 
-	for (let i=0; i<n; i++) {
+	for (let i = 0; i < n; i++) {
 		let equidistant = color.clone().set("h", h => h + (i + 1) * increment).display();
 		palette.insertAdjacentHTML("beforeend", `<div class="swatch" style="--color: ${equidistant}"></div>`);
 

apps/picker-mavo/index.js

@@ -91,7 +91,7 @@ window.getSliderSteps = function (spaceId, coords, coord_meta, alpha) {
 
 	let ret = [];
 
-	for (let i=0; i<coord_meta.length; i++) {
+	for (let i = 0; i < coord_meta.length; i++) {
 		let {isHue, min, max} = coord_meta[i];
 
 		let start = coords.slice();

apps/picker/index.js

@@ -82,7 +82,7 @@ let app = createApp({
 
 			let ret = [];
 
-			for (let i=0; i<this.coord_meta.length; i++) {
+			for (let i = 0; i < this.coord_meta.length; i++) {
 				let {range, isHue, min, max} = coord_meta[i];
 
 				let start = coords.slice();

assets/js/index.js

@@ -16,7 +16,7 @@ let colors = {
 };
 
 let supportsP3 = window.CSS && CSS.supports("color", "color(display-p3 0 1 0)");
-let interpolationOptions = {steps: 5, space: "lch", outputSpace: supportsP3? "p3" : "hsl"};
+let interpolationOptions = {steps: 5, space: "lch", outputSpace: supportsP3 ? "p3" : "hsl"};
 
 if (!Color.DEBUGGING) {
 	let redGreen = colors.red.range(colors.green, interpolationOptions);
@@ -76,7 +76,7 @@ for (let code of $$(":not(pre) > code")) {
 
 	if (match) {
 		$.create("a", {
-			href: `/api/#Color${match[1] === "Color"? "." : "#"}${match[2]}`,
+			href: `/api/#Color${match[1] === "Color" ? "." : "#"}${match[2]}`,
 			around: code
 		});
 	}

babel.config.json

@@ -5,7 +5,7 @@
 			{
 				"targets": "defaults, node >= 12",
 				"useBuiltIns": "usage",
-				"corejs": "3.25"
+				"corejs": "3.30"
 			}
 		]
 	]

notebook/color-notebook.js

@@ -11,7 +11,7 @@ import * as acornWalk from "https://cdn.jsdelivr.net/npm/acorn-walk/dist/walk.mj
 import {generate} from "https://cdn.jsdelivr.net/npm/astring@1.7.4/dist/astring.mjs";
 
 const supportsP3 = window.CSS && CSS.supports("color", "color(display-p3 0 1 0)");
-const outputSpace = supportsP3? "p3" : "srgb";
+const outputSpace = supportsP3 ? "p3" : "srgb";
 const codes = new WeakMap();
 
 const acornOptions = {ecmaVersion: "2020", sourceType: "module"};
@@ -236,7 +236,7 @@ export default class Notebook {
 			await $.when(win, "load");
 		}
 
-		for (let i=0; i<statements.length; i++) {
+		for (let i = 0; i < statements.length; i++) {
 			let statement = statements[i];
 			let originalStatement = ast.body[i];
 			let lineCode = generate(statement);
@@ -269,7 +269,7 @@ export default class Notebook {
 					let {name, start, end} = node;
 
 					// Wrap variable
-					let text = getNodeAt((start + end)/2, pre);
+					let text = getNodeAt((start + end) / 2, pre);
 					let value = env[name];
 
 					if (value && typeof value === "object" && ("coords" in value)) {
@@ -513,7 +513,7 @@ export function serialize (ret, color, win = window) {
 		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 ? ", ..." : "")}}`
 		});
 	}
 
@@ -557,7 +557,7 @@ export function serialize (ret, color, win = window) {
 }
 
 function lightOrDark (color) {
-	return color.luminance > .5 || color.alpha < .5? "light" : "dark";
+	return color.luminance > .5 || color.alpha < .5 ? "light" : "dark";
 }
 
 Notebook.all = new Set();