feat(transformer-attributify-jsx): migrate from babel to oxc for JSX parsing (#5068)

9romise · autofix-ci[bot] · web-flow · commit 6fbf7041e868 · 2026-03-02T06:43:11.000Z
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/interactive/nuxt.config.ts b/interactive/nuxt.config.ts
@@ -66,7 +66,10 @@ export default defineNuxtConfig({
       include: [/\.vue$/, /\.md$/],
     },
     optimizeDeps: {
-      exclude: externals,
+      exclude: [
+        ...externals,
+        'oxc-parser',
+      ],
     },
     define: {
       'process.env.VSCODE_TEXTMATE_DEBUG': 'false',
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "@iconify-json/teenyicons": "catalog:icons",
     "@iconify-json/twemoji": "catalog:icons",
     "@iconify-json/uim": "catalog:icons",
+    "@oxc-parser/binding-wasm32-wasi": "catalog:docs",
     "@shikijs/vitepress-twoslash": "catalog:docs",
     "@types/connect": "catalog:types",
     "@types/css-tree": "catalog:types",
diff --git a/packages-presets/transformer-attributify-jsx/package.json b/packages-presets/transformer-attributify-jsx/package.json
@@ -33,12 +33,11 @@
     "dev": "tsdown --config-loader unrun --watch"
   },
   "dependencies": {
-    "@babel/parser": "catalog:babel",
-    "@babel/traverse": "catalog:babel",
-    "@unocss/core": "workspace:*"
+    "@unocss/core": "workspace:*",
+    "oxc-parser": "catalog:oxc",
+    "oxc-walker": "catalog:oxc"
   },
   "devDependencies": {
-    "@types/babel__traverse": "catalog:types",
     "magic-string": "catalog:utils"
   }
 }
diff --git a/packages-presets/transformer-attributify-jsx/src/index.ts b/packages-presets/transformer-attributify-jsx/src/index.ts
@@ -2,7 +2,7 @@ import type { SourceCodeTransformer, UnoGenerator } from '@unocss/core'
 import type MagicString from 'magic-string'
 import { getEnvFlags } from '#integration/env'
 import { toArray } from '@unocss/core'
-import { attributifyJsxBabelResolver } from './resolver/babel'
+import { attributifyJsxOxcResolver } from './resolver/oxc'
 import { attributifyJsxRegexResolver } from './resolver/regex'
 
 export type FilterPattern = Array<string | RegExp> | string | RegExp | null
@@ -94,11 +94,11 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
       }
 
       try {
-        await attributifyJsxBabelResolver(params)
+        await attributifyJsxOxcResolver(params)
       }
       catch (error) {
         console.warn(
-          `[@unocss/transformer-attributify-jsx]: Babel resolver failed for "${id}", falling back to regex resolver:`,
+          `[@unocss/transformer-attributify-jsx]: Oxc 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
diff --git a/packages-presets/transformer-attributify-jsx/src/resolver/oxc.ts b/packages-presets/transformer-attributify-jsx/src/resolver/oxc.ts
@@ -0,0 +1,41 @@
+import type { AttributifyResolverParams } from '..'
+import { parseSync } from 'oxc-parser'
+import { walk } from 'oxc-walker'
+
+export async function attributifyJsxOxcResolver(params: AttributifyResolverParams) {
+  const { code, id, uno, isBlocked } = params
+  const tasks: Promise<void>[] = []
+  const ast = parseSync(id, code.toString(), {
+    sourceType: 'module',
+  })
+
+  if (ast.errors?.length) {
+    throw new Error(`Oxc parse errors:\n${ast.errors.join('\n')}`)
+  }
+
+  walk(ast.program, {
+    enter(node) {
+      if (node.type !== 'JSXAttribute')
+        return
+
+      if (node.value === null) {
+        const attr = node.name.type === 'JSXNamespacedName'
+          ? `${node.name.namespace.name}:${node.name.name.name}`
+          : node.name.name
+
+        if (isBlocked(attr))
+          return
+
+        tasks.push(
+          uno.parseToken(attr).then((matched) => {
+            if (matched) {
+              code.appendRight(node.end, '=""')
+            }
+          }),
+        )
+      }
+    },
+  })
+
+  await Promise.all(tasks)
+}
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -58,6 +58,7 @@ export default defineConfig({
       '@iconify/utils/lib/loader/install-pkg',
       '@iconify/utils/lib/loader/node-loader',
       '@iconify/utils/lib/loader/node-loaders',
+      'oxc-parser',
     ],
   },
   build: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
