@mittwald/flow-codemods 1.1.43 → 1.1.45

package/dist/migrations/imports-to-package-root/transform.js

@@ -39,6 +39,21 @@ const keptSubpaths = new Set([
     // owned by password-tools-subpath-renamed
     "password-tools",
 ]);
+/**
+ * Splits a bundler's asset query or fragment off a specifier. `all.css?url` is
+ * the subpath `all.css`, requested as a URL — not a subpath named
+ * `all.css?url`. Matching the whole string carried the suffix past the
+ * leave-alone set and into the catch-all below, which rewrote `import
+ * flowStyles from "…/all.css?url"` into a named import of a JS export that does
+ * not exist, and `import "…/all-layered.css?inline"` into a side-effect import
+ * of the package root — stylesheet gone, no error anywhere.
+ */
+const splitAssetSuffix = (subpath) => {
+    const suffixAt = subpath.search(/[?#]/);
+    return suffixAt === -1
+        ? [subpath, ""]
+        : [subpath.slice(0, suffixAt), subpath.slice(suffixAt)];
+};
 const importsToPackageRootTransform = (fileInfo, { j }) => {
     const flowPackage = "@mittwald/flow-react-components";
     const root = j(fileInfo.source, {
@@ -50,14 +65,21 @@ const importsToPackageRootTransform = (fileInfo, { j }) => {
         .forEach((i) => {
         const specifiers = i.node.specifiers ?? [];
         const importPath = String(i.node.source.value);
-        const importRelativePath = importPath.slice(flowPackage.length + 1);
+        const [importRelativePath, assetSuffix] = splitAssetSuffix(importPath.slice(flowPackage.length + 1));
         if (keptSubpaths.has(importRelativePath)) {
             return;
         }
         if (importRelativePath === "all.css" ||
             importRelativePath === "globals.css" ||
             importRelativePath === "global.css") {
-            i.node.source.value = `${flowPackage}/all.css`;
+            i.node.source.value = `${flowPackage}/all.css${assetSuffix}`;
+            return;
+        }
+        // Everything below rewrites a *module* import: it moves the specifier
+        // onto a JS entry and turns a default specifier into a named one. An
+        // asset import survives neither, and a suffix reaching this point names a
+        // path this transform cannot resolve to an export — leave it to a human.
+        if (assetSuffix !== "") {
             return;
         }
         if (importRelativePath.startsWith("react-hook-form")) {

package/dist/migrations/password-tools-rule/transform.js

@@ -23,11 +23,22 @@ const passwordToolsRuleTransform = (fileInfo, { j }) => {
     const flowPackages = [
         "@mittwald/flow-react-components/mittwald-password-tools-js",
     ];
+    /**
+     * The same entry under the name it had when this change shipped. It was
+     * renamed later (alpha.1000, `password-tools-subpath-renamed`), and `since`
+     * puts that rename _after_ this transform — so a consumer coming from before
+     * alpha.802 still spells the import `password-tools` when this runs, and
+     * matching only the current name left `AsyncRule` untouched for the rename to
+     * carry onto an entry that does not export it. Kept out of `flowPackages`
+     * because `remoteScope.test.ts` holds every name in there against the export
+     * map the packages have _today_, where this one is gone.
+     */
+    const renamedFlowPackage = "@mittwald/flow-react-components/password-tools";
     const renames = new Map([
         ["AsyncRule", "Rule"],
         ["SyncRule", "Rule"],
     ]);
-    const isFlowImport = (source) => flowPackages.includes(source);
+    const isFlowImport = (source) => flowPackages.includes(source) || source === renamedFlowPackage;
     // ast-types models `importKind` on the declaration only, while babel also
     // puts it on the specifier — which is where a per-specifier `type X` lives.
     const isTypeOnly = (specifier) => specifier.importKind === "type";

package/dist/migrations/renamed-css-export/transform.js

@@ -12,9 +12,11 @@ const newPath = "@mittwald/flow-react-components/all.css";
  * always the side-effect form (`import "…/styles"`), which is why that case is
  * the one the fixtures lead with.
  *
- * Exact match, not a prefix: `./styles` was a single export with nothing
- * underneath it, so there is no deeper path to rewrite and no risk of touching
- * an unrelated `styles` of someone else's.
+ * Exact match on the path, not a prefix: `./styles` was a single export with
+ * nothing underneath it, so there is no deeper path to rewrite and no risk of
+ * touching an unrelated `styles` of someone else's. A bundler query or fragment
+ * (`?url`, `?inline`) is split off before that comparison and carried over — it
+ * addresses the export, it does not name a different one.
  *
  * What this cannot reach is an `@import` in a `.css` or `.scss` file —
  * jscodeshift only walks the JavaScript and TypeScript extensions. `apply` says
@@ -23,11 +25,23 @@ const newPath = "@mittwald/flow-react-components/all.css";
 const renamedCssExportTransform = (fileInfo, { j }) => {
     const root = j(fileInfo.source, { parser: "tsx" });
     let changed = false;
+    // A bundler addresses an asset through a query or fragment on the specifier,
+    // so `…/styles?url` is the old export requested as a URL. The rename applies
+    // to it just the same: match the path, carry the suffix over. Comparing the
+    // whole string leaves it pointing at an export the package no longer has.
     const rewrite = (node) => {
-        if (node.value === oldPath) {
-            node.value = newPath;
-            changed = true;
+        if (typeof node.value !== "string") {
+            return;
         }
+        const suffixAt = node.value.search(/[?#]/);
+        const [path, suffix] = suffixAt === -1
+            ? [node.value, ""]
+            : [node.value.slice(0, suffixAt), node.value.slice(suffixAt)];
+        if (path !== oldPath) {
+            return;
+        }
+        node.value = `${newPath}${suffix}`;
+        changed = true;
     };
     // import … from "…", import "…"
     root.find(j.ImportDeclaration).forEach((path) => rewrite(path.node.source));

package/dist/migrations.generated.js

@@ -235,7 +235,7 @@ export const migrations = [
         kind: "migration",
         action: "codemod",
         remotePackage: false,
-        apply: 'Rewrite every subdirectory import from `@mittwald/flow-react-components` to the package root, except `react-hook-form` and `nextjs`, which move to `@mittwald/flow-react-components/react-hook-form` and `@mittwald/flow-react-components/nextjs`. If you hit missing module errors, set `"module": "esnext"` in `tsconfig.json`.',
+        apply: 'Rewrite every subdirectory import from `@mittwald/flow-react-components` to the package root, except `react-hook-form` and `nextjs`, which move to `@mittwald/flow-react-components/react-hook-form` and `@mittwald/flow-react-components/nextjs`. Asset imports are not part of this: a CSS specifier stays a CSS specifier — `all.css` and `all-layered.css` unchanged, a stale `global.css` or `globals.css` rewritten to `all.css` — and keeps any bundler query it carries (`?url`, `?inline`, `?raw`). It never becomes a named import from the package root, which has no JS binding behind a stylesheet. If you hit missing module errors, set `"module": "esnext"` in `tsconfig.json`.',
     },
     {
         id: "renamed-css-export",
@@ -244,6 +244,6 @@ export const migrations = [
         kind: "migration",
         action: "codemod",
         remotePackage: false,
-        apply: "Replace the import `@mittwald/flow-react-components/styles` with `@mittwald/flow-react-components/all.css`. A codemod does this for JavaScript and TypeScript files. An `@import` of the old path inside a `.css` or `.scss` file is not covered — search for it by hand.",
+        apply: "Replace the import `@mittwald/flow-react-components/styles` with `@mittwald/flow-react-components/all.css`, keeping any bundler query the specifier carries (`.../styles?url` becomes `.../all.css?url`). A codemod does this for JavaScript and TypeScript files. An `@import` of the old path inside a `.css` or `.scss` file is not covered — search for it by hand.",
     },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-codemods",
-  "version": "1.1.43",
+  "version": "1.1.45",
   "type": "module",
   "description": "Codemods and an upgrade CLI for consumers of Flow, mittwald's design system",
   "homepage": "https://flow.mittwald.de",
@@ -38,5 +38,5 @@
     "vitest": "^4.1.11",
     "yaml": "^2.8.1"
   },
-  "gitHead": "0bdee16eb75f00f81efc3601b406e38c9a15e66e"
+  "gitHead": "207967ac9159f9c55934801f5e8df02e7371bd29"
 }