@sanity/ui-codemod 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/transforms/latest/label/label.js

@@ -0,0 +1,111 @@
+import "jscodeshift";
+import { addAttribute } from "../../../_chunks-es/addAttribute.js";
+import { transformComponent, getComponentLocalNames, getStyledComponentAliases, shouldTransformComponent, transformImport, transformStyledComponents, transformAttributes } from "../../../_chunks-es/transformStyledComponents.js";
+import { replaceElement } from "../../../_chunks-es/replaceElement.js";
+const LABEL_MODS = {
+  accent: {
+    type: "rename-mapped",
+    name: "tone",
+    mapping: {
+      true: "suggest"
+    }
+  },
+  flex: {
+    type: "style-mapped",
+    style: "flex",
+    mapping: {
+      none: "0 0 auto",
+      auto: "1 1 auto",
+      initial: "0 1 auto",
+      1: "1",
+      2: "2",
+      3: "3",
+      4: "4",
+      5: "5",
+      6: "6",
+      7: "7",
+      8: "8",
+      9: "9",
+      10: "10",
+      11: "11",
+      12: "12"
+    }
+  },
+  maxWidth: {
+    type: "style-mapped",
+    style: "maxWidth",
+    mapping: {
+      auto: "none",
+      fill: "100%",
+      0: "20rem",
+      1: "40rem",
+      2: "60rem",
+      3: "80rem",
+      4: "100rem",
+      5: "120rem"
+    }
+  },
+  textOverflow: {
+    type: "rename-mapped",
+    name: "truncate",
+    mapping: {
+      ellipsis: 1,
+      clip: 1
+    }
+  },
+  width: {
+    type: "style-mapped",
+    style: "width",
+    mapping: {
+      auto: "auto",
+      fill: "100%",
+      stretch: "stretch",
+      min: "min-content",
+      max: "max-content",
+      0: "20rem",
+      1: "40rem",
+      2: "60rem",
+      3: "80rem",
+      4: "100rem",
+      5: "120rem"
+    }
+  }
+}, TODO_WARNING = "Please double check the Label migration below";
+function transform(fileInfo, api, options) {
+  const { fromPackage, toPackage } = options || {};
+  return transformComponent(fileInfo, api, ({ j, root, markChanged }) => {
+    const localNames = getComponentLocalNames(j, root, "Label", options), styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      "Label",
+      fileInfo.path,
+      localNames,
+      options
+    );
+    shouldTransformComponent(j, root, "Label", localNames, options, styledAliases) && (transformImport(j, root, "Label", fromPackage, toPackage) && markChanged(), replaceElement(
+      j,
+      root,
+      () => !0,
+      {
+        element: "Label",
+        localNames
+      },
+      {
+        element: "Eyebrow",
+        callback: (path) => {
+          let changed = !1;
+          return transformAttributes(j, path, LABEL_MODS, TODO_WARNING) && (changed = !0), addAttribute(j, path.node, "as", "div") && (changed = !0), addAttribute(j, path.node, "trim", !0) && (changed = !0), changed;
+        }
+      }
+    ) && markChanged(), transformStyledComponents(j, root, styledAliases, () => !0, {
+      callback: (path) => {
+        let changed = !1;
+        return transformAttributes(j, path, LABEL_MODS, TODO_WARNING) && (changed = !0), addAttribute(j, path.node, "as", "div") && (changed = !0), addAttribute(j, path.node, "trim", !0) && (changed = !0), changed;
+      }
+    }) && markChanged());
+  });
+}
+export {
+  transform as default
+};
+//# sourceMappingURL=label.js.map

