styled-components-to-stylex-codemod 0.0.15 → 0.0.16

package/dist/index.mjs

@@ -194,7 +194,7 @@ async function runTransform(options) {
 	].join("\n"));
 	const { createModuleResolver } = await import("./resolve-imports-BDk6Ms09.mjs");
 	const sharedResolver = createModuleResolver();
-	const { runPrepass } = await import("./run-prepass-BcidTT9f.mjs");
+	const { runPrepass } = await import("./run-prepass-DOMrzrA_.mjs");
 	const absoluteFiles = filePaths.map((f) => resolve(f));
 	const absoluteConsumers = consumerFilePaths.map((f) => resolve(f));
 	let prepassResult;

package/dist/{run-prepass-BcidTT9f.mjs → run-prepass-DOMrzrA_.mjs}

@@ -237,8 +237,13 @@ function categorizeSelectorUsages(usages, componentsNeedingMarkerSidecar, compon
 		else addToSetMap(componentsNeedingGlobalSelectorBridge, usage.resolvedPath, usage.importedName);
 	}
 }
-/** Regex matching `export const XGlobalSelector = ".sc2sx-` pattern (global for matchAll). */
-const BRIDGE_EXPORT_RE = /export\s+const\s+(\w+GlobalSelector)\s*=\s*["']\.sc2sx-/g;
+/**
+* Regex matching bridge GlobalSelector export patterns (global for matchAll).
+* Matches both:
+*   - Old format: `export const XGlobalSelector = ".sc2sx-..."`
+*   - New format: `` export const XGlobalSelector = `.${xBridgeClass}` ``
+*/
+const BRIDGE_EXPORT_RE = /export\s+const\s+(\w+GlobalSelector)\s*=\s*(?:["']\.sc2sx-|`\.\$\{)/g;
 /**
 * Detect whether an imported name is a bridge GlobalSelector from an
 * already-converted StyleX file.
@@ -302,10 +307,7 @@ function walkForImportsAndTemplates(node, imports, templates) {
 		imports.push(n);
 		return;
 	}
-	if (n.type === "TaggedTemplateExpression") {
-		templates.push(n);
-		return;
-	}
+	if (n.type === "TaggedTemplateExpression") templates.push(n);
 	for (const key of Object.keys(n)) {
 		if (key === "type" || key === "start" || key === "end" || key === "loc") continue;
 		const val = n[key];
@@ -352,13 +354,32 @@ function findStyledImportNameFromNodes(importNodes) {
 	}
 }
 /**
+* Find local names of `css` imported from styled-components.
+* Handles aliased imports like `import { css as sc } from "styled-components"`.
+*/
+function findCssImportNamesFromNodes(importNodes) {
+	const names = /* @__PURE__ */ new Set();
+	for (const node of importNodes) {
+		if (node.source?.value !== "styled-components") continue;
+		const specifiers = node.specifiers;
+		if (!specifiers) continue;
+		for (const spec of specifiers) if (spec.type === "ImportSpecifier") {
+			if (getNodeName(spec.imported) === "css") {
+				const localName = getNodeName(spec.local);
+				if (localName) names.add(localName);
+			}
+		}
+	}
+	return names;
+}
+/**
 * Find local names of imported components used as selectors inside
-* styled-components template literals.
+* styled-components template literals (both `styled` and `css` tagged templates).
 */
-function findComponentSelectorLocalsFromNodes(templateNodes, styledImportName) {
+function findComponentSelectorLocalsFromNodes(templateNodes, styledImportName, cssImportNames) {
 	const selectorLocals = /* @__PURE__ */ new Set();
 	for (const node of templateNodes) {
-		if (!isStyledTag(node.tag, styledImportName)) continue;
+		if (!isStyledTag(node.tag, styledImportName) && !isCssTag(node.tag, cssImportNames)) continue;
 		const quasi = node.quasi;
 		if (!quasi) continue;
 		const quasis = quasi.quasis;
@@ -399,6 +420,11 @@ function isStyledTag(tag, styledName) {
 	}
 	return false;
 }
+/** Check if a template tag is the `css` helper from styled-components. */
+function isCssTag(tag, cssImportNames) {
+	if (!tag || !cssImportNames || cssImportNames.size === 0) return false;
+	return tag.type === "Identifier" && typeof tag.name === "string" && cssImportNames.has(tag.name);
+}
 /** Check if a placeholder at the given position is in a CSS selector context. */
 function isPlaceholderInSelectorContext(rawCss, pos, length) {
 	const after = rawCss.slice(pos + length).trimStart();
@@ -759,10 +785,12 @@ function scanFileForSelectorsAst(filePath, source, transformSet, resolver, parse
 	const cached = cache && hash ? cache.get(hash) : void 0;
 	let importMap;
 	let styledImportName;
+	let cssImportNames;
 	let selectorLocals;
 	if (cached) {
 		importMap = cached.importMap;
 		styledImportName = cached.styledImportName;
+		cssImportNames = cached.cssImportNames;
 		selectorLocals = cached.selectorLocals;
 	} else {
 		let ast;
@@ -781,14 +809,16 @@ function scanFileForSelectorsAst(filePath, source, transformSet, resolver, parse
 		walkForImportsAndTemplates(program, importNodes, taggedTemplateNodes);
 		importMap = buildImportMapFromNodes(importNodes);
 		styledImportName = findStyledImportNameFromNodes(importNodes);
-		selectorLocals = styledImportName ? findComponentSelectorLocalsFromNodes(taggedTemplateNodes, styledImportName) : /* @__PURE__ */ new Set();
+		cssImportNames = findCssImportNamesFromNodes(importNodes);
+		selectorLocals = styledImportName || cssImportNames.size > 0 ? findComponentSelectorLocalsFromNodes(taggedTemplateNodes, styledImportName ?? "", cssImportNames) : /* @__PURE__ */ new Set();
 		if (cache && hash) cache.set(hash, {
 			importMap,
 			styledImportName,
+			cssImportNames,
 			selectorLocals
 		});
 	}
-	if (importMap.size === 0 || !styledImportName || selectorLocals.size === 0) return [];
+	if (importMap.size === 0 || !styledImportName && cssImportNames.size === 0 || selectorLocals.size === 0) return [];
 	const consumerIsTransformed = transformSet.has(filePath);
 	const usages = [];
 	for (const localName of selectorLocals) {

package/dist/transform.mjs

@@ -1148,6 +1148,20 @@ function generateBridgeClassName(filePath, componentName) {
 function bridgeExportName(componentName) {
 	return `${componentName}GlobalSelector`;
 }
+/**
+* Generate the internal const variable name for the bridge class value.
+* E.g., "Foo" → "fooBridgeClass", "ScrollableDiv" → "scrollableDivBridgeClass"
+*/
+function bridgeClassVarName(componentName) {
+	return `${componentName.charAt(0).toLowerCase()}${componentName.slice(1)}BridgeClass`;
+}
+/**
+* If a declaration has a bridge className, return the internal const variable
+* name that references it. Returns `undefined` when no bridge is needed.
+*/
+function getBridgeClassVar(decl) {
+	return decl.bridgeClassName ? bridgeClassVarName(decl.localName) : void 0;
+}
 
 //#endregion
 //#region src/internal/transform-steps/analyze-before-emit.ts
@@ -1232,15 +1246,7 @@ function analyzeBeforeEmitStep(ctx) {
 		if (decl.base.kind === "intrinsic" && decl.withConfig?.componentId) decl.needsWrapperComponent = true;
 		if (extendedBy.has(decl.localName) && componentsWithStaticProps.has(decl.localName)) decl.needsWrapperComponent = true;
 		if (exportedComponents.has(decl.localName)) decl.needsWrapperComponent = true;
-		if (ctx.bridgeComponentNames?.has(decl.localName) || ctx.bridgeComponentNames?.has("default") && exportedComponents.get(decl.localName)?.isDefault) {
-			decl.bridgeClassName = generateBridgeClassName(resolve(file.path), decl.localName);
-			if (!decl.attrsInfo) decl.attrsInfo = {
-				staticAttrs: {},
-				conditionalAttrs: []
-			};
-			const existing = typeof decl.attrsInfo.staticAttrs.className === "string" ? decl.attrsInfo.staticAttrs.className + " " : "";
-			decl.attrsInfo.staticAttrs.className = existing + decl.bridgeClassName;
-		}
+		if (ctx.bridgeComponentNames?.has(decl.localName) || ctx.bridgeComponentNames?.has("default") && exportedComponents.get(decl.localName)?.isDefault) decl.bridgeClassName = generateBridgeClassName(resolve(file.path), decl.localName);
 	}
 	const isUsedInJsx = (name) => isComponentUsedInJsx(root, j, name);
 	const canInlineImportedComponentWrapper = (decl) => {
@@ -6077,17 +6083,28 @@ function emitBridgeExportsStep(ctx) {
 	const { j, root } = ctx;
 	const bridgeResults = [];
 	for (const decl of bridgeDecls) {
-		const varName = bridgeExportName(decl.localName);
+		const exportVarName = bridgeExportName(decl.localName);
+		const internalVarName = bridgeClassVarName(decl.localName);
 		const className = decl.bridgeClassName;
-		const declaration = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(varName), j.stringLiteral(`.${className}`))]);
-		const exportDecl = j.exportNamedDeclaration(declaration);
+		const internalDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(internalVarName), j.stringLiteral(className))]);
+		const templateLiteral = j.templateLiteral([j.templateElement({
+			raw: ".",
+			cooked: "."
+		}, false), j.templateElement({
+			raw: "",
+			cooked: ""
+		}, true)], [j.identifier(internalVarName)]);
+		const exportDeclaration = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(exportVarName), templateLiteral)]);
+		const exportDecl = j.exportNamedDeclaration(exportDeclaration);
 		exportDecl.comments = [j.commentBlock("* @deprecated Migrate consumer to stylex.defineMarker() — bridge className for unconverted styled-components consumers ", true, false)];
-		root.find(j.Program).get().node.body.push(exportDecl);
+		const body = root.find(j.Program).get().node.body;
+		body.push(internalDecl);
+		body.push(exportDecl);
 		bridgeResults.push({
 			componentName: decl.localName,
 			exportName: ctx.exportedComponents?.get(decl.localName)?.exportName,
 			className,
-			globalSelectorVarName: varName
+			globalSelectorVarName: exportVarName
 		});
 	}
 	ctx.bridgeResults = bridgeResults;
@@ -6836,7 +6853,8 @@ function emitSimpleWithConfigWrappers(ctx) {
 				invertedBoolAttrs: d.attrsInfo?.invertedBoolAttrs ?? [],
 				staticAttrs: d.attrsInfo?.staticAttrs ?? {},
 				inlineStyleProps: d.inlineStyleProps ?? [],
-				attrsAsTag: d.attrsInfo?.attrsAsTag
+				attrsAsTag: d.attrsInfo?.attrsAsTag,
+				bridgeClassVar: getBridgeClassVar(d)
 			}), d));
 			continue;
 		}
