@react-spectrum/codemods 3.0.0-nightly-3f44370de-241118 → 3.0.0-nightly-b3a4d6c11-241119

package/dist/s1-to-s2/src/codemods/dimensions.js

@@ -140,7 +140,7 @@ const UNIT_RE = /(%|px|em|rem|vw|vh|auto|cm|mm|in|pt|pc|ex|ch|rem|vmin|vmax|fr)$
 const FUNC_RE = /^\s*\w+\(/;
 // const SPECTRUM_VARIABLE_RE = /(static-)?size-\d+|single-line-(height|width)/g;
 const SIZING_RE = /auto|100vh|min-content|max-content|fit-content/;
-function convertDimension(value, toPixels = false) {
+function convertDimension(value, type) {
     let pixelValue;
     if (typeof value === 'number') {
         pixelValue = value;
@@ -170,10 +170,10 @@ function convertDimension(value, toPixels = false) {
     if (pixelValue == null) {
         throw new Error('invalid dimension: ' + value);
     }
-    if (toPixels) {
+    if (type === 'px') {
         return `${pixelValue}px`;
     }
-    if (spacingValues.includes(pixelValue)) {
+    if (type === 'size' || spacingValues.includes(pixelValue)) {
         return pixelValue;
     }
     // TODO: Convert to rems? Find nearest value?
@@ -184,16 +184,16 @@ function convertGridTrack(value, toPixels = false) {
         return value;
     }
     else {
-        return convertDimension(value, toPixels);
+        return convertDimension(value, toPixels ? 'px' : 'space');
     }
 }
-function convertUnsafeDimension(value) {
+function convertUnsafeDimension(value, type) {
     if (typeof value === 'number') {
-        return convertDimension(value);
+        return convertDimension(value, type);
     }
     let m = value.match(/^var\(--spectrum-global-dimension-(static-)?size-(.*)\)$/);
     if (m) {
-        return convertDimension(`${m[1] || ''}size-${m[2]}`);
+        return convertDimension(`${m[1] || ''}size-${m[2]}`, type);
     }
     return null;
 }

package/dist/s1-to-s2/src/codemods/styleProps.js

@@ -63,7 +63,21 @@ function getStylePropValue(prop, value, element, colorVersion, condition = '') {
         case 'maxWidth':
         case 'height':
         case 'minHeight':
-        case 'maxHeight':
+        case 'maxHeight': {
+            if (value.type === 'StringLiteral' || value.type === 'NumericLiteral') {
+                let val = (0, dimensions_1.convertDimension)(value.value, 'size');
+                if (val != null) {
+                    return {
+                        macroValues: [{ key: mappedProp, value: val }]
+                    };
+                }
+            }
+            else if (value.type === 'ObjectExpression') {
+                return getResponsiveValue(prop, value, element, colorVersion);
+            }
+            // return [mappedProp, customProp, [[customProp, value]]];
+            return null;
+        }
         case 'margin':
         case 'marginStart':
         case 'marginEnd':
@@ -79,7 +93,7 @@ function getStylePropValue(prop, value, element, colorVersion, condition = '') {
         case 'end':
         case 'flexBasis': {
             if (value.type === 'StringLiteral' || value.type === 'NumericLiteral') {
-                let val = (0, dimensions_1.convertDimension)(value.value);
+                let val = (0, dimensions_1.convertDimension)(value.value, 'space');
                 if (val != null) {
                     return {
                         macroValues: [{ key: mappedProp, value: val }]
@@ -182,7 +196,7 @@ function getStylePropValue(prop, value, element, colorVersion, condition = '') {
         case 'rowGap':
             if (element === 'Flex' || element === 'Grid') {
                 if (value.type === 'StringLiteral' || value.type === 'NumericLiteral') {
-                    let val = (0, dimensions_1.convertDimension)(value.value);
+                    let val = (0, dimensions_1.convertDimension)(value.value, 'space');
                     if (val != null) {
                         return {
                             macroValues: [{ key: mappedProp, value: val }]
@@ -308,7 +322,7 @@ function getStylePropValue(prop, value, element, colorVersion, condition = '') {
         case 'paddingBottom':
             if (element === 'View') {
                 if (value.type === 'StringLiteral' || value.type === 'NumericLiteral') {
-                    let val = (0, dimensions_1.convertDimension)(value.value);
+                    let val = (0, dimensions_1.convertDimension)(value.value, 'space');
                     if (val != null) {
                         return {
                             macroValues: [{ key: mappedProp, value: val }]
@@ -410,7 +424,7 @@ function getStylePropValue(prop, value, element, colorVersion, condition = '') {
             // Try to automatically convert size prop to a macro value for components that supported size.
             if (element === 'ColorArea' || element === 'ColorWheel') {
                 if (value.type === 'StringLiteral' || value.type === 'NumericLiteral') {
-                    let val = (0, dimensions_1.convertDimension)(value.value);
+                    let val = (0, dimensions_1.convertDimension)(value.value, 'size');
                     if (val != null) {
                         return {
                             macroValues: [{ key: 'size', value: val }]

package/dist/s1-to-s2/src/codemods/transforms.js

@@ -541,7 +541,7 @@ function convertDimensionValueToPx(path, options) {
     if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propToConvertValue) {
         if (t.isStringLiteral(attrPath.node.value)) {
             try {
-                let value = (0, dimensions_1.convertDimension)(attrPath.node.value.value);
+                let value = (0, dimensions_1.convertDimension)(attrPath.node.value.value, 'size');
                 if (value && typeof value === 'number') {
                     attrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(value));
                 }

package/dist/s1-to-s2/src/codemods/unsafeStyle.js

@@ -160,7 +160,12 @@ function handleProperty(element, property, value) {
         case 'maxWidth':
         case 'height':
         case 'minHeight':
-        case 'maxHeight':
+        case 'maxHeight': {
+            if (value.type === 'NumericLiteral' || value.type === 'StringLiteral') {
+                return (0, dimensions_1.convertUnsafeDimension)(value.value, 'size');
+            }
+            break;
+        }
         case 'margin':
         case 'marginInlineStart':
         case 'marginInlineEnd':
@@ -178,7 +183,7 @@ function handleProperty(element, property, value) {
         case 'insetInlineEnd':
         case 'flexBasis': {
             if (value.type === 'NumericLiteral' || value.type === 'StringLiteral') {
-                return (0, dimensions_1.convertUnsafeDimension)(value.value);
+                return (0, dimensions_1.convertUnsafeDimension)(value.value, 'space');
             }
             break;
         }
@@ -196,7 +201,7 @@ function handleProperty(element, property, value) {
         case 'columnGap': {
             if (element === 'View' || element === 'Flex' || element === 'Grid') {
                 if (value.type === 'NumericLiteral' || value.type === 'StringLiteral') {
-                    return (0, dimensions_1.convertUnsafeDimension)(value.value);
+                    return (0, dimensions_1.convertUnsafeDimension)(value.value, 'space');
                 }
             }
             break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/codemods",
-  "version": "3.0.0-nightly-3f44370de-241118",
+  "version": "3.0.0-nightly-b3a4d6c11-241119",
   "main": "dist/index.js",
   "source": "src/index.ts",
   "bin": "dist/index.js",
@@ -24,8 +24,8 @@
     "@babel/parser": "^7.24.5",
     "@babel/traverse": "^7.24.5",
     "@babel/types": "^7.24.5",
-    "@react-spectrum/s2": "^3.0.0-nightly-3f44370de-241118",
-    "@react-types/shared": "^3.0.0-nightly-3f44370de-241118",
+    "@react-spectrum/s2": "^3.0.0-nightly-b3a4d6c11-241119",
+    "@react-types/shared": "^3.0.0-nightly-b3a4d6c11-241119",
     "@types/node": "^20",
     "boxen": "^5.1.2",
     "build": "^0.1.4",