HEX
Server: Apache/2.4.52 (Ubuntu)
System: Linux spn-python 5.15.0-89-generic #99-Ubuntu SMP Mon Oct 30 20:42:41 UTC 2023 x86_64
User: arjun (1000)
PHP: 8.1.2-1ubuntu2.20
Disabled: NONE
Upload Files
File: //home/arjun/projects/buyercall/node_modules/flowbite-vue/src/utils/simplifyTailwindClasses.ts
// function to simplify tailwind classes, can be upgraded with RegExp and by minimizing of using array methods
// example:
// simplifyClasses('dark:background-red-600 background-red text-black', 'dark:background-blue')

export type TailwindClassMatcherMap = Record<string, (c: string) => string>

const classTypeMatchers: TailwindClassMatcherMap = {
  border: (_class: string): string => {
    return _class.substring(0, _class.lastIndexOf('-')) // for splitting border-b-2 and border-red
  },
}

const getTypeFromClass = (_class: string, matchers: TailwindClassMatcherMap = classTypeMatchers) => {
  const classesToMatch = Object.keys(matchers)
  const matchClass = classesToMatch.find(_matchClass => _class.includes(_matchClass)) // TODO: maybe need to filter instead of find
  if (!matchClass) return _class.substring(0, _class.indexOf('-'))

  return matchers[matchClass as keyof typeof matchers](_class)
}

export function simplifyTailwindClasses (...classes: (string | string[])[]): string {
  return classes.filter(_ => _).reduce((acc: { types: string[], classes: string[] }, value: string | string[]) => {
    const currentClasses = Array.isArray(value)
      ? Array.from(value).map(_ => _.split(' ')).flat() // to support args like ['text-white background-red', 'flex'] etc.
      : value.split(' ')
    const currentTypes = currentClasses.map(_class => getTypeFromClass(_class))

    const typesToAdd = currentTypes.filter(_ => !acc.types.includes(_))
    const typesToReplace = currentTypes.filter(_ => acc.types.includes(_))
    const newTypes = [...typesToReplace, ...typesToAdd]

    const types = [...new Set([...acc.types, ...newTypes])]
    const classes = types.map(type => {
      if (newTypes.includes(type)) {
        const classIndex = currentTypes.indexOf(type)
        if (classIndex >= 0) { return currentClasses[classIndex] || '' }
      }
      const classIndex = acc.types.indexOf(type)
      if (classIndex >= 0) { return acc.classes[classIndex] || '' }
      return ''
    }).filter(_ => !!_)

    return {
      types,
      classes,
    }
  }, { types: [], classes: [] }).classes.join(' ')
}

// simplifyClasses('dark:background-red-600 background-red text-400-black', 'dark:background-blue', 'text-600-white', 'dark:background-red-600')