@@ -6852,7 +6870,7 @@ function emitSimpleWithConfigWrappers(ctx) {
 			restId
 		});
 		const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 		const merging = emitStyleMerging({
 			j,
 			emitter,
@@ -7146,7 +7164,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				restId: restId ?? void 0
 			});
 			const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
-			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 			const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 				attrsInfo,
 				includeForwardedAs: includesForwardedAs
@@ -7207,7 +7225,8 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			invertedBoolAttrs: d.attrsInfo?.invertedBoolAttrs ?? [],
 			staticAttrs: d.attrsInfo?.staticAttrs ?? {},
 			inlineStyleProps: d.inlineStyleProps ?? [],
-			attrsAsTag: d.attrsInfo?.attrsAsTag
+			attrsAsTag: d.attrsInfo?.attrsAsTag,
+			bridgeClassVar: getBridgeClassVar(d)
 		}), d));
 	}
 }
@@ -7621,7 +7640,7 @@ function emitComponentWrappers(emitter) {
 			if (!firstPart) jsxTagName = j.jsxIdentifier(renderedComponent);
 			else jsxTagName = j.jsxMemberExpression(j.jsxIdentifier(firstPart), j.jsxIdentifier(parts.slice(1).join(".")));
 		} else jsxTagName = j.jsxIdentifier(renderedComponent);
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 		const defaultAttrs = attrsInfo?.defaultAttrs ?? [];
 		const staticAttrs = attrsInfo?.staticAttrs ?? {};
 		const needsSxVar = allowClassNameProp || allowStyleProp || !!d.inlineStyleProps?.length || !!staticClassNameExpr;