package/dist/transforms/latest/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sources":["../../../../src/transforms/latest/label/label.mods.ts","../../../../src/transforms/latest/label/label.ts"],"sourcesContent":["import type {AttributeMods} from '../../../types/AttributeMods'\n\n/** @internal */\nexport const LABEL_MODS: AttributeMods = {\n  accent: {\n    type: 'rename-mapped',\n    name: 'tone',\n    mapping: {\n      true: 'suggest',\n    },\n  },\n  flex: {\n    type: 'style-mapped',\n    style: 'flex',\n    mapping: {\n      none: '0 0 auto',\n      auto: '1 1 auto',\n      initial: '0 1 auto',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n      8: '8',\n      9: '9',\n      10: '10',\n      11: '11',\n      12: '12',\n    },\n  },\n  maxWidth: {\n    type: 'style-mapped',\n    style: 'maxWidth',\n    mapping: {\n      auto: 'none',\n      fill: '100%',\n      0: '20rem',\n      1: '40rem',\n      2: '60rem',\n      3: '80rem',\n      4: '100rem',\n      5: '120rem',\n    },\n  },\n  textOverflow: {\n    type: 'rename-mapped',\n    name: 'truncate',\n    mapping: {\n      ellipsis: 1,\n      clip: 1,\n    },\n  },\n  width: {\n    type: 'style-mapped',\n    style: 'width',\n    mapping: {\n      auto: 'auto',\n      fill: '100%',\n      stretch: 'stretch',\n      min: 'min-content',\n      max: 'max-content',\n      0: '20rem',\n      1: '40rem',\n      2: '60rem',\n      3: '80rem',\n      4: '100rem',\n      5: '120rem',\n    },\n  },\n}\n","import {type API, type FileInfo} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {addAttribute} from '../../../utils/addAttribute'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'\nimport {replaceElement} from '../../../utils/replaceElement'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {transformStyledComponents} from '../../../utils/transformStyledComponents'\nimport {LABEL_MODS} from './label.mods'\n\nconst TODO_WARNING = 'Please double check the Label migration below'\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Label', options)\n    const styledAliases = getStyledComponentAliases(\n      j,\n      root,\n      'Label',\n      fileInfo.path,\n      localNames,\n      options,\n    )\n\n    if (!shouldTransformComponent(j, root, 'Label', localNames, options, styledAliases)) {\n      return\n    }\n\n    if (transformImport(j, root, 'Label', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        () => true,\n        {\n          element: 'Label',\n          localNames,\n        },\n        {\n          element: 'Eyebrow',\n          callback: (path) => {\n            let changed = false\n\n            if (transformAttributes(j, path, LABEL_MODS, TODO_WARNING)) {\n              changed = true\n            }\n\n            if (addAttribute(j, path.node, 'as', 'div')) {\n              changed = true\n            }\n\n            if (addAttribute(j, path.node, 'trim', true)) {\n              changed = true\n            }\n\n            return changed\n          },\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      transformStyledComponents(j, root, styledAliases, () => true, {\n        callback: (path) => {\n          let changed = false\n\n          if (transformAttributes(j, path, LABEL_MODS, TODO_WARNING)) {\n            changed = true\n          }\n\n          if (addAttribute(j, path.node, 'as', 'div')) {\n            changed = true\n          }\n\n          if (addAttribute(j, path.node, 'trim', true)) {\n            changed = true\n          }\n\n          return changed\n        },\n      })\n    ) {\n      markChanged()\n    }\n  })\n}\n"],"names":[],"mappings":";;;;AAGO,MAAM,aAA4B;AAAA,EACvC,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAAA,EAEF,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,GCzDM,eAAe;AAGrB,SAAwB,UACtB,UACA,KACA,SACoB;AACpB,QAAM,EAAC,aAAa,UAAA,IAAa,WAAW,CAAA;AAE5C,SAAO,mBAAmB,UAAU,KAAK,CAAC,EAAC,GAAG,MAAM,kBAAiB;AACnE,UAAM,aAAa,uBAAuB,GAAG,MAAM,SAAS,OAAO,GAC7D,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAGG,6BAAyB,GAAG,MAAM,SAAS,YAAY,SAAS,aAAa,MAI9E,gBAAgB,GAAG,MAAM,SAAS,aAAa,SAAS,KAC1D,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,QACE,SAAS;AAAA,QACT;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS;AAClB,cAAI,UAAU;AAEd,iBAAI,oBAAoB,GAAG,MAAM,YAAY,YAAY,MACvD,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,MAAM,KAAK,MACxC,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,QAAQ,EAAI,MACzC,UAAU,KAGL;AAAA,QACT;AAAA,MAAA;AAAA,IACF,KAGF,eAIA,0BAA0B,GAAG,MAAM,eAAe,MAAM,IAAM;AAAA,MAC5D,UAAU,CAAC,SAAS;AAClB,YAAI,UAAU;AAEd,eAAI,oBAAoB,GAAG,MAAM,YAAY,YAAY,MACvD,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,MAAM,KAAK,MACxC,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,QAAQ,EAAI,MACzC,UAAU,KAGL;AAAA,MACT;AAAA,IAAA,CACD,KAED,YAAA;AAAA,EAEJ,CAAC;AACH;"}

package/dist/transforms/latest/stack/stack.d.ts

@@ -0,0 +1,18 @@
+import { API } from "jscodeshift";
+import { FileInfo } from "jscodeshift";
+import type { Options } from "jscodeshift";
+
+declare interface BaseOptions extends Options {
+  fromPackage?: string;
+  toPackage?: string;
+}
+
+/** @internal */
+declare function transform(
+  fileInfo: FileInfo,
+  api: API,
+  options?: BaseOptions,
+): string | undefined;
+export default transform;
+
+export {};

package/dist/transforms/latest/stack/stack.js

