css 文件重复类样式删除

上传文件 进行无关 className 删除

<div style="display: flex;">
	<input type="file" @change="handleFileUpload" />
	<el-button @click="removeStyles" :disabled="!fileContent">Remove Styles and Download</el-button>
</div>

 handleFileUpload(event) {
   console.log(event)
   const file = event.target.files[0]
   if (file) {
     const reader = new FileReader()
     reader.onload = e => {
       this.fileContent = e.target.result
     }
     reader.readAsText(file)
   }
 },
 removeStyles() {
   if (!this.fileContent) {
     return
   }
   let modifiedContent = this.fileContent
   this.allClassData.forEach(className => {
     const regex = new RegExp(`\\.${className}\\s*{[^}]*}`, 'g')
     modifiedContent = modifiedContent.replace(regex, '')
   })
   const blob = new Blob([modifiedContent], { type: 'text/css' })
   const link = document.createElement('a')
   link.href = URL.createObjectURL(blob)
   link.download = 'text2.scss'
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
 }

获取页面所有className

let allClassNames = getAllClassNames().sort()
this.allClassData = allClassNames
console.log('店铺分析', allClassNames)

export function getAllClassNames() {
  let classNames = new Set()

  function extractClassNames(element) {
    element.classList.forEach(className => {
      classNames.add(className)
    })

    Array.from(element.children).forEach(child => {
      extractClassNames(child)
    })
  }

  extractClassNames(document.body)

  return Array.from(classNames)
}