@@ -8566,7 +8585,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			}),
 			j.restElement(restId)
 		]), propsId)]);
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 		const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 			attrsInfo,
 			includeForwardedAs: includesForwardedAs
@@ -8840,7 +8859,7 @@ function emitShouldForwardPropWrappers(ctx) {
 			});
 			const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
 			const cleanupPrefixStmt = dropPrefix && (isExportedComponent || shouldAllowAnyPrefixProps) && includeRest ? buildPrefixCleanupStatements(j, restId, dropPrefix) : null;
-			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 			const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 				attrsInfo,
 				includeForwardedAs: includesForwardedAs
@@ -9280,32 +9299,59 @@ function splitExtraStyleArgs(j, stylesIdentifier, d) {
 	};
 }
 /**
+* Build a static className expression combining an optional literal string
+* and/or a bridge class variable identifier.
+*
+* Returns `undefined` when neither is provided.
+*/
+function buildStaticClassNameExpr(j, staticClassName, bridgeClassVar) {
+	if (staticClassName && bridgeClassVar) {
+		const raw = escapeTemplateRaw(`${staticClassName} `);
+		return j.templateLiteral([j.templateElement({
+			raw,
+			cooked: `${staticClassName} `
+		}, false), j.templateElement({
+			raw: "",
+			cooked: ""
+		}, true)], [j.identifier(bridgeClassVar)]);
+	}
+	if (bridgeClassVar) return j.identifier(bridgeClassVar);
+	if (staticClassName) return j.literal(staticClassName);
+}
+/**
 * Extracts a static className value (if present) from attrsInfo.staticAttrs
 * so it can be passed to the style merger separately, and returns the
 * remaining attrsInfo without that className entry.
+*
+* When `bridgeClassVar` is provided, it is used as an identifier expression
+* for the bridge class name. If a static className also exists, a template
+* literal combining both is produced.
 */