@@ -0,0 +1,67 @@
+import "jscodeshift";
+import { addAttribute } from "../../../_chunks-es/addAttribute.js";
+import { transformComponent, getComponentLocalNames, getStyledComponentAliases, shouldTransformComponent, transformImport, transformStyledComponents, transformAttributes } from "../../../_chunks-es/transformStyledComponents.js";
+import { replaceElement } from "../../../_chunks-es/replaceElement.js";
+import { FLEX_MODS } from "../../../_chunks-es/flex.mods.js";
+const STACK_MODS = {
+  sizing: {
+    type: "remove"
+  },
+  space: {
+    type: "rename-only",
+    name: "gap"
+  }
+}, STACK_TODO_WARNING = "Please double check the Stack migration below", FLEX_TODO_WARNING = "Please double check the Flex migration below", STYLED_TODO_WARNING = "Please double check styled(Stack) migration below";
+function replaceWithFlex(attrs) {
+  return attrs ? attrs.some(
+    (attr) => attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && (attr.name.name.startsWith("padding") || attr.name.name.startsWith("margin") || attr.name.name.startsWith("overflow") || attr.name.name.startsWith("flex") || attr.name.name.endsWith("height") || attr.name.name.endsWith("width"))
+  ) : !1;
+}
+function transform(fileInfo, api, options) {
+  const { fromPackage, toPackage } = options || {};
+  return transformComponent(fileInfo, api, ({ j, root, markChanged }) => {
+    const localNames = getComponentLocalNames(j, root, "Stack", options), styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      "Stack",
+      fileInfo.path,
+      localNames,
+      options
+    );
+    shouldTransformComponent(j, root, "Stack", localNames, options, styledAliases) && (transformImport(j, root, "Stack", fromPackage, toPackage) && markChanged(), replaceElement(
+      j,
+      root,
+      (attrs) => replaceWithFlex(attrs),
+      {
+        element: "Stack",
+        localNames
+      },
+      {
+        element: "Flex",
+        callback: (path) => {
+          let changed = !1;
+          return addAttribute(j, path.node, "flexDirection", "column") && (changed = !0), transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING) && (changed = !0), changed;
+        }
+      }
+    ) && markChanged(), replaceElement(
+      j,
+      root,
+      (attrs) => !replaceWithFlex(attrs),
+      {
+        element: "Stack",
+        localNames
+      },
+      {
+        element: "VStack",
+        callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING)
+      }
+    ) && markChanged(), transformStyledComponents(j, root, styledAliases, (attrs) => !replaceWithFlex(attrs), {
+      warning: STYLED_TODO_WARNING,
+      callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING)
+    }) && markChanged());
+  });
+}
+export {
+  transform as default
+};
+//# sourceMappingURL=stack.js.map

