refactor: joiner ❤️

Author: francoismassart

src/rules/classnames-order.ts

@@ -8,6 +8,7 @@ import { RuleCreator } from "@typescript-eslint/utils/eslint-utils";
 import { RuleContext as TSESLintRuleContext } from "@typescript-eslint/utils/ts-eslint";
 
 import urlCreator from "../url-creator";
+import { joiner } from "../utils/joiner";
 import {
   parsePluginSettings,
   PluginSettings,
@@ -42,30 +43,6 @@ type RuleContext = TSESLintRuleContext<MessageIds, Options>;
 // The parameter passed into RuleCreator is a URL generator function.
 export const createRule = RuleCreator(urlCreator);
 
-const joinSortedClassnames = (
-  classNames: Array<string>,
-  whitespaces: Array<string>,
-  headSpace: boolean,
-  tailSpace: boolean,
-) => {
-  // Make a copy of whitespaces because we don't want to mutate the original array
-  // (Remember that ESLint runs several times and we don't want to mess up the whitespaces for the next runs)
-  const spaces = [...whitespaces];
-
-  const head = headSpace ? spaces.shift() : "";
-  const tail = tailSpace ? spaces.pop() : "";
-
-  const validatedClasses: Array<string> = [];
-  for (const [index, className] of classNames.entries()) {
-    const spacer =
-      validatedClasses.length === 0 ? "" : (spaces[index - 1] ?? " ");
-    validatedClasses.push(spacer + className);
-  }
-
-  if (validatedClasses.length === 0) return "";
-  return head + validatedClasses.join("") + tail;
-};
-
 const sortClassnames = (
   context: RuleContext,
   settings: PluginSettings,
@@ -87,12 +64,12 @@ const sortClassnames = (
     );
 
     // Generates the validated/sorted attribute value
-    let validatedClassNamesValue = joinSortedClassnames(
-      orderedClassNames,
+    let validatedClassNamesValue = joiner({
+      classNames: orderedClassNames,
       whitespaces,
       headSpace,
       tailSpace,
-    );
+    });
 
     if (originalClassNamesValue !== validatedClassNamesValue) {
       validatedClassNamesValue = prefix + validatedClassNamesValue + suffix;

src/rules/no-contradicting-classname.ts

@@ -9,6 +9,7 @@ import { RuleContext as TSESLintRuleContext } from "@typescript-eslint/utils/ts-
 
 import urlCreator from "../url-creator";
 import { getPropertiesFromCssRule } from "../utils/get-properties-from-css-rule";
+import { joiner } from "../utils/joiner";
 import { mapGetKeyFromSetValues } from "../utils/map";
 import {
   parsePluginSettings,
@@ -83,32 +84,6 @@ const getCommonProperties = (groupMembers: Map<string, Set<string>>) => {
   return commonProperties;
 };
 
-const removeContradictions = (
-  targets: Array<string>,
-  classNames: Array<string>,
-  whitespaces: Array<string>,
-  headSpace: boolean,
-  tailSpace: boolean,
-) => {
-  // Make a copy of whitespaces because we don't want to mutate the original array
-  // (Remember that ESLint runs several times and we don't want to mess up the whitespaces for the next runs)
-  const spaces = [...whitespaces];
-
-  const head = headSpace ? spaces.shift() : "";
-  const tail = tailSpace ? spaces.pop() : "";
-
-  const validatedClasses: Array<string> = [];
-  for (const [index, className] of classNames.entries()) {
-    if (!targets.includes(className)) {
-      const spacer =
-        validatedClasses.length === 0 ? "" : (spaces[index - 1] ?? " ");
-      validatedClasses.push(spacer + className);
-    }
-  }
-  if (validatedClasses.length === 0) return "";
-  return head + validatedClasses.join("") + tail;
-};
-
 const getContradictions = (
   context: RuleContext,
   settings: PluginSettings,
@@ -164,13 +139,13 @@ const getContradictions = (
         const otherClassnamesFormatted = otherClassnames
           .map((cn) => `'${cn}'`)
           .join(", ");
-        let patchedValue = removeContradictions(
-          otherClassnames,
+        let patchedValue = joiner({
           classNames,
           whitespaces,
           headSpace,
           tailSpace,
-        );
+          validator: (cls) => !otherClassnames.includes(cls),
+        });
         patchedValue = prefix + patchedValue + suffix;
         const patchedLoc = generateLocForClassname(
           node,
@@ -221,7 +196,6 @@ export const noContradictingClassname = createRule<Options, MessageIds>({
       "issue:contradiction": `'{{classname}}' conflicts with {{otherClassnames}}.`,
       "fix:contradiction:keep": `Keep '{{keepClassname}}' (remove {{removeClassnames}}).`,
     },
-    // fixable: "code",
     // Schema is also parsed by `eslint-doc-generator`
     schema: [
       {

src/rules/no-custom-classname.ts

@@ -7,6 +7,7 @@ import { RuleCreator } from "@typescript-eslint/utils/eslint-utils";
 import { RuleContext as TSESLintRuleContext } from "@typescript-eslint/utils/ts-eslint";
 
 import urlCreator from "../url-creator";
+import { joiner } from "../utils/joiner";
 import {
   parsePluginSettings,
   PluginSettings,
@@ -52,33 +53,6 @@ const isWhitelisted = (className: string, whitelist: Set<string>): boolean => {
   return [...whitelist].some((pattern) => passRegexTest(pattern, className));
 };
 
-const removeClassname = (
-  invalidClassName: string,
-  classNames: Array<string>,
-  whitespaces: Array<string>,
-  headSpace: boolean,
-  tailSpace: boolean,
-) => {
-  // Make a copy of whitespaces because we don't want to mutate the original array
-  // (Remember that ESLint runs several times and we don't want to mess up the whitespaces for the next runs)
-  const spaces = [...whitespaces];
-
-  const head = headSpace ? spaces.shift() : "";
-  const tail = tailSpace ? spaces.pop() : "";
-
-  const validatedClasses: Array<string> = [];
-  for (const [index, className] of classNames.entries()) {
-    if (className !== invalidClassName) {
-      const spacer =
-        validatedClasses.length === 0 ? "" : (spaces[index - 1] ?? " ");
-      validatedClasses.push(spacer + className);
-    }
-  }
-
-  if (validatedClasses.length === 0) return "";
-  return head + validatedClasses.join("") + tail;
-};
-
 const detectCustomClassnames = (
   context: RuleContext,
   settings: PluginSettings,
@@ -99,25 +73,25 @@ const detectCustomClassnames = (
     // Process the extracted classnames and report
     const { classNames, whitespaces, headSpace, tailSpace } =
       getClassnamesFromValue(originalClassNamesValue);
-    for (const cls of classNames) {
-      if (isWhitelisted(cls, mergedWhitelist)) continue;
-      if (isValidClassNameWorker(settings.cssConfigPath, cls)) continue;
+    for (const customClass of classNames) {
+      if (isWhitelisted(customClass, mergedWhitelist)) continue;
+      if (isValidClassNameWorker(settings.cssConfigPath, customClass)) continue;
 
       // Generates the "cleaned" attribute value
-      let patchedValue = removeClassname(
-        cls,
+      let patchedValue = joiner({
         classNames,
         whitespaces,
         headSpace,
         tailSpace,
-      );
+        validator: (candidate) => candidate !== customClass,
+      });
       const patchedLoc = generateLocForClassname(
         node,
-        cls,
+        customClass,
         originalClassNamesValue,
         genericContext,
       );
-      const range = getRange(node, cls, originalClassNamesValue);
+      const range = getRange(node, customClass, originalClassNamesValue);
       patchedValue = prefix + patchedValue + suffix;
 
       if (originalClassNamesValue === patchedValue) {
@@ -127,15 +101,15 @@ const detectCustomClassnames = (
         loc: patchedLoc,
         messageId: "issue:unknown-classname",
         data: {
-          classname: cls,
+          classname: customClass,
         },
         suggest:
           range[0] && range[1]
             ? [
                 {
                   messageId: "fix:unknown-classname:remove",
                   data: {
-                    classname: cls,
+                    classname: customClass,
                   },
                   fix: (fixer) =>
                     fixer.replaceTextRange([start, end], patchedValue),

src/utils/joiner.spec.ts

@@ -0,0 +1,49 @@
+import { expect, test } from "vitest";
+
+import { joiner } from "./joiner";
+
+test(`joiner() with head and tail spaces`, () => {
+  const classNames = ["a", "x", "b"];
+  const whitespaces = ["\n ", "  ", "   ", "\n    "];
+  expect(
+    joiner({
+      classNames,
+      whitespaces,
+      headSpace: true,
+      tailSpace: true,
+    }),
+  ).toBe("\n a  x   b\n    ");
+
+  expect(
+    joiner({
+      classNames,
+      whitespaces,
+      headSpace: true,
+      tailSpace: true,
+      validator: (cls) => cls !== "x",
+    }),
+  ).toBe("\n a   b\n    ");
+});
+
+test(`joiner() without head nor tail spaces`, () => {
+  const classNames = ["a", "x", "b"];
+  const whitespaces = [" ", "  "];
+  expect(
+    joiner({
+      classNames,
+      whitespaces,
+      headSpace: false,
+      tailSpace: false,
+    }),
+  ).toBe("a x  b");
+
+  expect(
+    joiner({
+      classNames,
+      whitespaces,
+      headSpace: false,
+      tailSpace: false,
+      validator: (cls) => cls !== "x",
+    }),
+  ).toBe("a  b");
+});

src/utils/joiner.ts

@@ -0,0 +1,35 @@
+type JoinerOptions = {
+  classNames: Array<string>;
+  whitespaces: Array<string>;
+  headSpace: boolean;
+  tailSpace: boolean;
+  validator?: (candidate: string) => boolean;
+};
+/**
+ * Helper function to join classnames with whitespaces, and preserve head/tail spaces if needed.
+ */
+export const joiner = ({
+  classNames,
+  whitespaces,
+  headSpace,
+  tailSpace,
+  validator = () => true,
+}: JoinerOptions) => {
+  // Make a copy of whitespaces because we don't want to mutate the original array
+  // (Remember that ESLint runs several times and we don't want to mess up the whitespaces for the next runs)
+  const spaces = [...whitespaces];
+
+  const head = headSpace ? spaces.shift() : "";
+  const tail = tailSpace ? spaces.pop() : "";
+
+  const validatedClasses: Array<string> = [];
+  for (const [index, className] of classNames.entries()) {
+    if (!validator(className)) continue;
+    const spacer =
+      validatedClasses.length === 0 ? "" : (spaces[index - 1] ?? " ");
+    validatedClasses.push(spacer + className);
+  }
+
+  if (validatedClasses.length === 0) return "";
+  return head + validatedClasses.join("") + tail;
+};