tw-merge/src/lib/utils.ts

Merge CSS utility classes without style conflicts - small and zero config

export function isNumericValue(value?: string) {
  if (!value) return true;
  const arbitraryValue = value.match(/^\[(.*)\]$/)?.[1];
  return !isNaN(parseInt(arbitraryValue ?? value));
}

function sortContextSection(section: string[], separator: string) {
  return section
    .sort((a, b) => {
      if (a.startsWith("[") || b.startsWith("[")) return 0;
      return a.localeCompare(b);
    })
    .join(separator);
}

export function normalizeContext(context: string, separator: string) {
  if (!context) return context;
  const important = context.endsWith("!");
  const variants = context.replace(/:!?$/, "").split(separator);
  let section: string[] = [];
  let normalizedSections: string[] = [];
  function commitSection() {
    if (section.length > 0)
      normalizedSections.push(sortContextSection(section, separator));
  }
  for (let i = 0; i < variants.length; i++) {
    const variant = variants[i]!;
    if (variant.startsWith("[")) {
      // is arbitrary variant
      commitSection();
      normalizedSections.push(variant);
      section = [];
    } else section.push(variant);
  }
  commitSection();

  return `${normalizedSections.join(separator)}${separator}${
    important ? "!" : ""
  }`;
}