-function splitAttrsInfo(j, attrsInfo) {
+function splitAttrsInfo(j, attrsInfo, bridgeClassVar) {
 	const className = attrsInfo?.staticAttrs?.className;
 	if (!attrsInfo) return {
 		attrsInfo,
-		staticClassNameExpr: void 0
+		staticClassNameExpr: buildStaticClassNameExpr(j, void 0, bridgeClassVar)
 	};
 	const normalized = {
 		...attrsInfo,
 		staticAttrs: attrsInfo.staticAttrs ?? {},
 		conditionalAttrs: attrsInfo.conditionalAttrs ?? []
 	};
-	if (typeof className !== "string") return {
+	const hasStaticClassName = typeof className === "string";
+	if (!hasStaticClassName && !bridgeClassVar) return {
 		attrsInfo: normalized,
 		staticClassNameExpr: void 0
 	};
-	const { className: _omit, ...rest } = normalized.staticAttrs;
 	return {
-		attrsInfo: {
-			...normalized,
-			staticAttrs: rest
-		},
-		staticClassNameExpr: j.literal(className)
+		attrsInfo: hasStaticClassName ? (() => {
+			const { className: _omit, ...rest } = normalized.staticAttrs;
+			return {
+				...normalized,
+				staticAttrs: rest
+			};
+		})() : normalized,
+		staticClassNameExpr: buildStaticClassNameExpr(j, hasStaticClassName ? className : void 0, bridgeClassVar)
 	};
 }
 /**
@@ -9499,6 +9545,10 @@ function collectDestructurePropsFromStyleFns(emitter, args) {
 	}
 	for (const prop of d.shouldForwardProp?.dropProps ?? []) if (prop && !destructureProps.includes(prop)) destructureProps.push(prop);
 }
+/** Escape characters that are special inside template literal quasi strings. */
+function escapeTemplateRaw(s) {
+	return s.replace(/\\|`|\$\{/g, "\\$&");
+}
 
 //#endregion
 //#region src/internal/emit-wrappers/wrapper-emitter.ts
@@ -10014,7 +10064,7 @@ var WrapperEmitter = class {
 		return false;
 	}
 	emitMinimalWrapper(args) {
-		const { localName, tagName, propsTypeName, inlineTypeText, styleArgs, destructureProps, propDefaults, allowClassNameProp = false, allowStyleProp = false, allowAsProp = false, includeRest = true, defaultAttrs = [], conditionalAttrs = [], invertedBoolAttrs = [], staticAttrs = {}, inlineStyleProps = [], attrsAsTag } = args;
+		const { localName, tagName, propsTypeName, inlineTypeText, styleArgs, destructureProps, propDefaults, allowClassNameProp = false, allowStyleProp = false, allowAsProp = false, includeRest = true, defaultAttrs = [], conditionalAttrs = [], invertedBoolAttrs = [], staticAttrs = {}, inlineStyleProps = [], attrsAsTag, bridgeClassVar } = args;
 		const { j } = this;
 		const expandedDestructureProps = new Set(destructureProps.filter(Boolean));
 		const collectCondIdentifiers = (node) => {
@@ -10097,6 +10147,7 @@ var WrapperEmitter = class {
 			const { className: _omitClassName, ...rest } = staticAttrs;
 			return rest;
 		})();
+		const staticClassNameExpr = buildStaticClassNameExpr(j, staticClassName, bridgeClassVar);
 		const merging = emitStyleMerging({
 			j,
 			emitter: this,
@@ -10106,7 +10157,7 @@ var WrapperEmitter = class {
 			allowClassNameProp,
 			allowStyleProp,
 			inlineStyleProps,
-			staticClassNameExpr: staticClassName ? j.literal(staticClassName) : void 0
+			staticClassNameExpr
 		});
 		const jsxAttrs = [];
 		for (const a of defaultAttrs) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.jsxExpressionContainer(j.logicalExpression("??", j.identifier(a.jsxProp), this.literalExpr(a.value)))));
@@ -10187,8 +10238,8 @@ var WrapperEmitter = class {
 	splitExtraStyleArgs(d) {
 		return splitExtraStyleArgs(this.j, this.stylesIdentifier, d);
 	}
-	splitAttrsInfo(attrsInfo) {
-		return splitAttrsInfo(this.j, attrsInfo);
+	splitAttrsInfo(attrsInfo, bridgeClassVar) {
+		return splitAttrsInfo(this.j, attrsInfo, bridgeClassVar);
 	}
 	buildVariantDimensionLookups(args) {
 		buildVariantDimensionLookups(this.j, args);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components-to-stylex-codemod",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Codemod to transform styled-components to StyleX",
   "keywords": [
     "codemod",