Skip to content
This repository has been archived by the owner on Dec 22, 2022. It is now read-only.

Vue templates #4

Open
eltorio opened this issue Oct 22, 2022 · 1 comment
Open

Vue templates #4

eltorio opened this issue Oct 22, 2022 · 1 comment

Comments

@eltorio
Copy link

eltorio commented Oct 22, 2022

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'
]
@eltorio
Copy link
Author

eltorio commented Oct 23, 2022

This is the complete extraction/filtering I use for Vue3/Tailwindcss
https://gist.github.com/eltorio/785188ecb98285a74b991c46cc8f6012

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant