display multiple suggestions when a config has an unknown feature (#1062)

Author: romainmenke

plugin-packs/postcss-preset-env/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Unreleased (patch)
 
+- Display multiple feature suggestions when an unknown feature is used in plugin options
 - Fix `env` option for plugin specific options by @BPScott
 
 ### 9.1.0

plugin-packs/postcss-preset-env/dist/index.cjs

@@ -10,38 +10,38 @@ export function pluginIdHelp(featureNamesInOptions, root, result) {
 			return;
 		}
 
-		const byId = mostSimilar(featureName, featureNames);
-		const byPackage = mostSimilar(featureName, packageNames);
+		const suggestions = [
+			...featureNames.map((x) => {
+				return [x, levenshteinDistance(featureName, x)];
+			}),
+			...packageNames.map((x) => {
+				return [packageNamesToIds[x], levenshteinDistance(featureName, x)];
+			}),
+		].sort((a, b) => {
+			return a[1] - b[1];
+		}).filter((x) => x[1] < 10);
 
-		if (Math.min(byId.distance, byPackage.distance) > 10) {
-			root.warn(result, `Unknown feature: "${featureName}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);
-			return;
-		}
+		const uniqueSuggestions = new Set();
 
-		if (byId.distance < byPackage.distance) {
-			root.warn(result, `Unknown feature: "${featureName}", did you mean: "${byId.mostSimilar}"`);
-		} else {
-			root.warn(result, `Unknown feature: "${featureName}", did you mean: "${packageNamesToIds[byPackage.mostSimilar]}"`);
-		}
-	});
-}
+		for (let i = 0; i < suggestions.length; i++) {
+			uniqueSuggestions.add(suggestions[i][0]);
 
-function mostSimilar(a, b) {
-	let mostSimilar = 'unknown';
-	let leastDistance = Infinity;
+			if (uniqueSuggestions.size >= 3) {
+				break;
+			}
+		}
 
-	for (let j = 0; j < b.length; j++) {
-		const distance = levenshteinDistance(a, b[j]);
-		if (distance < leastDistance) {
-			leastDistance = distance;
-			mostSimilar = b[j];
+		if (!uniqueSuggestions.size) {
+			root.warn(result, `Unknown feature: "${featureName}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);
+			return;
 		}
-	}
 
-	return {
-		mostSimilar: mostSimilar,
-		distance: leastDistance,
-	};
+		let formattedSuggestions = '"';
+		formattedSuggestions += Array.from(uniqueSuggestions).join('", "');
+		formattedSuggestions += '"';
+
+		root.warn(result, `Unknown feature: "${featureName}", did you mean one of: ${formattedSuggestions}`);
+	});
 }
 
 function levenshteinDistance(s, t) {