@unocss/transformer-attributify-jsx 66.5.11 → 66.5.12

package/dist/index.d.mts

@@ -966,6 +966,12 @@ interface TransformerAttributifyJsxOptions {
    */
   exclude?: FilterPattern;
 }
+interface AttributifyResolverParams {
+  code: MagicString;
+  id: string;
+  uno: UnoGenerator<object>;
+  isBlocked: (matchedRule: string) => boolean;
+}
 declare function transformerAttributifyJsx(options?: TransformerAttributifyJsxOptions): SourceCodeTransformer;
 //#endregion
-export { FilterPattern, TransformerAttributifyJsxOptions, transformerAttributifyJsx as default };
+export { AttributifyResolverParams, FilterPattern, TransformerAttributifyJsxOptions, transformerAttributifyJsx as default };

package/dist/index.mjs

@@ -1,6 +1,6 @@
+import { toArray } from "@unocss/core";
 import { parse } from "@babel/parser";
 import _traverse from "@babel/traverse";
-import { toArray } from "@unocss/core";
 
 //#region ../../virtual-shared/integration/src/env.ts
 function getEnvFlags() {
@@ -13,8 +13,71 @@ function getEnvFlags() {
 }
 
 //#endregion
-//#region src/index.ts
+//#region src/resolver/babel.ts
 const traverse = _traverse.default || _traverse;
+async function attributifyJsxBabelResolver(params) {
+	const { code, uno, isBlocked } = params;
+	const tasks = [];
+	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);
+}
+
+//#endregion
+//#region src/resolver/regex.ts
+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;
+async function attributifyJsxRegexResolver(params) {
+	const { code, uno, isBlocked } = params;
+	const tasks = [];
+	const attributifyPrefix = uno.config.presets.find((i) => i.name === "@unocss/preset-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, _, 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);
+		});
+		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);
+}
+
+//#endregion
+//#region src/index.ts
 function createFilter(include, exclude) {
 	const includePattern = toArray(include || []);
 	const excludePattern = toArray(exclude || []);
@@ -35,24 +98,22 @@ function transformerAttributifyJsx(options = {}) {
 		name: "@unocss/transformer-attributify-jsx",
 		enforce: "pre",
 		idFilter: createFilter(options.include || [/\.[jt]sx$/, /\.mdx$/], options.exclude || []),
-		async transform(code, _, { uno }) {
+		async transform(code, id, { uno }) {
 			try {
 				if (getEnvFlags().isVSCode) return;
 			} catch {}
-			const tasks = [];
-			traverse(parse(code.toString(), {
-				sourceType: "module",
-				plugins: ["jsx", "typescript"]
-			}), { 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);
+			const params = {
+				code,
+				id,
+				uno,
+				isBlocked
+			};
+			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);
+			}
 		}
 	};
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/transformer-attributify-jsx",
   "type": "module",
-  "version": "66.5.11",
+  "version": "66.5.12",
   "description": "Support valueless attributify in JSX/TSX.",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@babel/parser": "7.27.7",
     "@babel/traverse": "7.27.7",
-    "@unocss/core": "66.5.11"
+    "@unocss/core": "66.5.12"
   },
   "devDependencies": {
     "magic-string": "^0.30.21"