package/dist/transforms/latest/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../../../src/transforms/latest/stack/stack.mods.ts","../../../../src/transforms/latest/stack/stack.ts"],"sourcesContent":["import type {AttributeMods} from '../../../types/AttributeMods'\n\n/** @internal */\nexport const STACK_MODS: AttributeMods = {\n  sizing: {\n    type: 'remove',\n  },\n  space: {\n    type: 'rename-only',\n    name: 'gap',\n  },\n}\n","import {type API, type FileInfo, type JSXElement} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {addAttribute} from '../../../utils/addAttribute'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'\nimport {replaceElement} from '../../../utils/replaceElement'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {transformStyledComponents} from '../../../utils/transformStyledComponents'\nimport {FLEX_MODS} from '../flex/flex.mods'\nimport {STACK_MODS} from './stack.mods'\n\nconst STACK_TODO_WARNING = 'Please double check the Stack migration below'\nconst FLEX_TODO_WARNING = 'Please double check the Flex migration below'\nconst STYLED_TODO_WARNING = 'Please double check styled(Stack) migration below'\n\nfunction replaceWithFlex(attrs: JSXElement['openingElement']['attributes']) {\n  if (!attrs) {\n    return false\n  }\n\n  return attrs.some(\n    (attr) =>\n      attr.type === 'JSXAttribute' &&\n      attr.name.type === 'JSXIdentifier' &&\n      (attr.name.name.startsWith('padding') ||\n        attr.name.name.startsWith('margin') ||\n        attr.name.name.startsWith('overflow') ||\n        attr.name.name.startsWith('flex') ||\n        attr.name.name.endsWith('height') ||\n        attr.name.name.endsWith('width')),\n  )\n}\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options?: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Stack', options)\n    const styledAliases = getStyledComponentAliases(\n      j,\n      root,\n      'Stack',\n      fileInfo.path,\n      localNames,\n      options,\n    )\n\n    if (!shouldTransformComponent(j, root, 'Stack', localNames, options, styledAliases)) {\n      return\n    }\n\n    if (transformImport(j, root, 'Stack', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        (attrs) => replaceWithFlex(attrs),\n        {\n          element: 'Stack',\n          localNames,\n        },\n        {\n          element: 'Flex',\n          callback: (path) => {\n            let changed = false\n\n            if (addAttribute(j, path.node, 'flexDirection', 'column')) {\n              changed = true\n            }\n\n            if (transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING)) {\n              changed = true\n            }\n\n            return changed\n          },\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        (attrs) => {\n          return !replaceWithFlex(attrs)\n        },\n        {\n          element: 'Stack',\n          localNames,\n        },\n        {\n          element: 'VStack',\n          callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING),\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      transformStyledComponents(j, root, styledAliases, (attrs) => !replaceWithFlex(attrs), {\n        warning: STYLED_TODO_WARNING,\n        callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING),\n      })\n    ) {\n      markChanged()\n    }\n  })\n}\n"],"names":[],"mappings":";;;;;AAGO,MAAM,aAA4B;AAAA,EACvC,QAAQ;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAEV,GCIM,qBAAqB,iDACrB,oBAAoB,gDACpB,sBAAsB;AAE5B,SAAS,gBAAgB,OAAmD;AAC1E,SAAK,QAIE,MAAM;AAAA,IACX,CAAC,SACC,KAAK,SAAS,kBACd,KAAK,KAAK,SAAS,oBAClB,KAAK,KAAK,KAAK,WAAW,SAAS,KAClC,KAAK,KAAK,KAAK,WAAW,QAAQ,KAClC,KAAK,KAAK,KAAK,WAAW,UAAU,KACpC,KAAK,KAAK,KAAK,WAAW,MAAM,KAChC,KAAK,KAAK,KAAK,SAAS,QAAQ,KAChC,KAAK,KAAK,KAAK,SAAS,OAAO;AAAA,EAAA,IAZ5B;AAcX;AAGA,SAAwB,UACtB,UACA,KACA,SACoB;AACpB,QAAM,EAAC,aAAa,UAAA,IAAa,WAAW,CAAA;AAE5C,SAAO,mBAAmB,UAAU,KAAK,CAAC,EAAC,GAAG,MAAM,kBAAiB;AACnE,UAAM,aAAa,uBAAuB,GAAG,MAAM,SAAS,OAAO,GAC7D,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAGG,6BAAyB,GAAG,MAAM,SAAS,YAAY,SAAS,aAAa,MAI9E,gBAAgB,GAAG,MAAM,SAAS,aAAa,SAAS,KAC1D,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA,CAAC,UAAU,gBAAgB,KAAK;AAAA,MAChC;AAAA,QACE,SAAS;AAAA,QACT;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS;AAClB,cAAI,UAAU;AAEd,iBAAI,aAAa,GAAG,KAAK,MAAM,iBAAiB,QAAQ,MACtD,UAAU,KAGR,oBAAoB,GAAG,MAAM,WAAW,iBAAiB,MAC3D,UAAU,KAGL;AAAA,QACT;AAAA,MAAA;AAAA,IACF,KAGF,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA,CAAC,UACQ,CAAC,gBAAgB,KAAK;AAAA,MAE/B;AAAA,QACE,SAAS;AAAA,QACT;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,YAAY,kBAAkB;AAAA,MAAA;AAAA,IACjF,KAGF,YAAA,GAIA,0BAA0B,GAAG,MAAM,eAAe,CAAC,UAAU,CAAC,gBAAgB,KAAK,GAAG;AAAA,MACpF,SAAS;AAAA,MACT,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,YAAY,kBAAkB;AAAA,IAAA,CAChF,KAED,YAAA;AAAA,EAEJ,CAAC;AACH;"}

package/dist/transforms/latest/text/text.js

@@ -1,6 +1,6 @@
 import "jscodeshift";
 import { addAttribute } from "../../../_chunks-es/addAttribute.js";
