styled-components-to-stylex-codemod 0.0.21 → 0.0.23

package/dist/transient-prop-consumer-patcher-iofVVX40.mjs

@@ -0,0 +1,156 @@
+import { n as escapeRegex } from "./string-utils-J3iaDsXd.mjs";
+import { basename, dirname, relative } from "node:path";
+import { readFileSync, realpathSync } from "node:fs";
+
+//#region src/internal/transient-prop-consumer-patcher.ts
+/**
+* Post-transform consumer patching for transient prop renames.
+*
+* When a component (e.g., `CollapseArrowIcon`) is converted from styled-components
+* to a plain function, its `$`-prefixed props are renamed (e.g., `$isOpen` → `isOpen`).
+* Unconverted consumer files that use `<CollapseArrowIcon $isOpen={...} />` must be
+* patched to use the new prop names.
+*/
+/**
+* Scan all consumer files and patch any that import renamed components.
+*
+* Iterates consumers once (outer) and targets (inner) to minimise I/O.
+* Returns the list of consumer file paths that were patched.
+*/
+function collectTransientPropPatches(args) {
+	const { transientPropRenames, consumerFilePaths, resolver } = args;
+	const results = [];
+	const allConsumerFiles = new Set(consumerFilePaths.map(toRealPath));
+	for (const consumerPath of allConsumerFiles) {
+		let consumerSource;
+		try {
+			consumerSource = readFileSync(consumerPath, "utf-8");
+		} catch {
+			continue;
+		}
+		const allEntries = [];
+		for (const [targetPath, renames] of transientPropRenames) {
+			if (consumerPath === targetPath) continue;
+			const importSources = buildPossibleImportSources(consumerPath, targetPath, consumerSource, resolver);
+			const entries = findImportedRenamedComponents(consumerSource, importSources, renames);
+			allEntries.push(...entries);
+		}
+		if (allEntries.length > 0) {
+			const patched = patchSourceTransientProps(consumerSource, allEntries);
+			if (patched !== null) results.push({
+				consumerPath,
+				patched
+			});
+		}
+	}
+	return results;
+}
+/**
+* Scan a consumer file's imports to find which renamed components it uses.
+*/
+function findImportedRenamedComponents(consumerSource, targetImportSources, componentRenames) {
+	const entries = [];
+	for (const { exportName, renames } of componentRenames) {
+		const localName = findLocalImportName(consumerSource, targetImportSources, exportName);
+		if (localName) entries.push({
+			localComponentName: localName,
+			renames
+		});
+	}
+	return entries;
+}
+/**
+* Patch source code: rename `$prop` → `prop` in JSX attributes.
+* Returns the patched source or `null` if unchanged.
+*/
+function patchSourceTransientProps(source, entries) {
+	if (entries.length === 0) return null;
+	let modified = source;
+	for (const { localComponentName, renames } of entries) modified = patchJsxTransientProps(modified, localComponentName, renames);
+	return modified !== source ? modified : null;
+}
+function toRealPath(filePath) {
+	try {
+		return realpathSync(filePath);
+	} catch {
+		return filePath;
+	}
+}
+/**
+* Build import source strings that a consumer might use to import from `targetPath`.
+* Generates relative paths (with/without extension, /index), and — when a resolver
+* is provided — also probes the consumer's actual import specifiers to catch
+* tsconfig path aliases.
+*/
+function buildPossibleImportSources(consumerPath, targetPath, consumerSource, resolver) {
+	const sources = /* @__PURE__ */ new Set();
+	const dir = dirname(consumerPath);
+	let rel = relative(dir, targetPath).replace(/\\/g, "/");
+	if (!rel.startsWith(".")) rel = `./${rel}`;
+	sources.add(rel);
+	for (const ext of [
+		".tsx",
+		".ts",
+		".jsx",
+		".js"
+	]) if (rel.endsWith(ext)) {
+		sources.add(rel.slice(0, -ext.length));
+		break;
+	}
+	if (basename(targetPath).replace(/\.\w+$/, "") === "index") {
+		const dirRel = relative(dir, dirname(targetPath)).replace(/\\/g, "/");
+		sources.add(dirRel.startsWith(".") ? dirRel : `./${dirRel}`);
+	}
+	if (resolver) for (const m of consumerSource.matchAll(/from\s+["']([^"']+)["']/g)) {
+		const specifier = m[1];
+		if (sources.has(specifier)) continue;
+		try {
+			const resolved = resolver.resolve(consumerPath, specifier);
+			if (resolved && toRealPath(resolved) === targetPath) sources.add(specifier);
+		} catch {}
+	}
+	return sources;
+}
+/**
+* Find the local name for an imported component.
+* Checks named imports (`import { X }`, `import { X as Y }`),
+* default imports (`import X`).
+*/
+function findLocalImportName(source, targetImportSources, exportName) {
+	for (const match of source.matchAll(/import\s+(type\s+)?(?:({[^}]+})|(\w+)(?:\s*,\s*({[^}]+}))?)\s+from\s+["']([^"']+)["']/g)) {
+		if (!!match[1]) continue;
+		const importSource = match[5];
+		if (!importSource || !targetImportSources.has(importSource)) continue;
+		const defaultImport = match[3];
+		const namedImports = match[2] ?? match[4];
+		if (exportName === "default" && defaultImport) return defaultImport;
+		if (namedImports) {
+			const specifierRegex = new RegExp(`\\b${escapeRegex(exportName)}\\s+as\\s+(\\w+)|\\b(${escapeRegex(exportName)})\\b`, "g");
+			for (const specMatch of namedImports.matchAll(specifierRegex)) {
+				const aliased = specMatch[1];
+				const direct = specMatch[2];
+				if (aliased) return aliased;
+				if (direct) return direct;
+			}
+		}
+	}
+	return null;
+}
+/**
+* Rename `$prop` → `prop` in JSX attributes for a specific component.
+* Matches `<ComponentName ... $propName=` and `<ComponentName ... $propName>`
+* (shorthand boolean).
+*/
+function patchJsxTransientProps(source, componentName, renames) {
+	let result = source;
+	for (const [original, renamed] of Object.entries(renames)) {
+		const escapedComponent = escapeRegex(componentName);
+		const escapedProp = escapeRegex(original);
+		const tagRegex = new RegExp(`(<${escapedComponent}\\b[^<>]*?\\s)${escapedProp}(?=[\\s=/>])`, "g");
+		result = result.replace(tagRegex, `$1${renamed}`);
+	}
+	return result;
+}
+
+//#endregion
+export { collectTransientPropPatches };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components-to-stylex-codemod",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Codemod to transform styled-components to StyleX",
   "keywords": [
     "codemod",
@@ -40,10 +40,10 @@
     "@codemirror/lang-javascript": "^6.2.4",
     "@emotion/is-prop-valid": "^1.4.0",
     "@storybook/react-vite": "^10.2.10",
-    "@stylexjs/babel-plugin": "^0.17.5",
-    "@stylexjs/eslint-plugin": "^0.17.5",
-    "@stylexjs/stylex": "^0.17.5",
-    "@stylexjs/unplugin": "^0.17.5",
+    "@stylexjs/babel-plugin": "^0.18.1",
+    "@stylexjs/eslint-plugin": "^0.18.1",
+    "@stylexjs/stylex": "^0.18.1",
+    "@stylexjs/unplugin": "^0.18.1",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^25.3.0",
     "@types/react": "^19.2.14",