[style] Use Prettier (#626)

* [style] Use Prettier and format src/

* [style] Apply Prettier to remaining files

* [style] Preserve matrix formatting in cat-mat script

* [style] Run Prettier without ESLint fix

* [style] Use Stroustrup braces with Prettier

* [style] Use prettier-plugin-space-before-function-paren

* [style] Use prettier-plugin-merge

* [style] Upgraade prettier-plugin-space-before-function-paren

* [style] Run Prettier on missed files

* [style] Manually add spacing to broken area

* [style] Remove ESLint bracket spacing rule

* [style] Remove ESLint stylistic

.eslintrc.cjs

@@ -11,7 +11,7 @@ module.exports = {
 		"browser": true,
 		"es2020": true,
 	},
-	"plugins": ["@typescript-eslint", "@stylistic"],
+	"plugins": ["@typescript-eslint"],
 	"rules": {
 		/**
 		 * ESLint rules: https://eslint.org/docs/latest/rules/
@@ -180,69 +180,6 @@ module.exports = {
 		// https://eslint.org/docs/latest/rules/valid-typeof
 		"valid-typeof": 1,
 
-		/**
-		 * ESLint Stylistic rules: https://eslint.style/packages/default#rules
-		 */
-		// Enforce a space before and after `=>` in arrow functions
-		// https://eslint.style/rules/default/arrow-spacing
-		"@stylistic/arrow-spacing": 1,
-		// 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,
-		// Require newline at the end of files
-		// https://eslint.style/rules/default/eol-last
-		"@stylistic/eol-last": 1,
-		// Enforce consistent indentation
-		// https://eslint.style/rules/default/indent
-		"@stylistic/indent": [1, "tab", { "SwitchCase": 1, "outerIIFEBody": 0 }],
-		// Enforce consistent spacing before and after keywords
-		// https://eslint.style/rules/default/keyword-spacing
-		"@stylistic/keyword-spacing": 1,
-		// Disallow unnecessary semicolons
-		// https://eslint.style/rules/default/no-extra-semi
-		"@stylistic/no-extra-semi": 1,
-		// Disallow mixed spaces and tabs for indentation
-		// https://eslint.style/rules/default/no-mixed-spaces-and-tabs
-		"@stylistic/no-mixed-spaces-and-tabs": [1, "smart-tabs"],
-		// Disallow trailing whitespace at the end of lines
-		// https://eslint.style/rules/default/no-trailing-spaces
-		"@stylistic/no-trailing-spaces": 1,
-		// Enforce the consistent use of double quotes
-		// https://eslint.style/rules/default/quotes
-		"@stylistic/quotes": [
-			1,
-			"double",
-			{ "avoidEscape": true, "allowTemplateLiterals": true },
-		],
-		// Require semicolons instead of ASI
-		// https://eslint.style/rules/default/semi
-		"@stylistic/semi": 1,
-		// Enforce at least one space before blocks
-		// https://eslint.style/rules/default/space-before-blocks
-		"@stylistic/space-before-blocks": 1,
-		// Enforce a space before `function` definition opening parenthesis
-		// https://eslint.style/rules/default/space-before-function-paren
-		"@stylistic/space-before-function-paren": 1,
-		// Require spaces around infix operators (e.g. `+`, `=`, `?`, `:`)
-		// https://eslint.style/rules/default/space-infix-ops
-		"@stylistic/space-infix-ops": 1,
-		// Enforce a space after unary word operators (`new`, `delete`, `typeof`, `void`, `yield`)
-		// https://eslint.style/rules/default/space-unary-ops
-		"@stylistic/space-unary-ops": 1,
-		// Enforce whitespace after the `//` or `/*` in a comment
-		// https://eslint.style/rules/default/spaced-comment
-		"@stylistic/spaced-comment": [
-			1,
-			"always",
-			{ "block": { "exceptions": ["*"] } },
-		],
-
 		/**
 		 * typescript-eslint rules: https://typescript-eslint.io/rules/
 		 * Based off of: https://github.com/typescript-eslint/typescript-eslint/blob/v6.13.1/packages/eslint-plugin/src/configs/recommended.ts
@@ -252,13 +189,9 @@ module.exports = {
 		"@typescript-eslint/ban-ts-comment": 1,
 		// Disallow certain built-in types
 		// https://typescript-eslint.io/rules/ban-types
-		"@typescript-eslint/ban-types": [
-			1,
-			{
-				extendDefaults: true,
-				types: { "{}": false },
-			},
-		],
+		"@typescript-eslint/no-empty-object-type": 0,
+		"@typescript-eslint/no-unsafe-function-type": 1,
+		"@typescript-eslint/no-wrapper-object-types": 1,
 		// Disallow generic `Array` constructors
 		// https://typescript-eslint.io/rules/no-array-constructor
 		"@typescript-eslint/no-array-constructor": 1,

.prettierignore

@@ -0,0 +1,12 @@
+!.*
+assets/js/prism.js
+api/
+/dist/
+docs/
+types/src/
+node_modules/
+
+# Contains custom spacing around re-exports
+src/index-fn.js
+# Contains JS object with explicit quotes around keys, eg. { "constructor-super": 1 }
+.eslintrc.cjs

.prettierrc.json

@@ -0,0 +1,17 @@
+{
+	"plugins": [
+		"prettier-plugin-brace-style",
+		"prettier-plugin-space-before-function-paren",
+		"prettier-plugin-merge"
+	],
+	"braceStyle": "stroustrup",
+	"arrowParens": "avoid",
+	"bracketSpacing": true,
+	"endOfLine": "auto",
+	"semi": true,
+	"singleQuote": false,
+	"tabWidth": 4,
+	"useTabs": true,
+	"trailingComma": "all",
+	"printWidth": 100
+}

_build/eleventy.js

@@ -5,8 +5,8 @@ import * as filters from "./filters.js";
 
 export default config => {
 	let data = {
-		"layout": "page.njk",
-		"permalink": "{{ page.filePathStem }}.html",
+		layout: "page.njk",
+		permalink: "{{ page.filePathStem }}.html",
 	};
 
 	for (let p in data) {

_build/filters.js

@@ -20,5 +20,5 @@ export function randomNumber (max, min, step) {
 	// Round to nearest power of 10
 	step = Math.pow(10, Math.floor(Math.log10(step)));
 
-	return Math.floor(Math.random() * (max - min + step) / step) * step + min;
+	return Math.floor((Math.random() * (max - min + step)) / step) * step + min;
 }

_build/rollup.config.js

@@ -2,40 +2,40 @@ import terser from "@rollup/plugin-terser";
 
 const bundles = [
 	{
-		"file": "dist/color.global.js",
-		"format": "iife",
-		"sourcemap": true,
-		"name": "Color",
+		file: "dist/color.global.js",
+		format: "iife",
+		sourcemap: true,
+		name: "Color",
 	},
 	{
-		"file": "dist/color.js",
-		"format": "esm",
-		"sourcemap": true,
+		file: "dist/color.js",
+		format: "esm",
+		sourcemap: true,
 	},
 	{
-		"file": "dist/color.cjs",
-		"format": "cjs",
-		"sourcemap": true,
-		"exports": "named",
+		file: "dist/color.cjs",
+		format: "cjs",
+		sourcemap: true,
+		exports: "named",
 	},
 ];
 
 const fnBundles = [
 	{
-		"file": "dist/color-fn.cjs",
-		"format": "cjs",
-		"sourcemap": true,
-		"exports": "named",
+		file: "dist/color-fn.cjs",
+		format: "cjs",
+		sourcemap: true,
+		exports: "named",
 	},
 	{
-		"file": "dist/color-fn.js",
-		"format": "esm",
-		"sourcemap": true,
+		file: "dist/color-fn.js",
+		format: "esm",
+		sourcemap: true,
 	},
 ];
 
 // Add minified versions of every bundle
-const addMinBundle = (bundles) => {
+const addMinBundle = bundles => {
 	return bundles.flatMap(bundle => {
 		const minBundle = Object.assign({}, bundle);
 		minBundle.file = minBundle.file.replace(/\.\w+$/, ".min$&");

_build/rollup.legacy.config.js

@@ -17,5 +17,4 @@ export default defaultConfig.map(config =>
 			file: bundle.file.replace(/\.(?:min\.)?\w+$/, ".legacy$&"),
 		})),
 		plugins: [...(config.plugins || []), ...legacyPlugins],
-	}),
-);
+	}));

assets/js/colors.js

@@ -8,7 +8,7 @@ let colors = {
 	blue: new Color(root_cs.getPropertyValue("--color-blue")),
 };
 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);
@@ -21,29 +21,33 @@ if (!Color.DEBUGGING) {
 			...Color.steps(greenBlue, 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}),
-		"color-blue-light": colors.blue.clone().set({"lch.l": 80}),
+		"color-red-light": colors.red.clone().set({ "lch.l": 80 }),
+		"color-green-light": colors.green.clone().set({ "lch.l": 80 }),
+		"color-blue-light": colors.blue.clone().set({ "lch.l": 80 }),
 
-		"color-red-lighter": colors.red.clone().set({"lch.l": 94}),
-		"color-green-lighter": colors.green.clone().set({"lch.l": 95}),
-		"color-blue-lighter": colors.blue.clone().set({"lch.l": 94}),
+		"color-red-lighter": colors.red.clone().set({ "lch.l": 94 }),
+		"color-green-lighter": colors.green.clone().set({ "lch.l": 95 }),
+		"color-blue-lighter": colors.blue.clone().set({ "lch.l": 94 }),
 
-		"color-red-green": redGreen(.5),
-		"color-green-blue": greenBlue(.5),
-		"color-blue-red": blueRed(.5),
+		"color-red-green": redGreen(0.5),
+		"color-green-blue": greenBlue(0.5),
+		"color-blue-red": blueRed(0.5),
 
-		"color-red-green-light": redGreen(.5).set({"lch.l": 94}),
-		"color-green-blue-light": greenBlue(.5).set({"lch.l": 94}),
-		"color-blue-red-light": blueRed(.5).set({"lch.l": 94}),
+		"color-red-green-light": redGreen(0.5).set({ "lch.l": 94 }),
+		"color-green-blue-light": greenBlue(0.5).set({ "lch.l": 94 }),
+		"color-blue-red-light": blueRed(0.5).set({ "lch.l": 94 }),
 	};
 
 	window.vars = vars;
 
-	document.head.insertAdjacentHTML("beforeend",
+	document.head.insertAdjacentHTML(
+		"beforeend",
 		`<style>
 			:root {
-				${Object.entries(vars).map(pair => `--${pair[0]}: ${pair[1]}`).join(";")};
+				${Object.entries(vars)
+					.map(pair => `--${pair[0]}: ${pair[1]}`)
+					.join(";")};
 			}
-		</style>`);
+		</style>`,
+	);
 }

assets/js/docs.js

@@ -43,9 +43,11 @@ if (current) {
 function idify (str) {
 	// from Mavo.Functions.idify()
 	return str
-		.normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Convert accented letters to ASCII
+		.normalize("NFD")
+		.replace(/[\u0300-\u036f]/g, "") // Convert accented letters to ASCII
 		.replace(/[^\w\s-]/g, "") // Remove remaining non-ASCII characters
-		.trim().replace(/\s+/g, "-") // Convert whitespace to hyphens
+		.trim()
+		.replace(/\s+/g, "-") // Convert whitespace to hyphens
 		.toLowerCase();
 }
 

assets/js/enhance.js

@@ -6,7 +6,10 @@ export function styleCallouts (
 	labels = new RegExp(`(${labels.join("|")}):`);
 
 	for (let p of elements) {
-		let callout = p.textContent.trimLeft().slice(0, maxLabelLength + 2).match(labels)?.[1];
+		let callout = p.textContent
+			.trimLeft()
+			.slice(0, maxLabelLength + 2)
+			.match(labels)?.[1];
 
 		if (callout) {
 			p.classList.add(callout.toLowerCase());

assets/js/index.js

@@ -10,4 +10,3 @@ if (location.pathname.indexOf("/docs/") > -1 && window.toc) {
 }
 
 styleCallouts();
-

color.js

@@ -7,4 +7,4 @@ window.Color = window.Color || Color;
 
 // Re-export
 export default Color;
-export {util};
+export { util };

data/spaces.js

@@ -1,5 +1,5 @@
 import ColorSpace from "../src/spaces/index.js";
-import {WHITES} from "../src/adapt.js";
+import { WHITES } from "../src/adapt.js";
 
 let whitePoints = Object.entries(WHITES);
 
@@ -24,12 +24,12 @@ modules.space = Object.fromEntries(modules.space.map(meta => [meta.id, meta]));
 
 for (let id in ColorSpace.registry) {
 	let space = ColorSpace.registry[id];
-	let meta = spaces[id] = Object.assign(modules.space[id] ?? {}, {
+	let meta = (spaces[id] = Object.assign(modules.space[id] ?? {}, {
 		name: space.name,
 		white: whitePoints.find(([name, white]) => white === space.white)?.[0] ?? "D65",
 		base: space.base,
 		coords: space.coords,
-	});
+	}));
 
 	if (space.id != id) {
 		meta.aliasOf = ColorSpace.registry[space.id].name;

get/index.js

@@ -13,7 +13,7 @@ $("a[download]")?.addEventListener("click", evt => {
 });
 
 function createURL (code, type = "text/javascript") {
-	var blob = new Blob([code], {type});
+	var blob = new Blob([code], { type });
 
 	return URL.createObjectURL(blob);
 }