-import { transformComponent, getComponentLocalNames, shouldTransformComponent, transformImport, transformAttributes } from "../../../_chunks-es/transformComponent.js";
+import { transformComponent, getComponentLocalNames, getStyledComponentAliases, shouldTransformComponent, transformImport, transformAttributes, transformStyledComponents } from "../../../_chunks-es/transformStyledComponents.js";
 const TEXT_MODS = {
   accent: {
     type: "rename-mapped",
@@ -73,13 +73,24 @@ const TEXT_MODS = {
 function transform(fileInfo, api, options) {
   const { fromPackage, toPackage } = options || {};
   return transformComponent(fileInfo, api, ({ j, root, markChanged }) => {
-    const localNames = getComponentLocalNames(j, root, "Text", options);
-    shouldTransformComponent(j, root, "Text", localNames, options) && (transformImport(j, root, "Text", fromPackage, toPackage) && markChanged(), root.find(j.JSXOpeningElement, {
-      name: { type: "JSXIdentifier", name: "Text" }
-    }).forEach((path) => {
+    const localNames = getComponentLocalNames(j, root, "Text", options), styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      "Text",
+      fileInfo.path,
+      localNames,
+      options
+    );
+    shouldTransformComponent(j, root, "Text", localNames, options, styledAliases) && (transformImport(j, root, "Text", fromPackage, toPackage) && markChanged(), root.find(j.JSXOpeningElement).forEach((path) => {
       let changed = !1;
-      transformAttributes(j, path, TEXT_MODS, TODO_WARNING) && (changed = !0), addAttribute(j, path.node, "as", "div") && (changed = !0), addAttribute(j, path.node, "trim", !0) && (changed = !0), changed && markChanged();
-    }));
+      const name = path.node.name;
+      name.type !== "JSXIdentifier" || !localNames.has(name.name) || (transformAttributes(j, path, TEXT_MODS, TODO_WARNING) && (changed = !0), addAttribute(j, path.node, "as", "div") && (changed = !0), addAttribute(j, path.node, "trim", !0) && (changed = !0), changed && markChanged());
+    }), transformStyledComponents(j, root, styledAliases, () => !0, {
+      callback: (path) => {
+        let changed = !1;
+        return transformAttributes(j, path, TEXT_MODS, TODO_WARNING) && (changed = !0), addAttribute(j, path.node, "as", "div") && (changed = !0), addAttribute(j, path.node, "trim", !0) && (changed = !0), changed && markChanged(), changed;
+      }
+    }) && markChanged());
   });
 }
 export {

package/dist/transforms/latest/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/transforms/latest/text/text.mods.ts","../../../../src/transforms/latest/text/text.ts"],"sourcesContent":["import type {AttributeMods} from '../../../types/AttributeMods'\n\n/** @internal */\nexport const TEXT_MODS: AttributeMods = {\n  accent: {\n    type: 'rename-mapped',\n    name: 'tone',\n    mapping: {\n      true: 'suggest',\n    },\n  },\n  flex: {\n    type: 'style-mapped',\n    style: 'flex',\n    mapping: {\n      none: '0 0 auto',\n      auto: '1 1 auto',\n      initial: '0 1 auto',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n      8: '8',\n      9: '9',\n      10: '10',\n      11: '11',\n      12: '12',\n    },\n  },\n  maxWidth: {\n    type: 'style-mapped',\n    style: 'maxWidth',\n    mapping: {\n      auto: 'none',\n      fill: '100%',\n      0: '20rem',\n      1: '40rem',\n      2: '60rem',\n      3: '80rem',\n      4: '100rem',\n      5: '120rem',\n    },\n  },\n  textOverflow: {\n    type: 'rename-mapped',\n    name: 'truncate',\n    mapping: {\n      ellipsis: 1,\n      clip: 1,\n    },\n  },\n  width: {\n    type: 'style-mapped',\n    style: 'width',\n    mapping: {\n      auto: 'auto',\n      fill: '100%',\n      stretch: 'stretch',\n      min: 'min-content',\n      max: 'max-content',\n      0: '20rem',\n      1: '40rem',\n      2: '60rem',\n      3: '80rem',\n      4: '100rem',\n      5: '120rem',\n    },\n  },\n}\n","import {type API, type FileInfo} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {addAttribute} from '../../../utils/addAttribute'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {TEXT_MODS} from './text.mods'\n\nconst TODO_WARNING = 'Please double check the Text migration below'\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Text', options)\n\n    if (!shouldTransformComponent(j, root, 'Text', localNames, options)) {\n      return\n    }\n\n    if (transformImport(j, root, 'Text', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    root\n      .find(j.JSXOpeningElement, {\n        name: {type: 'JSXIdentifier', name: 'Text'},\n      })\n      .forEach((path) => {\n        let changed = false\n\n        if (transformAttributes(j, path, TEXT_MODS, TODO_WARNING)) {\n          changed = true\n        }\n\n        if (addAttribute(j, path.node, 'as', 'div')) {\n          changed = true\n        }\n\n        if (addAttribute(j, path.node, 'trim', true)) {\n          changed = true\n        }\n\n        if (changed) {\n          markChanged()\n        }\n      })\n  })\n}\n"],"names":[],"mappings":";;;AAGO,MAAM,YAA2B;AAAA,EACtC,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAAA,EAEF,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,GC5DM,eAAe;AAGrB,SAAwB,UACtB,UACA,KACA,SACoB;AACpB,QAAM,EAAC,aAAa,UAAA,IAAa,WAAW,CAAA;AAE5C,SAAO,mBAAmB,UAAU,KAAK,CAAC,EAAC,GAAG,MAAM,kBAAiB;AACnE,UAAM,aAAa,uBAAuB,GAAG,MAAM,QAAQ,OAAO;AAE7D,6BAAyB,GAAG,MAAM,QAAQ,YAAY,OAAO,MAI9D,gBAAgB,GAAG,MAAM,QAAQ,aAAa,SAAS,KACzD,YAAA,GAGF,KACG,KAAK,EAAE,mBAAmB;AAAA,MACzB,MAAM,EAAC,MAAM,iBAAiB,MAAM,OAAA;AAAA,IAAM,CAC3C,EACA,QAAQ,CAAC,SAAS;AACjB,UAAI,UAAU;AAEV,0BAAoB,GAAG,MAAM,WAAW,YAAY,MACtD,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,MAAM,KAAK,MACxC,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,QAAQ,EAAI,MACzC,UAAU,KAGR,WACF,YAAA;AAAA,IAEJ,CAAC;AAAA,EACL,CAAC;AACH;"}
+{"version":3,"file":"text.js","sources":["../../../../src/transforms/latest/text/text.mods.ts","../../../../src/transforms/latest/text/text.ts"],"sourcesContent":["import type {AttributeMods} from '../../../types/AttributeMods'\n\n/** @internal */\nexport const TEXT_MODS: AttributeMods = {\n  accent: {\n    type: 'rename-mapped',\n    name: 'tone',\n    mapping: {\n      true: 'suggest',\n    },\n  },\n  flex: {\n    type: 'style-mapped',\n    style: 'flex',\n    mapping: {\n      none: '0 0 auto',\n      auto: '1 1 auto',\n      initial: '0 1 auto',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n      8: '8',\n      9: '9',\n      10: '10',\n      11: '11',\n      12: '12',\n    },\n  },\n  maxWidth: {\n    type: 'style-mapped',\n    style: 'maxWidth',\n    mapping: {\n      auto: 'none',\n      fill: '100%',\n      0: '20rem',\n      1: '40rem',\n      2: '60rem',\n      3: '80rem',\n      4: '100rem',\n      5: '120rem',\n    },\n  },\n  textOverflow: {\n    type: 'rename-mapped',\n    name: 'truncate',\n    mapping: {\n      ellipsis: 1,\n      clip: 1,\n    },\n  },\n  width: {\n    type: 'style-mapped',\n    style: 'width',\n    mapping: {\n      auto: 'auto',\n      fill: '100%',\n      stretch: 'stretch',\n      min: 'min-content',\n      max: 'max-content',\n      0: '20rem',\n      1: '40rem',\n      2: '60rem',\n      3: '80rem',\n      4: '100rem',\n      5: '120rem',\n    },\n  },\n}\n","import {type API, type FileInfo} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {addAttribute} from '../../../utils/addAttribute'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {transformStyledComponents} from '../../../utils/transformStyledComponents'\nimport {TEXT_MODS} from './text.mods'\n\nconst TODO_WARNING = 'Please double check the Text migration below'\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Text', options)\n    const styledAliases = getStyledComponentAliases(\n      j,\n      root,\n      'Text',\n      fileInfo.path,\n      localNames,\n      options,\n    )\n\n    if (!shouldTransformComponent(j, root, 'Text', localNames, options, styledAliases)) {\n      return\n    }\n\n    if (transformImport(j, root, 'Text', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    root.find(j.JSXOpeningElement).forEach((path) => {\n      let changed = false\n      const name = path.node.name\n\n      if (name.type !== 'JSXIdentifier' || !localNames.has(name.name)) {\n        return\n      }\n\n      if (transformAttributes(j, path, TEXT_MODS, TODO_WARNING)) {\n        changed = true\n      }\n\n      if (addAttribute(j, path.node, 'as', 'div')) {\n        changed = true\n      }\n\n      if (addAttribute(j, path.node, 'trim', true)) {\n        changed = true\n      }\n\n      if (changed) {\n        markChanged()\n      }\n    })\n\n    if (\n      transformStyledComponents(j, root, styledAliases, () => true, {\n        callback: (path) => {\n          let changed = false\n\n          if (transformAttributes(j, path, TEXT_MODS, TODO_WARNING)) {\n            changed = true\n          }\n\n          if (addAttribute(j, path.node, 'as', 'div')) {\n            changed = true\n          }\n\n          if (addAttribute(j, path.node, 'trim', true)) {\n            changed = true\n          }\n\n          if (changed) {\n            markChanged()\n          }\n\n          return changed\n        },\n      })\n    ) {\n      markChanged()\n    }\n  })\n}\n"],"names":[],"mappings":";;;AAGO,MAAM,YAA2B;AAAA,EACtC,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAAA,EAEF,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,GC1DM,eAAe;AAGrB,SAAwB,UACtB,UACA,KACA,SACoB;AACpB,QAAM,EAAC,aAAa,UAAA,IAAa,WAAW,CAAA;AAE5C,SAAO,mBAAmB,UAAU,KAAK,CAAC,EAAC,GAAG,MAAM,kBAAiB;AACnE,UAAM,aAAa,uBAAuB,GAAG,MAAM,QAAQ,OAAO,GAC5D,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAGG,6BAAyB,GAAG,MAAM,QAAQ,YAAY,SAAS,aAAa,MAI7E,gBAAgB,GAAG,MAAM,QAAQ,aAAa,SAAS,KACzD,YAAA,GAGF,KAAK,KAAK,EAAE,iBAAiB,EAAE,QAAQ,CAAC,SAAS;AAC/C,UAAI,UAAU;AACd,YAAM,OAAO,KAAK,KAAK;AAEnB,WAAK,SAAS,mBAAmB,CAAC,WAAW,IAAI,KAAK,IAAI,MAI1D,oBAAoB,GAAG,MAAM,WAAW,YAAY,MACtD,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,MAAM,KAAK,MACxC,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,QAAQ,EAAI,MACzC,UAAU,KAGR,WACF;IAEJ,CAAC,GAGC,0BAA0B,GAAG,MAAM,eAAe,MAAM,IAAM;AAAA,MAC5D,UAAU,CAAC,SAAS;AAClB,YAAI,UAAU;AAEd,eAAI,oBAAoB,GAAG,MAAM,WAAW,YAAY,MACtD,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,MAAM,KAAK,MACxC,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,QAAQ,EAAI,MACzC,UAAU,KAGR,WACF,YAAA,GAGK;AAAA,MACT;AAAA,IAAA,CACD,KAED,YAAA;AAAA,EAEJ,CAAC;AACH;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui-codemod",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.7",
   "description": "",
   "keywords": [],
   "license": "ISC",
@@ -29,6 +29,12 @@
     "./latest/grid": "./dist/commands/latest/grid.js",
     "./transforms/latest/heading": "./dist/transforms/latest/heading/heading.js",
     "./latest/heading": "./dist/commands/latest/heading.js",
+    "./transforms/latest/inline": "./dist/transforms/latest/inline/inline.js",
+    "./latest/inline": "./dist/commands/latest/inline.js",
+    "./transforms/latest/label": "./dist/transforms/latest/label/label.js",
+    "./latest/label": "./dist/commands/latest/label.js",
+    "./transforms/latest/stack": "./dist/transforms/latest/stack/stack.js",
+    "./latest/stack": "./dist/commands/latest/stack.js",
     "./transforms/latest/text": "./dist/transforms/latest/text/text.js",
     "./latest/text": "./dist/commands/latest/text.js",
     "./package.json": "./package.json"

package/src/constants/latest/layout-mods.ts

@@ -411,6 +411,10 @@ export const LAYOUT_MODS: AttributeMods = {
       border: 'border-box',
     },
   },
+  space: {
+    type: 'rename-only',
+    name: 'gap',
+  },
   textAlign: {
     type: 'style-only',
     style: 'textAlign',

package/src/transforms/latest/box/box.test.ts

@@ -255,8 +255,7 @@ defineCrossFileTest(
     }
   `,
   (output) => {
-    expect(output).toContain('alignItems: "center"')
-    expect(output).not.toContain('<RootBox alignItems="center" />')
+    expect(output.replace(/\s+/g, ' ')).toContain('<RootBox style={{ alignItems: "center" }} />')
   },
   'transforms attributes on imported styled Box wrappers',
 )
@@ -279,7 +278,6 @@ defineCrossFileTest(
   (output) => {
     expect(output).toContain('UI-CODEMOD TODO: Please double check styled(Box) migration below')
     expect(output).toContain('<RootBox display="flex" alignItems="center" />')
-    expect(output).not.toContain('const RootBox = styled(Box)')
   },
   'adds todo warning when imported styled Box wrapper should be replaced',
 )
@@ -306,10 +304,8 @@ defineCrossFileTest(
     }
   `,
   (output) => {
-    expect(output).toContain('alignItems: "center"')
-    expect(output).not.toContain('<RootBox alignItems="center" />')
+    expect(output.replace(/\s+/g, ' ')).toContain('<RootBox style={{ alignItems: "center" }} />')
     expect(output).toContain('<Box display="flex" />')
-    expect(output).not.toContain('<Flex')
   },
   'does not rewrite unrelated Box from another package',
 )
@@ -330,8 +326,7 @@ defineCrossFileTest(
     }
   `,
   (output) => {
-    expect(output).toContain('alignItems: "center"')
-    expect(output).not.toContain('<RootBox alignItems="center" />')
+    expect(output.replace(/\s+/g, ' ')).toContain('<RootBox style={{ alignItems: "center" }} />')
   },
   'transforms styled Box wrappers imported through barrel re-exports',
   {

package/src/transforms/latest/card/card.test.ts

@@ -1,4 +1,6 @@
-import {defineInlineTest} from '../../../utils/testUtils'
+import {expect} from 'vitest'
+
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
 import transform from './card'
 
 defineInlineTest(
@@ -205,3 +207,100 @@ defineInlineTest(
   `,
   'warns if Card includes muted prop',
 )
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Card} from '@sanity/ui'
+
+    export const RootCard = styled(Card)(({theme}) => ({}))
+  `,
+  `
+    import {RootCard} from './Component.styled'
+
+    export function Component() {
+      return <RootCard padding={4} radius={3} border />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootCard density="regular" />')
+  },
+  'transforms attributes on imported styled Card wrappers',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Card} from '@sanity/ui'
+
+    export const RootCard = styled(Card)(({theme}) => ({}))
+  `,
+  `
+    import {RootCard} from './Component.styled'
+
+    export function Component() {
+      return <RootCard padding={1} />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('UI-CODEMOD TODO: Please double check styled(Card) migration below')
+    expect(output).toContain('<RootCard padding={1} />')
+  },
+  'adds todo warning when imported styled Card wrapper should be replaced',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Card} from '@sanity/ui'
+
+    export const RootCard = styled(Card)(({theme}) => ({}))
+  `,
+  `
+    import {Card} from 'another-package'
+    import {RootCard} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootCard padding={4} radius={3} border />
+          <Card padding={4} radius={3} border />
+        </>
+      )
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootCard density="regular" />')
+    expect(output).toContain('<Card padding={4} radius={3} border />')
+  },
+  'does not rewrite unrelated Card from another package',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Card} from '@sanity/ui'
+
+    export const RootCard = styled(Card)(({theme}) => ({}))
+  `,
+  `
+    import {RootCard} from './index'
+
+    export function Component() {
+      return <RootCard padding={4} radius={3} border />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootCard density="regular" />')
+  },
+  'transforms styled Card wrappers imported through barrel re-exports',
+  {
+    extraFiles: {
+      'index.ts': `export {RootCard} from './Component.styled'`,
+    },
+  },
+)

