Open eltorio opened 1 year ago
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' ]
This is the complete extraction/filtering I use for Vue3/Tailwindcss https://gist.github.com/eltorio/785188ecb98285a74b991c46cc8f6012
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
this gives me this array