Vue templates - Githubissues

Hi, Good idea to produce a mangling plugin for Vite. I saw that you do not have a matching class list for vue templates. In my Vue3 workflows I use this snippet, if it can help

// © Ronan LE MEILLAT
// MIT License
import fs from "fs";

function getSetOfClasses(data:string):string[]{
    const regExp = new RegExp(/(?:class)=(?:["']\W+\s*(?:\w+)\()?["']([^'"]+)['"]/g)
    const tresult = [] as string[]
    for (const match of data.matchAll(regExp)){
        const noNewLine = match[1].replace(new RegExp(/\n/g),' ')
        const noMultipleSpace = noNewLine.replace(new RegExp(/\s\s+/g), ' ')
        const arrayOfSingleClasses = noMultipleSpace.trim().split(' ')
        tresult.push(...arrayOfSingleClasses)
    }
    return [...new Set(tresult)]
}
const data = fs.readFileSync('./src/components/forms/EmailForm.vue').toString()
console.log (getSetOfClasses(data))

this gives me this array

[
  'container',
  'pt-5',
  'md:pt-0',
  'mx-auto',
  'px-4',
  'flex',
  'flex-wrap',
  'justify-center',
  'w-full',
  'lg:w-6/12',
  'pt-6',
  'sm:pt-0',
  'relative',
  'flex-col',
  'min-w-0',
  'break-words',
  'mb-6',
  'rounded-lg',
  'bg-white',
  'border-dotted',
  'border-2',
  'border-gray-200',
  'flex-auto',
  'p-5',
  'lg:p-10',
  'text-2xl',
  'font-semibold',
  'leading-relaxed',
  'mt-1',
  'mb-4',
  'text-slate-500',
  'mb-3',
  'mt-8',
  'block',
  'uppercase',
  'text-slate-600',
  'text-xs',
  'font-bold',
  'mb-2',
  'border-0',
  'px-3',
  'py-3',
  'placeholder-slate-300',
  'rounded',
  'text-sm',
  'shadow',
  'focus:outline-none',
  'focus:ring',
  'ease-linear',
  'transition-all',
  'duration-150',
  'font-light',
  'text-slate-700',
  'text-slate-300',
  'appearance-none',
  'h-4',
  'w-4',
  'border',
  'border-gray-300',
  'rounded-sm',
  'checked:bg-blue-600',
  'checked:border-blue-600',
  'transition',
  'duration-200',
  'align-center',
  'ml-2',
  'cursor-pointer',
  'mr-2',
  'text-center',
  'mt-6'
]

kiosion / vite-plugin-class-mangler

Vue templates #4