@unocss/transformer-attributify-jsx 66.3.3 → 66.4.1

package/README.md

@@ -68,8 +68,6 @@ export default defineConfig({
 
 ## Caveats
 
-If you encounter any issues with this package, there is [@unocss/transformer-attributify-jsx-babel](https://github.com/unocss/unocss/tree/main/packages-presets/transformer-attributify-jsx-babel) package that uses Babel to transform JSX.
-
 > ⚠️ The rules are almost the same as those of `preset-attributify`, but there are several precautions
 
 ```html

package/dist/index.d.mts

@@ -21,4 +21,5 @@ interface TransformerAttributifyJsxOptions {
 }
 declare function transformerAttributifyJsx(options?: TransformerAttributifyJsxOptions): SourceCodeTransformer;
 
-export { type FilterPattern, type TransformerAttributifyJsxOptions, transformerAttributifyJsx as default };
+export { transformerAttributifyJsx as default };
+export type { FilterPattern, TransformerAttributifyJsxOptions };

package/dist/index.d.ts

@@ -21,4 +21,5 @@ interface TransformerAttributifyJsxOptions {
 }
 declare function transformerAttributifyJsx(options?: TransformerAttributifyJsxOptions): SourceCodeTransformer;
 
-export { type FilterPattern, type TransformerAttributifyJsxOptions, transformerAttributifyJsx as default };
+export { transformerAttributifyJsx as default };
+export type { FilterPattern, TransformerAttributifyJsxOptions };

package/dist/index.mjs

@@ -1,3 +1,6 @@
+import process from 'node:process';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
 import { toArray } from '@unocss/core';
 
 function createFilter(include, exclude) {
@@ -9,9 +12,6 @@ function createFilter(include, exclude) {
     return includePattern.some((p) => id.match(p));
   };
 }
-const elementRE = /<([^/?<>0-9$_!][^\s>]*)\s+((?:"[^"]*"|'[^"]*'|(\{[^}]*\})|[^{>])+)>/g;
-const attributeRE = /(?<![~`!$%^&*()_+\-=[{;':"|,.<>/?])([a-z()#][[?\w\-:()#%\]]*)(?:\s*=\s*('[^']*'|"[^"]*"|\S+))?|\{[^}]*\}/gi;
-const valuedAttributeRE = /((?!\d|-{2}|-\d)[\w\u00A0-\uFFFF:!%.~<-]+)=(?:"[^"]*"|'[^']*'|(\{)((?:[`(][^`)]*[`)]|[^}])+)(\}))/g;
 function transformerAttributifyJsx(options = {}) {
   const {
     blocklist = []
@@ -36,44 +36,29 @@ function transformerAttributifyJsx(options = {}) {
     enforce: "pre",
     idFilter,
     async transform(code, _, { uno }) {
+      if (process.env.VSCODE_CWD)
+        return;
       const tasks = [];
-      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))) {
-        let attributifyPart = item[2];
-        if (valuedAttributeRE.test(attributifyPart)) {
-          attributifyPart = attributifyPart.replace(valuedAttributeRE, (match, _2, dynamicFlagStart) => {
-            if (!dynamicFlagStart)
-              return " ".repeat(match.length);
-            let preLastModifierIndex = 0;
-            let temp = match;
-            for (const _item of match.matchAll(elementRE)) {
-              const attrAttributePart = _item[2];
-              if (valuedAttributeRE.test(attrAttributePart))
-                attrAttributePart.replace(valuedAttributeRE, (m) => " ".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);
-          });
+      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, '=""');
+                }
+              })
+            );
+          }
         }
-        for (const attr of attributifyPart.matchAll(attributeRE)) {
-          const matchedRule = attr[0].replace(/:/, "-");
-          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);
     }
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/transformer-attributify-jsx",
   "type": "module",
-  "version": "66.3.3",
+  "version": "66.4.1",
   "description": "Support valueless attributify in JSX/TSX.",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -33,7 +33,9 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/core": "66.3.3"
+    "@babel/parser": "^7.28.0",
+    "@babel/traverse": "^7.28.0",
+    "@unocss/core": "66.4.1"
   },
   "devDependencies": {
     "magic-string": "^0.30.17"