styled-components-to-stylex-codemod 0.0.48 → 0.0.49

package/dist/{typescript-analysis-C_25uBrt.mjs → typescript-analysis-CmIDxfLv.mjs}

@@ -102,6 +102,7 @@ function readReactComponentFromFunction(node, checker, exportedNames, defaultExp
 		parameters: readParameters(node.parameters, checker),
 		restProps: readRestProps(node.parameters[0], node.body),
 		bodySupportsSxProp: readsSxProp(node.parameters[0], node.body),
+		bodySxTarget: detectSxTarget(node.parameters[0], node.body),
 		checker,
 		location: node
 	});
@@ -117,6 +118,7 @@ function readReactComponentFromVariable(name, node, propTypeNode, statement, che
 		parameters: readParameters(node.parameters, checker),
 		restProps: readRestProps(node.parameters[0], node.body),
 		bodySupportsSxProp: readsSxProp(node.parameters[0], node.body),
+		bodySxTarget: detectSxTarget(node.parameters[0], node.body),
 		checker,
 		location: node
 	});
@@ -141,6 +143,7 @@ function buildComponentMetadata(args) {
 		restProps: args.restProps,
 		hasIndexSignature: propType ? hasIndexSignature(propType, args.checker) : false,
 		supportsSxProp: explicitPropNames.includes("sx") || supportsResolvedSxProp || args.bodySupportsSxProp === true,
+		...args.bodySxTarget ? { sxTarget: args.bodySxTarget } : {},
 		sxExcludedProperties,
 		...sxAllowedProperties !== void 0 ? { sxAllowedProperties } : {}
 	};
@@ -591,6 +594,120 @@ function readsSxProp(parameter, body) {
 	ts.forEachChild(body, visit);
 	return found;
 }
