@tamagui/to-tailwind 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/dist/esm/transform.mjs

@@ -0,0 +1,677 @@
+import { parse } from "@babel/parser";
+import _traverse from "@babel/traverse";
+import _generate from "@babel/generator";
+import * as t from "@babel/types";
+import { createModifierRegistry, defaultMediaKeys, fontWeightNames, formatCandidate, getTokenCategory, parseValue, propToTailwindPrefix, standaloneValueProps, v6RemovedThemeNames, v6ThemeNameReplacements } from "@tamagui/style-grammar/tooling";
+import { componentToTag } from "./maps/componentToTag.mjs";
+import { shorthands } from "@tamagui/shorthands/v4";
+
+const traverse = _traverse.default ?? _traverse;
+const generate = _generate.default ?? _generate;
+const defaultShorthands = shorthands;
+const removedV6ThemeNames = new Set(v6RemovedThemeNames);
+function getV6ThemeName(name) {
+	const opacityIndex = name.indexOf("/");
+	const baseName = opacityIndex === -1 ? name : name.slice(0, opacityIndex);
+	if (removedV6ThemeNames.has(baseName)) return null;
+	const mapped = v6ThemeNameReplacements[baseName] ?? baseName;
+	return opacityIndex === -1 ? mapped : `${mapped}${name.slice(opacityIndex)}`;
+}
+function namesToSet(names) {
+	if (!names) return /* @__PURE__ */ new Set();
+	if (Array.isArray(names)) return new Set(names);
+	if (names instanceof Set) return new Set(names);
+	return new Set(Object.keys(names));
+}
+function addConfigNames(target, source) {
+	if (!source) return;
+	for (const key in source) target.add(key);
+}
+function createTransformGrammarConfig(options, mediaKeys, shorthands) {
+	if (options.grammarConfig) {
+		return {
+			...options.grammarConfig,
+			shorthands,
+			mediaNames: mediaKeys
+		};
+	}
+	const tokenNames = {};
+	const tokenCategories = [
+		"space",
+		"size",
+		"radius",
+		"zIndex",
+		"color"
+	];
+	const fontCategories = [
+		"fontFamily",
+		"fontSize",
+		"fontWeight",
+		"lineHeight",
+		"letterSpacing"
+	];
+	const authoritative = [
+		"tokens",
+		"fonts",
+		"themes",
+		"media",
+		"shorthands"
+	].some((key) => Object.prototype.hasOwnProperty.call(options, key));
+	if (authoritative) {
+		for (const category of [...tokenCategories, ...fontCategories]) {
+			tokenNames[category] = /* @__PURE__ */ new Set();
+		}
+	}
+	for (const category of tokenCategories) {
+		if (options.tokens?.[category]) {
+			const names = tokenNames[category] || /* @__PURE__ */ new Set();
+			addConfigNames(names, options.tokens[category]);
+			tokenNames[category] = names;
+		}
+	}
+	if (options.fonts) {
+		tokenNames.fontFamily ||= /* @__PURE__ */ new Set();
+		tokenNames.fontSize ||= /* @__PURE__ */ new Set();
+		tokenNames.fontWeight ||= /* @__PURE__ */ new Set();
+		tokenNames.lineHeight ||= /* @__PURE__ */ new Set();
+		tokenNames.letterSpacing ||= /* @__PURE__ */ new Set();
+		for (const familyName in options.fonts) {
+			tokenNames.fontFamily.add(familyName);
+			const font = options.fonts[familyName];
+			addConfigNames(tokenNames.fontSize, font?.size);
+			addConfigNames(tokenNames.fontWeight, font?.weight);
+			addConfigNames(tokenNames.lineHeight, font?.lineHeight);
+			addConfigNames(tokenNames.letterSpacing, font?.letterSpacing);
+		}
+	}
+	const themeNames = /* @__PURE__ */ new Set();
+	if (options.themes) {
+		tokenNames.color ||= /* @__PURE__ */ new Set();
+		for (const themeName in options.themes) {
+			themeNames.add(themeName);
+			for (const name in options.themes[themeName]) {
+				const mapped = getV6ThemeName(name);
+				if (mapped) tokenNames.color.add(mapped);
+			}
+		}
+	}
+	return {
+		shorthands,
+		mediaNames: mediaKeys,
+		themeNames,
+		tokenNames
+	};
+}
+function findParseError(source) {
+	try {
+		const ast = parse(source, {
+			sourceType: "module",
+			plugins: ["jsx", "typescript"],
+			errorRecovery: true
+		});
+		const errs = ast.errors;
+		if (errs && errs.length > 0) {
+			const e = errs[0];
+			const loc = e?.loc ? `${e.loc.line}:${e.loc.column}` : "?";
+			return `${e?.reasonCode || e?.message || "parse error"} at ${loc}`;
+		}
+		return null;
+	} catch (e) {
+		return e.message || "parse error";
+	}
+}
+function tamaguiToTailwind(source, options = {}) {
+	const { renameComponents = true } = options;
+	const mediaKeys = options.grammarConfig?.mediaNames ? namesToSet(options.grammarConfig.mediaNames) : options.media ? new Set(Array.isArray(options.media) ? options.media : Object.keys(options.media)) : new Set(defaultMediaKeys);
+	const shorthands = options.grammarConfig?.shorthands ?? options.shorthands ?? defaultShorthands;
+	const grammarConfig = createTransformGrammarConfig(options, mediaKeys, shorthands);
+	const ctx = {
+		mediaKeys,
+		componentAllow: new Set(options.components ?? []),
+		shorthands,
+		grammarConfig,
+		modifierRegistry: createModifierRegistry(grammarConfig).registry
+	};
+	let ast;
+	try {
+		ast = parse(source, {
+			sourceType: "module",
+			plugins: ["jsx", "typescript"],
+			errorRecovery: true
+		});
+	} catch {
+		return source;
+	}
+	if (ast.errors && ast.errors.length > 0) {
+		return source;
+	}
+	let didTransform = false;
+	traverse(ast, { JSXOpeningElement(path) {
+		const node = path.node;
+		const resolved = resolveTamaguiComponent(path, ctx);
+		if (resolved === null) return;
+		const { name: componentName, isSimpleKnown, isPlainIdentifier } = resolved;
+		if (node.attributes.some((a) => t.isJSXSpreadAttribute(a))) return;
+		const hasDynamicClassName = node.attributes.some((attr) => t.isJSXAttribute(attr) && attr.name.name === "className" && getStringValue(attr.value) === null);
+		if (hasDynamicClassName) return;
+		const hasClassName = node.attributes.some((attr) => t.isJSXAttribute(attr) && attr.name.name === "className");
+		const hasNeighboringStyleProp = node.attributes.some((attr) => {
+			if (!t.isJSXAttribute(attr) || attr.name.name === "className") return false;
+			const name = attr.name.name;
+			return isConvertibleStyleProp(resolveShorthand(ctx, name));
+		});
+		if (hasClassName && hasNeighboringStyleProp) return;
+		const classes = [];
+		const keptAttrs = [];
+		let existingClassName = null;
+		const blockedLeafKeys = /* @__PURE__ */ new Set();
+		for (const a of node.attributes) {
+			if (t.isJSXAttribute(a) && a.name.name === "className") {
+				const v = getStringValue(a.value);
+				if (v) {
+					for (const tok of v.split(/\s+/)) {
+						if (tok) for (const k of leafKeysOfClassToken(tok)) blockedLeafKeys.add(k);
+					}
+				}
+			}
+		}
+		const implicitClasses = [];
+		if (componentName === "XStack") implicitClasses.push("flex", "flex-row");
+		else if (componentName === "YStack") implicitClasses.push("flex", "flex-col");
+		else if (componentName === "ZStack") implicitClasses.push("relative");
+		const styleEntries = [];
+		for (const attr of node.attributes) {
+			if (!t.isJSXAttribute(attr)) {
+				keptAttrs.push(attr);
+				continue;
+			}
+			const name = attr.name.name;
+			if (name === "className") {
+				existingClassName = attr;
+				continue;
+			}
+			styleEntries.push({
+				attr,
+				fullProp: resolveShorthand(ctx, name),
+				cls: propValueToClass(ctx, name, attr.value)
+			});
+		}
+		const retainedLeafKeys = new Set(blockedLeafKeys);
+		for (const e of styleEntries) {
+			if (e.cls === null && isConvertibleStyleProp(e.fullProp)) {
+				for (const k of leafKeysOfProp(e.fullProp)) retainedLeafKeys.add(k);
+			}
+		}
+		for (const c of implicitClasses) {
+			if (!overlapsSet(leafKeysOfClassToken(c), retainedLeafKeys)) classes.push(c);
+		}
+		for (const e of styleEntries) {
+			if (e.cls !== null && !overlapsSet(leafKeysOfProp(e.fullProp), retainedLeafKeys)) {
+				classes.push(e.cls);
+			} else {
+				keptAttrs.push(e.attr);
+			}
+		}
+		if (classes.length > 0) {
+			const classStr = classes.join(" ");
+			if (existingClassName) {
+				const existingVal = getStringValue(existingClassName.value);
+				if (existingVal !== null) {
+					existingClassName.value = t.stringLiteral(existingVal ? `${classStr} ${existingVal}` : classStr);
+					keptAttrs.unshift(existingClassName);
+				} else if (t.isJSXExpressionContainer(existingClassName.value) && !t.isJSXEmptyExpression(existingClassName.value.expression)) {
+					const expr = existingClassName.value.expression;
+					existingClassName.value = t.jsxExpressionContainer(t.templateLiteral([t.templateElement({
+						raw: `${classStr} `,
+						cooked: `${classStr} `
+					}, false), t.templateElement({
+						raw: "",
+						cooked: ""
+					}, true)], [expr]));
+					keptAttrs.unshift(existingClassName);
+				} else {
+					keptAttrs.unshift(t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral(classStr)));
+				}
+			} else {
+				keptAttrs.unshift(t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral(classStr)));
+			}
+		} else if (existingClassName) {
+			keptAttrs.unshift(existingClassName);
+		}
+		node.attributes = keptAttrs;
+		if (classes.length > 0) didTransform = true;
+		if (renameComponents && isSimpleKnown && isPlainIdentifier) {
+			const tag = componentToTag[componentName];
+			node.name = t.jsxIdentifier(tag);
+			const parent = path.parent;
+			if (t.isJSXElement(parent) && parent.closingElement) {
+				parent.closingElement.name = t.jsxIdentifier(tag);
+			}
+			didTransform = true;
+		}
+	} });
+	if (!didTransform) return source;
+	const output = generate(ast, {
+		retainLines: true,
+		concise: false
+	});
+	return output.code;
+}
+const knownCompoundComponents = /* @__PURE__ */ new Set([
+	"Sheet.Frame",
+	"Sheet.Overlay",
+	"Sheet.Handle",
+	"Sheet.ScrollView",
+	"Sheet.Container",
+	"Dialog.Content",
+	"Dialog.Overlay",
+	"Popover.Content",
+	"Tabs.Tab"
+]);
+function isTamaguiSource(source) {
+	return source === "tamagui" || source.startsWith("@tamagui/");
+}
+function resolveTamaguiComponent(path, ctx) {
+	const nameNode = path.node.name;
+	let baseName;
+	let memberChain = [];
+	const isPlainIdentifier = t.isJSXIdentifier(nameNode);
+	if (t.isJSXIdentifier(nameNode)) {
+		baseName = nameNode.name;
+	} else if (t.isJSXMemberExpression(nameNode)) {
+		const parts = [];
+		let cur = nameNode;
+		while (t.isJSXMemberExpression(cur)) {
+			parts.unshift(cur.property.name);
+			cur = cur.object;
+		}
+		if (!t.isJSXIdentifier(cur)) return null;
+		baseName = cur.name;
+		memberChain = parts;
+	} else {
+		return null;
+	}
+	const binding = path.scope?.getBinding?.(baseName);
+	let tamaguiBase;
+	if (binding) {
+		const bnode = binding.path.node;
+		if (t.isImportSpecifier(bnode) || t.isImportDefaultSpecifier(bnode) || t.isImportNamespaceSpecifier(bnode)) {
+			const decl = binding.path.parent;
+			const source = t.isImportDeclaration(decl) ? String(decl.source.value) : "";
+			if (!isTamaguiSource(source)) return null;
+			if (t.isImportNamespaceSpecifier(bnode)) {
+				if (memberChain.length === 0) return null;
+				tamaguiBase = memberChain[0];
+				memberChain = memberChain.slice(1);
+			} else if (t.isImportSpecifier(bnode)) {
+				const imported = bnode.imported;
+				tamaguiBase = t.isIdentifier(imported) ? imported.name : String(imported.value);
+			} else {
+				return null;
+			}
+		} else {
+			return null;
+		}
+	} else {
+		tamaguiBase = baseName;
+	}
+	const name = memberChain.length ? [tamaguiBase, ...memberChain].join(".") : tamaguiBase;
+	const isSimpleKnown = memberChain.length === 0 && name in componentToTag;
+	if (!isSimpleKnown && !knownCompoundComponents.has(name) && !ctx.componentAllow.has(name)) {
+		return null;
+	}
+	return {
+		name,
+		isSimpleKnown,
+		isPlainIdentifier
+	};
+}
+function classPrefixOf(token) {
+	const noMod = token.slice(token.lastIndexOf(":") + 1);
+	const core = noMod[0] === "-" ? noMod.slice(1) : noMod;
+	const dash = core.indexOf("-");
+	return dash === -1 ? core : core.slice(0, dash);
+}
+const leafExpansion = {
+	padding: [
+		"paddingTop",
+		"paddingRight",
+		"paddingBottom",
+		"paddingLeft"
+	],
+	paddingHorizontal: ["paddingLeft", "paddingRight"],
+	paddingVertical: ["paddingTop", "paddingBottom"],
+	margin: [
+		"marginTop",
+		"marginRight",
+		"marginBottom",
+		"marginLeft"
+	],
+	marginHorizontal: ["marginLeft", "marginRight"],
+	marginVertical: ["marginTop", "marginBottom"],
+	inset: [
+		"top",
+		"right",
+		"bottom",
+		"left"
+	],
+	gap: [
+		"gap",
+		"rowGap",
+		"columnGap"
+	],
+	borderWidth: [
+		"borderTopWidth",
+		"borderRightWidth",
+		"borderBottomWidth",
+		"borderLeftWidth"
+	],
+	borderColor: [
+		"borderTopColor",
+		"borderRightColor",
+		"borderBottomColor",
+		"borderLeftColor"
+	],
+	borderRadius: [
+		"borderTopLeftRadius",
+		"borderTopRightRadius",
+		"borderBottomLeftRadius",
+		"borderBottomRightRadius"
+	]
+};
+function leafKeysOfProp(fullProp) {
+	return leafExpansion[fullProp] ?? [fullProp];
+}
+const prefixToProp = (() => {
+	const m = {};
+	for (const [prop, prefix] of Object.entries(propToTailwindPrefix)) {
+		if (prefix && !(prefix in m)) m[prefix] = prop;
+	}
+	return m;
+})();
+function leafKeysOfClassToken(token) {
+	const prefix = classPrefixOf(token);
+	return leafKeysOfProp(prefixToProp[prefix] ?? prefix);
+}
+function overlapsSet(keys, set) {
+	return keys.some((k) => set.has(k));
+}
+function isConvertibleStyleProp(fullProp) {
+	return propToTailwindPrefix[fullProp] !== void 0 || fullProp in standaloneValueProps;
+}
+function propValueToClass(ctx, propName, value) {
+	const fullProp = resolveShorthand(ctx, propName);
+	if (propToTailwindPrefix[fullProp] === void 0) return null;
+	const strVal = getStringValue(value);
+	const numVal = getNumericValue(value);
+	if (strVal !== null) {
+		const parsed = parseValue(strVal, ctx.modifierRegistry);
+		if (!parsed.ok) return null;
+		const classes = [];
+		if (parsed.value.base !== null) {
+			const base = payloadToClass(ctx, fullProp, parsed.value.base, []);
+			if (base === null) return null;
+			classes.push(base);
+		}
+		for (const clause of parsed.value.clauses) {
+			const conditional = payloadToClass(ctx, fullProp, clause.payload, clause.modifiers);
+			if (conditional === null) return null;
+			classes.push(conditional);
+		}
+		return classes.length ? classes.join(" ") : null;
+	}
+	if (numVal === null) return null;
+	const formatted = formatNumericValue(fullProp, numVal);
+	if (formatted === null) return null;
+	return formatCandidate({
+		prop: fullProp,
+		value: formatted.value,
+		valueKind: formatted.valueKind,
+		modifiers: void 0
+	}, ctx.grammarConfig);
+}
+function payloadToClass(ctx, fullProp, payload, modifiers) {
+	let formatted;
+	if (standaloneValueProps[fullProp]?.[payload]) {
+		formatted = {
+			value: payload,
+			valueKind: "enum"
+		};
+	} else {
+		formatted = formatStringValue(ctx, fullProp, payload);
+		if (formatted === null && /^-?\d+(?:\.\d+)?$/.test(payload)) {
+			const category = getTokenCategory(fullProp);
+			if (!category || ctx.grammarConfig.tokenNames?.[category] !== void 0) {
+				formatted = formatNumericValue(fullProp, Number(payload));
+			}
+		}
+	}
+	if (formatted === null) return null;
+	return formatCandidate({
+		prop: fullProp,
+		value: formatted.value,
+		valueKind: formatted.valueKind,
+		modifiers: modifiers.length ? modifiers : void 0
+	}, ctx.grammarConfig);
+}
+function getStringValue(value) {
+	if (!value) return null;
+	if (t.isStringLiteral(value)) return value.value;
+	if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) {
+		return value.expression.value;
+	}
+	if (t.isJSXExpressionContainer(value) && t.isTemplateLiteral(value.expression)) {
+		if (value.expression.expressions.length === 0 && value.expression.quasis.length === 1) {
+			return value.expression.quasis[0].value.raw;
+		}
+	}
+	return null;
+}
+function getNumericValue(value) {
+	if (!value) return null;
+	if (t.isJSXExpressionContainer(value)) {
+		if (t.isNumericLiteral(value.expression)) return value.expression.value;
+		if (t.isUnaryExpression(value.expression) && value.expression.operator === "-" && t.isNumericLiteral(value.expression.argument)) {
+			return -value.expression.argument.value;
+		}
+	}
+	return null;
+}
+function resolveShorthand(ctx, name) {
+	return ctx.shorthands[name] || name;
+}
+function hasConfiguredName(names, value) {
+	if (!names) return false;
+	if (Array.isArray(names)) return names.includes(value);
+	if (names instanceof Set) return names.has(value);
+	return Object.prototype.hasOwnProperty.call(names, value);
+}
+function formatStringValue(ctx, prop, value) {
+	const category = getTokenCategory(prop);
+	if (prop !== "fontWeight" && category && hasConfiguredName(ctx.grammarConfig.tokenNames?.[category], value)) {
+		if (category === "color") {
+			const mapped = getV6ThemeName(value);
+			return mapped ? {
+				value: mapped,
+				valueKind: "token"
+			} : null;
+		}
+		return {
+			value,
+			valueKind: "token"
+		};
+	}
+	if (prop === "fontWeight") {
+		return fontWeightNames[value] ? {
+			value,
+			valueKind: "enum"
+		} : null;
+	}
+	if (prop === "zIndex" && /^\d+$/.test(value)) {
+		return {
+			value,
+			valueKind: "convenience"
+		};
+	}
+	if (/^-?\d+(\.\d+)?$/.test(value)) return null;
+	if (value.endsWith("%")) {
+		const exact = {
+			"100%": "full",
+			"50%": "1/2",
+			"25%": "1/4",
+			"75%": "3/4"
+		};
+		if (getTokenCategory(prop) === "size" && exact[value]) {
+			return {
+				value: exact[value],
+				valueKind: "convenience"
+			};
+		}
+		return {
+			value,
+			valueKind: "arbitrary"
+		};
+	}
+	if (value === "auto" && getTokenCategory(prop) === "size") {
+		return {
+			value,
+			valueKind: "convenience"
+		};
+	}
+	if (prop === "fontFamily") return {
+		value,
+		valueKind: "arbitrary"
+	};
+	if (value.includes("(") || value.includes(" ") || value.includes("_") || value.startsWith("#") || value.startsWith("-") || /^[\d.]+[a-z%]/i.test(value)) {
+		return {
+			value,
+			valueKind: "arbitrary"
+		};
+	}
+	return {
+		value,
+		valueKind: "arbitrary"
+	};
+}
+const pxLengthProps = /* @__PURE__ */ new Set([
+	"width",
+	"height",
+	"minWidth",
+	"maxWidth",
+	"minHeight",
+	"maxHeight",
+	"flexBasis",
+	"padding",
+	"paddingTop",
+	"paddingRight",
+	"paddingBottom",
+	"paddingLeft",
+	"paddingHorizontal",
+	"paddingVertical",
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft",
+	"marginHorizontal",
+	"marginVertical",
+	"gap",
+	"rowGap",
+	"columnGap",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"inset",
+	"borderRadius",
+	"borderTopLeftRadius",
+	"borderTopRightRadius",
+	"borderBottomLeftRadius",
+	"borderBottomRightRadius",
+	"fontSize",
+	"letterSpacing",
+	"lineHeight"
+]);
+function formatNumericValue(prop, value) {
+	if (prop === "opacity") {
+		const pct = value * 100;
+		return Number.isInteger(pct) ? {
+			value: String(pct),
+			valueKind: "convenience"
+		} : {
+			value: String(value),
+			valueKind: "arbitrary"
+		};
+	}
+	if (prop === "aspectRatio") return {
+		value: String(value),
+		valueKind: "arbitrary"
+	};
+	if (prop === "scale" || prop === "scaleX" || prop === "scaleY") {
+		if (value === 0) return {
+			value: "0",
+			valueKind: "convenience"
+		};
+		if (value === 1) return {
+			value: "100",
+			valueKind: "convenience"
+		};
+		return {
+			value: String(value),
+			valueKind: "arbitrary"
+		};
+	}
+	if (prop === "flex") {
+		return value === 1 ? {
+			value: "1",
+			valueKind: "convenience"
+		} : {
+			value: String(value),
+			valueKind: "arbitrary"
+		};
+	}
+	if (prop === "flexGrow" || prop === "flexShrink") {
+		return {
+			value: String(value),
+			valueKind: "arbitrary"
+		};
+	}
+	if (prop === "zIndex") {
+		return Number.isInteger(value) && value >= 0 ? {
+			value: String(value),
+			valueKind: "convenience"
+		} : {
+			value: String(value),
+			valueKind: "arbitrary"
+		};
+	}
+	if (prop === "fontWeight") {
+		return fontWeightNames[String(value)] ? {
+			value: String(value),
+			valueKind: "enum"
+		} : null;
+	}
+	if (prop === "rotate") return null;
+	if (prop === "x" || prop === "y") {
+		return {
+			value: `${value}px`,
+			valueKind: "arbitrary"
+		};
+	}
+	if (prop.includes("Width") && prop.startsWith("border")) {
+		return {
+			value: `${value}px`,
+			valueKind: "arbitrary"
+		};
+	}
+	if (pxLengthProps.has(prop)) {
+		return {
+			value: `${value}px`,
+			valueKind: "arbitrary"
+		};
+	}
+	return null;
+}
+
+export { findParseError, tamaguiToTailwind };
+//# sourceMappingURL=transform.mjs.map