package/src/transforms/latest/card/card.ts

@@ -1,19 +1,22 @@
-import {type API, type FileInfo} from 'jscodeshift'
+import {type API, type FileInfo, type JSXAttribute, type JSXSpreadAttribute} from 'jscodeshift'
 
 import type {BaseOptions} from '../../../types/BaseOptions'
 import {getAttribute} from '../../../utils/getAttribute'
 import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
 import {getStaticAttributeExpression} from '../../../utils/getStaticAttributeExpression'
+import {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'
 import {replaceElement} from '../../../utils/replaceElement'
 import {shouldTransformComponent} from '../../../utils/shouldTransformComponent'
 import {transformAttributes} from '../../../utils/transformAttributes'
 import {transformComponent} from '../../../utils/transformComponent'
 import {transformImport} from '../../../utils/transformImport'
+import {transformStyledComponents} from '../../../utils/transformStyledComponents'
 import {BOX_MODS} from '../box/box.mods'
 import {CARD_MODS} from './card.mods'
 
 const CARD_TODO_WARNING = 'Please double check the Card migration below'
 const BOX_TODO_WARNING = 'Please double check the Box migration below'
+const STYLED_TODO_WARNING = 'Please double check styled(Card) migration below'
 
 /** @internal */
 export default function transform(
@@ -25,8 +28,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Card', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Card',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Card', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Card', localNames, options, styledAliases)) {
       return
     }
 
