[Prettier Plugin] Support for CVA arrays

[tobeyboe]

I know it supports CVA strings with the "tailwindFunctions": ["cva"], but as far as I can see CVA often uses arrays when organising their classes. https://cva.style/docs/getting-started/variants

Using arrays for this really helps the readability when using tailwind, imo.

Is there any chance for this plugin to sort, remove duplicates and give conflict error for Array elements itself, the same way as it does for "string"?

Example:

const alertVariants = cva(
  [
    "flex",
    "bg-red-200",
    "w-full",
    "rounded-lg",
    "flex border",
    "flex",
    "bg-green-200 bg-slate-100", //'bg-slate-100' applies the same CSS properties as 'bg-green-200'
  ],

This should then reorder array, give warnings on bg-colors (including red, not just inside same string) and remove duplicate flex.

Does anyone else use CVA arrays that have a solution?, without converting all back to strings.

[AlexanderOpran]

@tobeyboe Any luck with this?

[Yofamb]

I've got it working, but unsure of the process of creating a PR for the plugin, we also need eslint to be able to pick up duplicate classnames in an array too (but i guess thats a diff plugin)

I got LLMs to help me modify transformJavaScript in the plugins index file, adding an additional else if statement.

      } else if (node.type === 'ArrayExpression') {
        // Process array elements that are string literals
        const stringElements = node.elements.filter((el: any) => {
          if (!el) return false

          // Check for StringLiteral type
          if (el.type === 'StringLiteral') {
            return true
          }

          // Check for Literal type with string value
          if (el.type === 'Literal' && typeof el.value === 'string') {
            return true
          }

          return false
        })

        if (stringElements.length > 0) {
          // Extract the class names
          const classNames = stringElements
            .map((el: any) => {
              if (el.type === 'StringLiteral') {
                return el.value
              } else if (
                el.type === 'Literal' &&
                typeof el.value === 'string'
              ) {
                return el.value
              }
              return ''
            })
            .filter(Boolean)

          // Sort the class names
          const { classList: sortedClasses } = sortClassList(classNames, {
            env,
            removeDuplicates: true,
          })

          // Update the array elements with the sorted values
          let sortedIndex = 0
          for (let i = 0; i < node.elements.length; i++) {
            const el = node.elements[i]
            if (!el) continue

            const elAny = el as any

            if (elAny.type === 'StringLiteral') {
              if (sortedIndex < sortedClasses.length) {
                elAny.value = sortedClasses[sortedIndex++]

                // Update raw representation if needed
                if (elAny.extra && typeof elAny.extra === 'object') {
                  elAny.extra.rawValue = elAny.value
                  if (typeof elAny.extra.raw === 'string') {
                    const quoteChar = elAny.extra.raw[0]
                    elAny.extra.raw = `${quoteChar}${elAny.value}${quoteChar}`
                  }
                }
              }
            } else if (
              elAny.type === 'Literal' &&
              typeof elAny.value === 'string'
            ) {
              if (sortedIndex < sortedClasses.length) {
                elAny.value = sortedClasses[sortedIndex++]

                // Update raw representation if needed
                if (typeof elAny.raw === 'string') {
                  const quoteChar = elAny.raw[0]
                  elAny.raw = `${quoteChar}${elAny.value}${quoteChar}`
                }
              }
            }
          }
        }
      }

Then in the formant.test.ts file can add the this to the bottom of the javascript test entry

  [
    `;<div class={clsx(['flex', 'relative', 'w-full'])} />`,
    `;<div class={clsx(['relative', 'flex', 'w-full'])} />`,
  ],