fix: make new strict custom validators for tailwind merge plugin

Author: craxrev

packages/utopia-tailwind-merge/src/index.ts

@@ -1,17 +1,62 @@
 import { mergeConfigs, validators, type Config } from "tailwind-merge";
 
+import {
+  isArbitrarySpace,
+  isArbitraryStep,
+  isSpace,
+  isStep,
+} from "./validators";
+
+type ArrayElement<ArrayType extends readonly unknown[]> =
+  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
 export function withUtopia(config: Config<string, string>) {
+  type ClassGroupKeys = keyof typeof config.classGroups;
+  type ClassGroup = (typeof config.classGroups)[ClassGroupKeys];
+  type ClassDefinition = ArrayElement<ClassGroup>;
+  interface ThemeGetter {
+    (theme: (typeof config)["theme"]): ClassGroup;
+    isThemeGetter: true;
+  }
+
+  const isThemeGetter = (def: ClassDefinition): def is ThemeGetter =>
+    typeof def === "function" && "isThemeGetter" in def && def.isThemeGetter;
+
+  const resolveThemeGetters = (
+    group: ClassGroup,
+  ): Exclude<ClassDefinition, ThemeGetter>[] =>
+    group.flatMap((def) =>
+      isThemeGetter(def) ? resolveThemeGetters(def(config.theme)) : [def],
+    );
+
   const classGroups = Object.entries(config.classGroups)
     .filter(
       ([_name, group]) => group.length !== 0 && typeof group[0] !== "string",
     )
+    .filter(([_name, group]) => {
+      const classGroup = Object.values(group[0])[0] as ClassGroup;
+
+      const resolvedClassGroup = resolveThemeGetters(classGroup);
+
+      return resolvedClassGroup.some(
+        (def) =>
+          def === validators.isLength || def === validators.isArbitraryLength,
+      );
+    })
     .reduce((acc, [name, group]) => {
       const groupName = Object.keys(group[0])[0];
-      const def = [validators.isAny];
+
+      const classGroup =
+        groupName === "text"
+          ? [{ [`~${groupName}`]: [isStep, isArbitraryStep] }]
+          : [
+              { [`~${groupName}`]: [isSpace, isArbitrarySpace] },
+              { [`~-${groupName}`]: [isSpace, isArbitrarySpace] },
+            ];
 
       return {
         ...acc,
-        [name]: [{ [`~${groupName}`]: def }, { [`~-${groupName}`]: def }],
+        [name]: classGroup,
       };
     }, {});
 

packages/utopia-tailwind-merge/src/validators.ts

@@ -0,0 +1,54 @@
+import { validators } from "tailwind-merge";
+
+const tshirtUnitRegex = /^(\d*xs|xs|s|m|l|xl|\d*xl)$/;
+
+function isRange(value: string) {
+  if (!value.startsWith("[") || !value.endsWith("]")) return false;
+
+  value = value.slice(1, -1);
+
+  const parts = value.split("/");
+
+  if (parts.length < 1 || parts.length > 2) return false;
+
+  if (parts.length === 1) {
+    return validators.isNumber(parts[0]);
+  } else if (parts.length === 2) {
+    const [a, b] = parts;
+
+    return (
+      (a === "" || validators.isNumber(a)) &&
+      (b === "" || validators.isNumber(b))
+    );
+  }
+
+  return false;
+}
+
+function isStep(value: string) {
+  return (
+    value === "1" ||
+    (value !== "x0" &&
+      value.startsWith("x") &&
+      validators.isNumber(value.slice(1)))
+  );
+}
+
+function isArbitraryStep(value: string) {
+  return (
+    (value.startsWith("[x") &&
+      value.endsWith("]") &&
+      validators.isNumber(value.slice(2, -1))) ||
+    isRange(value)
+  );
+}
+
+function isSpace(value: string) {
+  return tshirtUnitRegex.test(value);
+}
+
+function isArbitrarySpace(value: string) {
+  return isRange(value);
+}
+
+export { isStep, isArbitraryStep, isSpace, isArbitrarySpace };