fix(transformer-attributify-jsx): falls back to regular expression when babel parse error (#5032)

zyyv · Copilot · web-flow · commit 38cc8aed3488 · 2025-12-30T17:50:27.000+08:00
Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
diff --git a/packages-presets/transformer-attributify-jsx/src/index.ts b/packages-presets/transformer-attributify-jsx/src/index.ts
@@ -1,11 +1,9 @@
-import type { SourceCodeTransformer } from '@unocss/core'
+import type { SourceCodeTransformer, UnoGenerator } from '@unocss/core'
+import type MagicString from 'magic-string'
 import { getEnvFlags } from '#integration/env'
-import { parse } from '@babel/parser'
-import _traverse from '@babel/traverse'
 import { toArray } from '@unocss/core'
-
-// @ts-expect-error ignore
-const traverse = (_traverse.default || _traverse) as typeof _traverse
+import { attributifyJsxBabelResolver } from './resolver/babel'
+import { attributifyJsxRegexResolver } from './resolver/regex'
 
 export type FilterPattern = Array<string | RegExp> | string | RegExp | null
 
@@ -43,6 +41,13 @@ export interface TransformerAttributifyJsxOptions {
   exclude?: FilterPattern
 }
 
+export interface AttributifyResolverParams {
+  code: MagicString
+  id: string
+  uno: UnoGenerator<object>
+  isBlocked: (matchedRule: string) => boolean
+}
+
 export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {
   const {
     blocklist = [],
@@ -71,7 +76,7 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
     name: '@unocss/transformer-attributify-jsx',
     enforce: 'pre',
     idFilter,
-    async transform(code, _, { uno }) {
+    async transform(code, id, { uno }) {
       // Skip if running in VSCode extension context
       try {
         if (getEnvFlags().isVSCode)
@@ -80,34 +85,24 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
       catch {
         // Ignore import error in browser environment
       }
-      const tasks: Promise<void>[] = []
-      const ast = parse(code.toString(), {
-        sourceType: 'module',
-        plugins: ['jsx', 'typescript'],
-      })
-
-      traverse(ast, {
-        JSXAttribute(path) {
-          if (path.node.value === null) {
-            const attr = path.node.name.type === 'JSXNamespacedName'
-              ? `${path.node.name.namespace.name}:${path.node.name.name.name}`
-              : path.node.name.name
-
-            if (isBlocked(attr))
-              return
 
-            tasks.push(
-              uno.parseToken(attr).then((matched) => {
-                if (matched) {
-                  code.appendRight(path.node.end!, '=""')
-                }
-              }),
-            )
-          }
-        },
-      })
+      const params: AttributifyResolverParams = {
+        code,
+        id,
+        uno,
+        isBlocked,
+      }
 
-      await Promise.all(tasks)
+      try {
+        await attributifyJsxBabelResolver(params)
+      }
+      catch (error) {
+        console.warn(
+          `[@unocss/transformer-attributify-jsx]: Babel resolver failed for "${id}", falling back to regex resolver:`,
+          error,
+        )
+        await attributifyJsxRegexResolver(params)
+      }
     },
   }
 }
diff --git a/packages-presets/transformer-attributify-jsx/src/resolver/babel.ts b/packages-presets/transformer-attributify-jsx/src/resolver/babel.ts
@@ -0,0 +1,42 @@
+import type { AttributifyResolverParams } from '..'
+import { parse } from '@babel/parser'
+import _traverse from '@babel/traverse'
+
+// @ts-expect-error ignore
+const traverse = (_traverse.default || _traverse) as typeof _traverse
+
+export async function attributifyJsxBabelResolver(params: AttributifyResolverParams) {
+  const { code, uno, isBlocked } = params
+  const tasks: Promise<void>[] = []
+  const ast = parse(code.toString(), {
+    sourceType: 'module',
+    plugins: ['jsx', 'typescript'],
+  })
+
+  if (ast.errors?.length) {
+    throw new Error(`Babel parse errors:\n${ast.errors.join('\n')}`)
+  }
+
+  traverse(ast, {
+    JSXAttribute(path) {
+      if (path.node.value === null) {
+        const attr = path.node.name.type === 'JSXNamespacedName'
+          ? `${path.node.name.namespace.name}:${path.node.name.name.name}`
+          : path.node.name.name
+
+        if (isBlocked(attr))
+          return
+
+        tasks.push(
+          uno.parseToken(attr).then((matched) => {
+            if (matched) {
+              code.appendRight(path.node.end!, '=""')
+            }
+          }),
+        )
+      }
+    },
+  })
+
+  await Promise.all(tasks)
+}
diff --git a/packages-presets/transformer-attributify-jsx/src/resolver/regex.ts b/packages-presets/transformer-attributify-jsx/src/resolver/regex.ts
@@ -0,0 +1,55 @@
+import type { AttributifyResolverParams } from '..'
+
+// eslint-disable-next-line regexp/no-super-linear-backtracking
+const elementRE = /<([^/?<>0-9$_!][^\s>]*)\s+((?:"[^"]*"|'[^"]*'|(\{[^}]*\})|[^{>])+)>/g
+const attributeRE = /(?<![~`!$%^&*()_+\-=[{;':"|,.<>/?])([a-z()#][[?\w\-:()#%\]]*)(?:\s*=\s*('[^']*'|"[^"]*"|\S+))?|\{[^}]*\}/gi
+// eslint-disable-next-line regexp/no-super-linear-backtracking
+const valuedAttributeRE = /((?!\d|-{2}|-\d)[\w\u00A0-\uFFFF:!%.~<-]+)=(?:"[^"]*"|'[^']*'|(\{)((?:[`(][^`)]*[`)]|[^}])+)(\}))/g
+
+export async function attributifyJsxRegexResolver(params: AttributifyResolverParams) {
+  const { code, uno, isBlocked } = params
+  const tasks: Promise<void>[] = []
+  const attributify = uno.config.presets.find(i => i.name === '@unocss/preset-attributify')
+  const attributifyPrefix = attributify?.options?.prefix ?? 'un-'
+  for (const item of Array.from(code.original.matchAll(elementRE))) {
+    // Extract the JSX attributes portion and mask complex valued attributes with whitespace for attributify processing
+    let attributifyPart = item[2]
+    if (valuedAttributeRE.test(attributifyPart)) {
+      attributifyPart = attributifyPart.replace(valuedAttributeRE, (match, _, dynamicFlagStart) => {
+        if (!dynamicFlagStart)
+          return ' '.repeat(match.length)
+        let preLastModifierIndex = 0
+        let temp = match
+        // No more recursive processing of the more complex situations of JSX in attributes.
+        for (const _item of match.matchAll(elementRE)) {
+          const attrAttributePart = _item[2]
+          if (valuedAttributeRE.test(attrAttributePart))
+            attrAttributePart.replace(valuedAttributeRE, (m: string) => ' '.repeat(m.length))
+
+          const pre = temp.slice(0, preLastModifierIndex) + ' '.repeat(_item.index + _item[0].indexOf(_item[2]) - preLastModifierIndex) + attrAttributePart
+          temp = pre + ' '.repeat(_item.input.length - pre.length)
+          preLastModifierIndex = pre.length
+        }
+        if (preLastModifierIndex !== 0)
+          return temp
+
+        return ' '.repeat(match.length)
+      })
+    }
+    for (const attr of attributifyPart.matchAll(attributeRE)) {
+      const matchedRule = attr[0]
+      if (matchedRule.includes('=') || isBlocked(matchedRule))
+        continue
+      const updatedMatchedRule = matchedRule.startsWith(attributifyPrefix) ? matchedRule.slice(attributifyPrefix.length) : matchedRule
+      tasks.push(uno.parseToken(updatedMatchedRule).then((matched) => {
+        if (matched) {
+          const startIdx = (item.index || 0) + (attr.index || 0) + item[0].indexOf(item[2])
+          const endIdx = startIdx + matchedRule.length
+          code.overwrite(startIdx, endIdx, `${matchedRule}=""`)
+        }
+      }))
+    }
+  }
+
+  await Promise.all(tasks)
+}
