refactor: htmlHandler

Author: sonofmagic

packages/core/package.json

@@ -62,15 +62,13 @@
     "@tailwindcss-mangle/shared": "workspace:^",
     "@vue/compiler-sfc": "^3.4.29",
     "fast-sort": "^3.4.0",
-    "htmlparser2": "^9.1.0",
+    "htmlparser2": "9.1.0",
     "magic-string": "^0.30.10",
     "micromatch": "^4.0.7",
-    "parse5": "^7.1.2",
     "postcss": "^8.4.38",
     "postcss-selector-parser": "^6.1.0"
   },
   "devDependencies": {
-    "@parse5/tools": "^0.5.0",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.20.6",
     "@types/micromatch": "^4.0.7",

packages/core/src/css/plugins.ts

@@ -7,8 +7,6 @@ export type PostcssMangleTailwindcssPlugin = PluginCreator<ICssHandlerOptions>
 
 const postcssPlugin = 'postcss-mangle-tailwindcss-plugin'
 
-const clonedKey = '__tw_mangle_cloned__'
-
 export function isVueScoped(s: parser.ClassName): boolean {
   if (s.parent) {
     const index = s.parent.nodes.indexOf(s)
@@ -30,33 +28,30 @@ export const transformSelectorPostcssPlugin: PluginCreator<ICssHandlerOptions> =
 
   return {
     postcssPlugin,
-    async Rule(rule) {
-      // @ts-ignore
-      if (rule[clonedKey]) {
-        return
-      }
-      await parser((selectors) => {
-        selectors.walkClasses((s) => {
-          if (s.value && replaceMap && replaceMap.has(s.value)) {
-            if (ignoreVueScoped && isVueScoped(s)) {
-              return
-            }
-            const v = replaceMap.get(s.value)
-            if (v) {
-              if (ctx.isPreserveClass(s.value)) {
-                const r = rule.cloneBefore()
-                // @ts-ignore
-                r[clonedKey] = true
+    Once(root) {
+      root.walkRules((rule) => {
+        parser((selectors) => {
+          selectors.walkClasses((s) => {
+            if (s.value && replaceMap && replaceMap.has(s.value)) {
+              if (ignoreVueScoped && isVueScoped(s)) {
+                return
+              }
+              const v = replaceMap.get(s.value)
+              if (v) {
+                if (ctx.isPreserveClass(s.value)) {
+                  rule.cloneBefore()
+                }
+                s.value = v
               }
-              s.value = v
             }
-          }
+          })
+        }).transformSync(rule, {
+          lossless: false,
+          updateSelector: true,
         })
-      }).transform(rule, {
-        lossless: false,
-        updateSelector: true,
       })
     },
+
   }
 }
 transformSelectorPostcssPlugin.postcss = true

packages/core/src/ctx/index.ts

@@ -18,7 +18,7 @@ export class Context {
   options: MangleUserConfig
   private includeMatcher: (file: string) => boolean
   private excludeMatcher: (file: string) => boolean
-  public replaceMap: Map<string, string | boolean>
+  public replaceMap: Map<string, string>
   classSet: Set<string>
 
   classGenerator: ClassGenerator

packages/core/src/html/index.ts

@@ -1,27 +1,29 @@
-import { parse, serialize } from 'parse5'
-import { traverse } from '@parse5/tools'
+import { Parser } from 'htmlparser2'
+import MagicString from 'magic-string'
 import type { IHtmlHandlerOptions } from '../types'
 import { makeRegex, splitCode } from '../shared'
-// const { traverse } = await import('@parse5/tools')
-export function htmlHandler(rawSource: string, options: IHtmlHandlerOptions) {
+
+export function htmlHandler(raw: string, options: IHtmlHandlerOptions) {
   const { ctx } = options
   const { replaceMap } = ctx
-
-  const fragment = parse(rawSource)
-  traverse(fragment, {
-    element(node) {
-      const attribute = node.attrs.find(x => x.name === 'class')
-      if (attribute) {
-        const array = splitCode(attribute.value, {
+  const ms: MagicString = typeof raw === 'string' ? new MagicString(raw) : raw
+  const parser = new Parser({
+    onattribute(name, value) {
+      if (name === 'class') {
+        const arr = splitCode(value, {
           splitQuote: false,
         })
-        for (const v of array) {
+        let rawValue = value
+        for (const v of arr) {
           if (replaceMap.has(v)) {
-            attribute.value = attribute.value.replace(makeRegex(v), ctx.classGenerator.generateClassName(v).name)
+            rawValue = rawValue.replace(makeRegex(v), ctx.classGenerator.generateClassName(v).name)
           }
         }
+        ms.update(parser.startIndex + name.length + 2, parser.endIndex - 1, rawValue)
       }
     },
   })
-  return serialize(fragment)
+  parser.write(ms.original)
+  parser.end()
+  return ms.toString()
 }

packages/core/test/__snapshots__/html.test.ts.snap

@@ -1,7 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`html handler > common usage 1`] = `
-"<!DOCTYPE html><html><head>
+"<!doctype html>
+<html>
+
+<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="/main.css" rel="stylesheet">
@@ -11,13 +14,16 @@ exports[`html handler > common usage 1`] = `
   <h1 class="tw-a tw-b tw-c">
     Hello world!
   </h1>
+</body>
 
-
-</body></html>"
+</html>"
 `;
 
 exports[`html handler > trailing slash case 0 1`] = `
-"<!DOCTYPE html><html lang="en"><head>
+"<!DOCTYPE html>
+<html lang="en">
+
+<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -33,13 +39,16 @@ exports[`html handler > trailing slash case 0 1`] = `
       Block with bg-red-500 class
     </div>
   </div>
+</body>
 
-
-</body></html>"
+</html>"
 `;
 
 exports[`html handler > trailing slash case 1`] = `
-"<!DOCTYPE html><html lang="en"><head>
+"<!DOCTYPE html>
+<html lang="en">
+
+<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -55,7 +64,7 @@ exports[`html handler > trailing slash case 1`] = `
       Block with bg-red-500/50 class
     </div>
   </div>
+</body>
 
-
-</body></html>"
+</html>"
 `;

packages/core/test/html.test.ts

@@ -30,7 +30,6 @@ describe('html handler', () => {
     }
     const res = htmlHandler(getTestCase('trailing-slash.html'), {
       ctx,
-      replaceMap,
     })
     expect(res).toMatchSnapshot()
   })
@@ -43,7 +42,6 @@ describe('html handler', () => {
     }
     const res = htmlHandler(getTestCase('trailing-slash-0.html'), {
       ctx,
-      replaceMap,
     })
     expect(res).toMatchSnapshot()
   })

packages/shared/src/split.ts

@@ -1,4 +1,5 @@
-export const validateFilterRE = /[\w%-?\u00A0-\uFFFF]/
+// eslint-disable-next-line regexp/no-obscure-range
+export const validateFilterRE = /[\w\u00A0-\uFFFF%-?]/
 
 export function isValidSelector(selector = ''): selector is string {
   return validateFilterRE.test(selector)