@@ -34,29 +45,32 @@ export default function transform(
       markChanged()
     }
 
+    const replaceWithBox = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => {
+      const density = getAttribute(attrs, 'density')
+      const muted = getAttribute(attrs, 'muted')
+      const scheme = getAttribute(attrs, 'scheme')
+      const border = getAttribute(attrs, 'border')
+      const padding = getStaticAttributeExpression(j, attrs, 'padding')
+      const radius = getStaticAttributeExpression(j, attrs, 'radius')
+
+      return !(
+        density ||
+        muted ||
+        scheme ||
+        (border && padding === 3 && radius == 2) ||
+        (border && padding === 4 && radius == 3) ||
+        (border && padding === 5 && radius == 4)
+      )
+    }
+
     if (
       replaceElement(
         j,
         root,
-        (attrs) => {
-          const density = getAttribute(attrs, 'density')
-          const muted = getAttribute(attrs, 'muted')
-          const scheme = getAttribute(attrs, 'scheme')
-          const border = getAttribute(attrs, 'border')
-          const padding = getStaticAttributeExpression(j, attrs, 'padding')
-          const radius = getStaticAttributeExpression(j, attrs, 'radius')
-
-          return !(
-            density ||
-            muted ||
-            scheme ||
-            (border && padding === 3 && radius == 2) ||
-            (border && padding === 4 && radius == 3) ||
-            (border && padding === 5 && radius == 4)
-          )
-        },
+        (attrs) => replaceWithBox(attrs),
         {
           element: 'Card',
+          localNames,
           callback: (path) => transformAttributes(j, path, CARD_MODS, CARD_TODO_WARNING),
         },
         {
@@ -67,5 +81,14 @@ export default function transform(
     ) {
       markChanged()
     }
+
+    if (
+      transformStyledComponents(j, root, styledAliases, (attrs) => !replaceWithBox(attrs), {
+        warning: STYLED_TODO_WARNING,
+        callback: (path) => transformAttributes(j, path, CARD_MODS, CARD_TODO_WARNING),
+      })
+    ) {
+      markChanged()
+    }
   })
 }