@sps-woodland/codemods 8.53.12 → 8.53.13

package/migrate-wrapper-imports.mjs

@@ -41,16 +41,17 @@ const jscodeshift = jscodeshiftModule.default ?? jscodeshiftModule;
 // assume the mapping is "same name", some are exceptions.
 //
 // jsSubpath: subpath used for the bare package import, e.g.
-//   from "@sps-woodland/cards" -> from "@sps-woodland/core/cards"
+//   from "@sps-woodland/tags" -> from "@sps-woodland/core/tags"
 // cssSubpath: subpath used when importing "<wrapperName>/style.css" — for
 //   every package this matches jsSubpath EXCEPT "buttons", whose CSS still
 //   lives under the plural "buttons" path even though the JS export is the
 //   singular "button".
+//
+// "cards" is deliberately NOT in this map — see CARDS_EXPORT_SUBPATH below.
 const WRAPPER_TO_CORE = {
   "action-bar": { jsSubpath: "action-bar", cssSubpath: "action-bar" },
   "add-to-list": { jsSubpath: "add-to-list", cssSubpath: "add-to-list" },
   "buttons": { jsSubpath: "button", cssSubpath: "buttons" }, // exception: singular JS, plural CSS
-  "cards": { jsSubpath: "cards", cssSubpath: "cards" },
   "column-manager": { jsSubpath: "column-manager", cssSubpath: "column-manager" },
   "content-row": { jsSubpath: "content-row", cssSubpath: "content-row" },
   "content-tiles": { jsSubpath: "content-tiles", cssSubpath: "content-tiles" },
@@ -81,26 +82,83 @@ const WRAPPER_TO_CORE = {
 // itself), @sps-woodland/tokens, @sps-woodland/illustrations,
 // @sps-woodland/codemods (these ship real, independent code, not re-exports).
 
+// "cards" is a multi-family wrapper: it re-exports three independent core
+// families under one legacy package name (see
+// packages/@sps-woodland/cards/src/index.ts) —
+//   export * from "@sps-woodland/core/cards";
+//   export * from "@sps-woodland/core/insight-card";
+//   export * from "@sps-woodland/core/scrollable-container";
+// — and its style.css is a concatenation of all three families' style.css
+// (see that package's build:css script). A single wrapper->subpath mapping
+// would route every named import and every style.css import to just one of
+// the three, silently dropping the other two. Route by the specific export
+// name instead, and always expand its style.css into all three families'.
+const CARDS_EXPORT_SUBPATH = {
+  Card: "cards",
+  CardHeader: "cards",
+  CardFooter: "cards",
+  CardTitle: "cards",
+  InsightCard: "insight-card",
+  InsightCardSet: "insight-card",
+  ScrollableContainer: "scrollable-container",
+};
+const CARDS_CSS_SUBPATHS = ["cards", "insight-card", "scrollable-container"];
+
 const SCOPE = "@sps-woodland";
 const JS_EXTENSIONS = new Set([".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs"]);
 const CSS_EXTENSIONS = new Set([".css", ".scss", ".sass", ".less"]);
 const SKIP_DIRS = new Set(["node_modules", ".git", "dist", "build", "lib", "coverage"]);
 
-function resolveNewSource(oldSource) {
-  if (!oldSource.startsWith(`${SCOPE}/`)) return null;
-  const rest = oldSource.slice(SCOPE.length + 1); // e.g. "cards" or "cards/style.css"
+// Splits "@sps-woodland/cards/style.css" into { name: "cards", subRest:
+// "/style.css" } (subRest is "" for a bare "@sps-woodland/<name>" import).
+function splitScopedSpecifier(source) {
+  if (!source.startsWith(`${SCOPE}/`)) return null;
+  const rest = source.slice(SCOPE.length + 1);
   const slashIdx = rest.indexOf("/");
   const name = slashIdx === -1 ? rest : rest.slice(0, slashIdx);
-  const subRest = slashIdx === -1 ? "" : rest.slice(slashIdx); // "" or "/style.css" or deeper
+  const subRest = slashIdx === -1 ? "" : rest.slice(slashIdx);
+  return { name, subRest };
+}
+
+function resolveNewSource(oldSource) {
+  const parts = splitScopedSpecifier(oldSource);
+  if (!parts) return null;
 
-  const mapping = WRAPPER_TO_CORE[name];
+  const mapping = WRAPPER_TO_CORE[parts.name];
   if (!mapping) return null; // not a known wrapper package — leave untouched
 
-  if (subRest === "") return `${SCOPE}/core/${mapping.jsSubpath}`;
-  if (subRest === "/style.css") return `${SCOPE}/core/${mapping.cssSubpath}/style.css`;
+  if (parts.subRest === "") return `${SCOPE}/core/${mapping.jsSubpath}`;
+  if (parts.subRest === "/style.css") return `${SCOPE}/core/${mapping.cssSubpath}/style.css`;
   // Unknown deep subpath (rare) — map using the JS subpath and preserve
   // whatever followed the package name, best-effort.
-  return `${SCOPE}/core/${mapping.jsSubpath}${subRest}`;
+  return `${SCOPE}/core/${mapping.jsSubpath}${parts.subRest}`;
+}
+
+// "cards" can't be resolved to a single new source string (see
+// CARDS_EXPORT_SUBPATH above) — it needs to become several ImportDeclarations
+// instead of having its source literal swapped in place. Returns the
+// replacement declarations, or null if this import can't be split safely
+// (a default/namespace import, an unrecognized named export, or a deep
+// subpath) — callers leave those untouched and flag them for manual review.
+function splitCardsImportDeclaration(j, node, subRest) {
+  if (subRest === "/style.css") {
+    return CARDS_CSS_SUBPATHS.map((sub) => j.importDeclaration([], j.literal(`${SCOPE}/core/${sub}/style.css`)));
+  }
+  if (subRest !== "") return null; // unrecognized deep subpath
+
+  const specifiers = node.specifiers;
+  if (specifiers.length === 0) return null; // bare side-effect import, nothing to route by
+
+  const bySubpath = new Map(); // subpath -> specifier[], insertion order
+  for (const spec of specifiers) {
+    if (spec.type !== "ImportSpecifier") return null; // default or namespace import
+    const sub = CARDS_EXPORT_SUBPATH[spec.imported.name];
+    if (!sub) return null; // not a recognized cards/insight-card/scrollable-container export
+    if (!bySubpath.has(sub)) bySubpath.set(sub, []);
+    bySubpath.get(sub).push(spec);
+  }
+
+  return [...bySubpath.entries()].map(([sub, specs]) => j.importDeclaration(specs, j.literal(`${SCOPE}/core/${sub}`)));
 }
 
 // Parses the file with jscodeshift (Babel/TSX parser) and rewrites only the
@@ -131,6 +189,21 @@ function transformSource(source) {
   // Static: import ... from "@sps-woodland/<name>"
   root.find(j.ImportDeclaration).forEach((p) => {
     const node = p.node.source;
+    const value = node.value;
+    const parts = typeof value === "string" ? splitScopedSpecifier(value) : null;
+
+    if (parts && parts.name === "cards") {
+      const newDecls = splitCardsImportDeclaration(j, p.node, parts.subRest);
+      if (newDecls) {
+        const oldSource = `${SCOPE}/cards${parts.subRest}`;
+        p.replace(...newDecls);
+        changes.push({ oldSource, newSource: newDecls.map((d) => d.source.value).join(", ") });
+      } else {
+        unknown.add("cards");
+      }
+      return;
+    }
+
     maybeRewrite(node, (newValue) => {
       node.value = newValue;
       delete node.raw;
@@ -175,7 +248,40 @@ function transformCssSource(source) {
   const changes = []; // { oldSource, newSource }
   const unknown = new Set();
 
-  const output = source.replace(CSS_IMPORT_RE, (match, prefix, quote, name, rest) => {
+  const output = source.replace(CSS_IMPORT_RE, (match, prefix, quote, name, rest, offset, string) => {
+    if (name === "cards") {
+      if (rest !== "/style.css" && rest !== "/lib/style.css") {
+        unknown.add(`cards${rest}`);
+        return match;
+      }
+
+      // One @import can't become three without knowing what immediately
+      // follows the match (a plain ";", or url()'s ")" then ";") — a media
+      // query or anything else there would need to apply to all three
+      // splits, which we can't infer safely, so leave those for manual review.
+      const isUrl = /url\(\s*$/.test(prefix);
+      const tail = string.slice(offset + match.length);
+      if (!(isUrl ? /^\s*\)\s*;/ : /^\s*;/).test(tail)) {
+        unknown.add(`cards${rest} (unexpected trailing syntax after the @import — split into ${CARDS_CSS_SUBPATHS.length} imports manually)`);
+        return match;
+      }
+
+      const oldSource = `${SCOPE}/cards${rest}`;
+      const closeParen = isUrl ? ")" : "";
+      const statements = CARDS_CSS_SUBPATHS.map((sub, i) => {
+        const newPath = `${SCOPE}/core/${sub}/style.css`;
+        const isLast = i === CARDS_CSS_SUBPATHS.length - 1;
+        // The last split keeps whatever terminator (")" / ";" / media query)
+        // already follows the original match in the source untouched.
+        return `${prefix}${quote}${newPath}${quote}${isLast ? "" : `${closeParen};`}`;
+      });
+      changes.push({
+        oldSource,
+        newSource: CARDS_CSS_SUBPATHS.map((sub) => `${SCOPE}/core/${sub}/style.css`).join(", "),
+      });
+      return statements.join("\n");
+    }
+
     const mapping = WRAPPER_TO_CORE[name];
     if (!mapping) {
       unknown.add(name);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/codemods",
   "description": "SPS Woodland Design System codemods",
-  "version": "8.53.12",
+  "version": "8.53.13",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/master/packages/@sps-woodland/codemods",