styled-components-to-stylex-codemod 0.0.27 → 0.0.28

package/dist/transform.mjs

@@ -719,6 +719,16 @@ function unwrapLogicalFallback(expr) {
 	return null;
 }
 /**
+* Returns true when `expr` is a `??` / `||` logical expression whose
+* right-hand side is a non-literal value (e.g., `props.fallbackColor`).
+*
+* Used to bail on theme resolution when the fallback references a runtime
+* value the user depends on — dropping it silently would change semantics.
+*/
+function hasNonLiteralLogicalFallback(expr) {
+	return isLogicalExpressionNode(expr) && (expr.operator === "??" || expr.operator === "||") && literalToStaticValue(expr.right) === null;
+}
+/**
 * Type guard for ConditionalExpression nodes.
 */
 function isConditionalExpressionNode(node) {
@@ -4542,6 +4552,14 @@ function printNode(node) {
 function areAllValuesSame(values) {
 	return values.length > 1 && values.every((value) => value === values[0]);
 }
+/**
+* Shorthands that StyleX requires to be fully expanded to physical longhands.
+* Unlike `padding`/`margin` (which StyleX's Babel plugin can expand internally),
+* `scrollPadding`/`scrollMargin` and their logical forms (Block/Inline) are not
+* recognized by `@stylexjs/valid-styles` and must always be written as
+* Top/Right/Bottom/Left.
+*/
+const PHYSICAL_ONLY_SHORTHANDS = new Set(["scrollMargin", "scrollPadding"]);
 function expandQuadValues(values) {
 	const top = values[0] ?? "";
 	const right = values[1] ?? top;
@@ -4573,12 +4591,13 @@ function splitDirectionalProperty(args) {
 	const bottom = values[2] ?? top;
 	const left = values[3] ?? right;
 	const withImportant = (value) => important ? `${value} !important` : value;
-	if (values.length === 1 && !important && !alwaysExpand) return [{
+	const physicalOnly = PHYSICAL_ONLY_SHORTHANDS.has(prop);
+	if (values.length === 1 && !important && !alwaysExpand && !physicalOnly) return [{
 		prop,
 		value: withImportant(top)
 	}];
 	const quad = expandQuadValues(values);
-	if (important) return [
+	if (important || physicalOnly) return [
 		{
 			prop: `${prop}Top`,
 			value: withImportant(quad[0])
@@ -15059,8 +15078,8 @@ function createThemeResolvers(args) {
 		const themeAccessExpr = unwrapLogicalFallback(bodyExpr) ?? bodyExpr;
 		const direct = resolveThemeValue(themeAccessExpr, cssProperty);
 		if (direct) {
-			if (isDirectionalThemeResult(direct)) return direct;
-			return wrapWithLogicalFallback(direct, bodyExpr, j);
+			if (hasNonLiteralLogicalFallback(bodyExpr)) return null;
+			return direct;
 		}
 		const paramName = expr.params?.[0]?.type === "Identifier" ? expr.params[0].name : null;
 		const unwrap = (node) => {
@@ -15094,8 +15113,8 @@ function createThemeResolvers(args) {
 		if (!themePath) return null;
 		const resolved = resolveThemePath(themePath, getNodeLocStart(unwrapped) ?? void 0, cssProperty);
 		if (!resolved) return null;
-		if (isDirectionalThemeResult(resolved)) return resolved;
-		return wrapWithLogicalFallback(resolved, bodyExpr, j);
+		if (hasNonLiteralLogicalFallback(bodyExpr)) return null;
+		return resolved;
 	};
 	return {
 		hasLocalThemeBinding,
@@ -15104,20 +15123,6 @@ function createThemeResolvers(args) {
 	};
 }
 /**
-* If `originalExpr` was a logical fallback (`X ?? "default"` / `X || "default"`),
-* wraps the resolved AST node in a LogicalExpression preserving the original
-* operator and fallback value.
-*
-* Returns null if the fallback (RHS) is not a static literal, because dynamic
-* references (e.g., `props.fallbackColor`) would be invalid in a static
-* `stylex.create()` context where `props` is not in scope.
-*/
-function wrapWithLogicalFallback(resolved, originalExpr, j) {
-	if (!isLogicalExpressionNode(originalExpr) || originalExpr.operator !== "??" && originalExpr.operator !== "||") return resolved;
-	if (literalToStaticValue(originalExpr.right) === null) return null;
-	return j.logicalExpression(originalExpr.operator, resolved, originalExpr.right);
-}
-/**
 * Type guard for the internal `__directional` tagged result.
 */
 function isDirectionalThemeResult(value) {
@@ -18255,11 +18260,10 @@ function tryResolveThemeAccess(node, ctx) {
 		type: "resolvedDirectional",
 		directional: res.directional
 	};
-	const resultExpr = appendLogicalFallback(expr.body, res.expr);
-	if (resultExpr === null) return null;
+	if (hasNonLiteralLogicalFallback(expr.body)) return null;
 	return {
 		type: "resolvedValue",
-		expr: resultExpr,
+		expr: res.expr,
 		imports: res.imports
 	};
 }
@@ -18272,8 +18276,8 @@ function tryResolveThemeAccess(node, ctx) {
 *   (LogicalExpression with `??` or `||` and theme access on the left)
 *
 * Returns the MemberExpression node, or null if the pattern doesn't match.
-* The fallback (right side of `??`/`||`) is preserved by the caller via
-* `appendLogicalFallback` so users can review and delete it.
+* The fallback (right side of `??`/`||`) is dropped because StyleX `defineVars`
+* tokens always resolve at runtime.
 */
 function extractThemeMemberExpression(body) {
 	if (!body || typeof body !== "object") return null;
@@ -18840,23 +18844,6 @@ function hasBooleanBranch(node) {
 	if (n.type === "Literal" && typeof n.value === "boolean") return true;
 	return false;
 }
-/**
-* If `body` is a logical fallback expression (`X ?? "default"` / `X || "default"`),
-* appends the operator and fallback literal to the resolved expression string.
-*
-* Returns `null` when the body IS a logical expression but the fallback is non-literal
-* (e.g., `props.fallbackColor`, `null`, `undefined`), signalling to the caller that
-* it's unsafe to drop the fallback — the caller should bail instead of resolving.
-*
-* Returns `resolvedExpr` unchanged when the body is NOT a logical expression (no
-* fallback to preserve).
-*/
-function appendLogicalFallback(body, resolvedExpr) {
-	if (!isLogicalExpressionNode(body) || body.operator !== "??" && body.operator !== "||") return resolvedExpr;
-	const fallback = literalToStaticValue(body.right);
-	if (fallback === null) return null;
-	return `${resolvedExpr} ${body.operator} ${JSON.stringify(fallback)}`;
-}
 
 //#endregion
 //#region src/internal/lower-rules/template-literals.ts

package/package.json

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