+function detectSxTarget(parameter, body) {
+	if (!body) return;
+	const sxNames = collectSxBindingNames(parameter, body);
+	if (sxNames.size === 0) return;
+	const sxPropContainerNames = collectSxPropContainerNames(parameter);
+	const sxPropsNames = collectStylexPropsBindingNames(body, sxNames, sxPropContainerNames);
+	const root = returnedJsxRoot(body);
+	if (!root) return;
+	if (jsxOpeningUsesSx(jsxRootOpening(root), sxNames, sxPropsNames, sxPropContainerNames)) return "root";
+	return jsxChildrenUseSx(root, sxNames, sxPropsNames, sxPropContainerNames) ? "inner" : void 0;
+}
+function collectSxBindingNames(parameter, body) {
+	const names = /* @__PURE__ */ new Set();
+	if (parameter?.name && ts.isObjectBindingPattern(parameter.name)) collectBindingElementLocalNames(parameter.name, "sx", names);
+	else names.add("sx");
+	if (parameter?.name && ts.isIdentifier(parameter.name)) {
+		const propsName = parameter.name.text;
+		const visit = (node) => {
+			if (ts.isVariableDeclaration(node) && ts.isObjectBindingPattern(node.name) && node.initializer && isIdentifierNamed(unwrapExpression(node.initializer), propsName)) collectBindingElementLocalNames(node.name, "sx", names);
+			ts.forEachChild(node, visit);
+		};
+		ts.forEachChild(body, visit);
+	}
+	return names;
+}
+function collectBindingElementLocalNames(pattern, propertyName, names) {
+	for (const element of pattern.elements) if (bindingElementPropertyNameText(element) === propertyName && ts.isIdentifier(element.name)) names.add(element.name.text);
+}
+function collectSxPropContainerNames(parameter) {
+	const names = /* @__PURE__ */ new Set();
+	if (parameter?.name && ts.isIdentifier(parameter.name)) names.add(parameter.name.text);
+	return names;
+}
+function bindingElementPropertyNameText(element) {
+	if (element.propertyName) return ts.isIdentifier(element.propertyName) || ts.isStringLiteral(element.propertyName) ? element.propertyName.text : null;
+	return ts.isIdentifier(element.name) ? element.name.text : null;
+}
+function collectStylexPropsBindingNames(body, sxNames, sxPropContainerNames) {
+	const names = /* @__PURE__ */ new Set();
+	const visit = (node) => {
+		if (ts.isVariableDeclaration(node) && node.initializer && isStylexPropsCallWithSx(node.initializer, sxNames, sxPropContainerNames)) {
+			if (ts.isIdentifier(node.name)) names.add(node.name.text);
+			else if (ts.isObjectBindingPattern(node.name)) collectBindingPatternIdentifierNames(node.name, names);
+		}
+		ts.forEachChild(node, visit);
+	};
+	ts.forEachChild(body, visit);
+	return names;
+}
+function collectBindingPatternIdentifierNames(pattern, names) {
+	for (const element of pattern.elements) if (ts.isIdentifier(element.name)) names.add(element.name.text);
+}
+function isStylexPropsCallWithSx(expr, sxNames, sxPropContainerNames) {
+	const unwrapped = unwrapExpression(expr);
+	const noSxPropsNames = /* @__PURE__ */ new Set();
+	return ts.isCallExpression(unwrapped) && isStylexPropsCallee(unwrapped.expression) && unwrapped.arguments.some((arg) => expressionReferencesNames(arg, sxNames, noSxPropsNames, sxPropContainerNames));
+}
+function isStylexPropsCallee(expr) {
+	return ts.isPropertyAccessExpression(expr) && expr.name.text === "props" && ts.isIdentifier(expr.expression) && expr.expression.text === "stylex";
+}
+function returnedJsxRoot(body) {
+	if (ts.isJsxElement(body) || ts.isJsxSelfClosingElement(body)) return body;
+	if (!ts.isBlock(body)) return null;
+	for (const statement of body.statements) {
+		if (!ts.isReturnStatement(statement) || !statement.expression) continue;
+		const expr = unwrapExpression(statement.expression);
+		if (ts.isJsxElement(expr) || ts.isJsxSelfClosingElement(expr)) return expr;
+	}
+	return null;
+}
+function jsxChildrenUseSx(root, sxNames, sxPropsNames, sxPropContainerNames) {
+	if (!ts.isJsxElement(root)) return false;
+	let found = false;
+	const visit = (node) => {
+		if (found) return;
+		if (functionShadowsSxReference(node, sxNames, sxPropContainerNames)) return;
+		if (ts.isJsxElement(node) && jsxOpeningUsesSx(node.openingElement, sxNames, sxPropsNames, sxPropContainerNames) || ts.isJsxSelfClosingElement(node) && jsxOpeningUsesSx(node, sxNames, sxPropsNames, sxPropContainerNames)) {
+			found = true;
+			return;
+		}
+		ts.forEachChild(node, visit);
+	};
+	for (const child of root.children) visit(child);
+	return found;
+}
+function jsxRootOpening(root) {
+	return ts.isJsxElement(root) ? root.openingElement : root;
+}
+function jsxOpeningUsesSx(opening, sxNames, sxPropsNames, sxPropContainerNames) {
+	return opening.attributes.properties.some((attribute) => {
+		if (ts.isJsxSpreadAttribute(attribute)) return expressionReferencesNames(attribute.expression, sxNames, sxPropsNames, sxPropContainerNames);
+		if (!ts.isIdentifier(attribute.name) || !attribute.initializer) return false;
+		if (!ts.isJsxExpression(attribute.initializer) || !attribute.initializer.expression) return false;
+		if (attribute.name.text === "className" || attribute.name.text === "style") return expressionReferencesStylexPropsBinding(attribute.initializer.expression, sxPropsNames);
+		if (attribute.name.text !== "sx") return false;
+		return expressionReferencesNames(attribute.initializer.expression, sxNames, sxPropsNames, sxPropContainerNames);
+	});
+}
+function expressionReferencesStylexPropsBinding(expr, sxPropsNames) {
+	const unwrapped = unwrapExpression(expr);
+	return ts.isIdentifier(unwrapped) && sxPropsNames.has(unwrapped.text);
+}
+function expressionReferencesNames(expr, sxNames, sxPropsNames, sxPropContainerNames) {
+	const unwrapped = unwrapExpression(expr);
+	if (ts.isIdentifier(unwrapped)) return sxNames.has(unwrapped.text) || sxPropsNames.has(unwrapped.text);
+	if (ts.isPropertyAccessExpression(unwrapped) && unwrapped.name.text === "sx" && ts.isIdentifier(unwrapped.expression)) return sxPropContainerNames.has(unwrapped.expression.text);
+	return isStylexPropsCallWithSx(unwrapped, sxNames, sxPropContainerNames);
+}
+function functionShadowsSxReference(node, sxNames, sxPropContainerNames) {
+	if (!isFunctionWithParameters(node)) return false;
+	for (const name of sxPropContainerNames) if (node.parameters.some((parameter) => isBindingNameNamed(parameter.name, name))) return true;
+	for (const name of sxNames) if (node.parameters.some((parameter) => isBindingNameNamed(parameter.name, name))) return true;
+	return node.parameters.some((parameter) => ts.isObjectBindingPattern(parameter.name) && bindingPatternHasName(parameter.name, "sx"));
+}
 function isFunctionWithParameterNamed(node, name) {
 	return isFunctionWithParameters(node) ? node.parameters.some((parameter) => isBindingNameNamed(parameter.name, name)) : false;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components-to-stylex-codemod",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "description": "Codemod to transform styled-components to StyleX",
   "keywords": [
     "codemod",