feat: 引入 node-html-parser 替换自己处理节点查找

Author: Simon-He95

package.json

@@ -86,6 +86,7 @@
     "find-up": "^6.3.0",
     "lint-staged": "^13.3.0",
     "magic-string": "^0.30.17",
+    "node-html-parser": "^7.0.1",
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
     "simple-git-hooks": "^2.13.0",

pnpm-lock.yaml

@@ -0,0 +1,51 @@
+import { parse } from 'node-html-parser'
+
+export function nodeHtmlParser(code: string, selector: string, stack?: any[]) {
+  const results: any[] = []
+  if (!stack || !stack.length)
+    return results
+  const root = parse(code)
+  let elements: any[] = []
+  try {
+    elements = root.querySelectorAll(selector)
+  }
+  catch (error) {}
+
+  while (elements.length === 0 && selector.includes(':')) {
+    // 从: 往前截取匹配因为可能有 :hover等伪类
+    const index = selector.lastIndexOf(':')
+    selector = selector.slice(0, index)
+    try {
+      elements = root.querySelectorAll(selector)
+    }
+    catch (error) {}
+  }
+  if (elements.length) {
+    // 从 elements 的range 去匹配 stack 的 ast 节点
+    elements.forEach((element) => {
+      const targetNode = getMatchNode(element.range, stack)
+      if (targetNode) {
+        results.push(targetNode)
+      }
+    })
+  }
+  return results
+}
+
+export function getMatchNode(
+  range: Readonly<[number, number]>,
+  elements: any[],
+): any {
+  for (const element of elements) {
+    const { start, end } = element.loc
+    if (range[0] === start.offset && range[1] === end.offset) {
+      return element
+    }
+    else if (element.children && element.children.length) {
+      const match = getMatchNode(range, element.children)
+      if (match) {
+        return match
+      }
+    }
+  }
+}

src/node-html-parser.ts

@@ -1,3 +1,5 @@
+import { joinWithUnderLine } from 'transform-to-unocss-core'
+
 export function tail(css: string) {
   if (/not\(/.test(css))
     return `[&:${css}]:`
@@ -47,5 +49,9 @@ export function tail(css: string) {
   if (['first-child', 'last-child', 'only-child'].includes(css)) {
     return css.split('-')[0]
   }
-  return css
+  const [first, ...rest] = css.split(':')
+  if (rest.length)
+    return `[&:${joinWithUnderLine(first)}]:${rest.join(':')}`
+
+  return `[&:${joinWithUnderLine(first)}]`
 }

src/tail.ts

@@ -4,7 +4,8 @@ import {
   joinWithLine,
   transformImportant,
   trim,
-} from './utils'
+} from 'transform-to-unocss-core'
+import {} from './utils'
 
 export function transform(key: string, val: string) {
   const [v, important] = transformImportant(val)