@typestyles/migrate 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -4,7 +4,7 @@
 var parser = require('@babel/parser');
 var generate = require('@babel/generator');
 var traverse = require('@babel/traverse');
-var t2 = require('@babel/types');
+var t4 = require('@babel/types');
 var postcss = require('postcss');
 var promises = require('fs/promises');
 var path = require('path');
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
 
 var generate__default = /*#__PURE__*/_interopDefault(generate);
 var traverse__default = /*#__PURE__*/_interopDefault(traverse);
-var t2__namespace = /*#__PURE__*/_interopNamespace(t2);
+var t4__namespace = /*#__PURE__*/_interopNamespace(t4);
 var postcss__default = /*#__PURE__*/_interopDefault(postcss);
 var fg__default = /*#__PURE__*/_interopDefault(fg);
 var picomatch__default = /*#__PURE__*/_interopDefault(picomatch);
@@ -42,42 +42,53 @@ var picomatch__default = /*#__PURE__*/_interopDefault(picomatch);
 function camelCaseProperty(property) {
   return property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 }
-function toValueNode(value) {
+function toValueNode(value, varReplacements) {
   const trimmed = value.trim();
+  if (varReplacements?.has(trimmed)) {
+    return varReplacements.get(trimmed);
+  }
   if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
-    return t2__namespace.numericLiteral(Number(trimmed));
+    return t4__namespace.numericLiteral(Number(trimmed));
   }
-  return t2__namespace.stringLiteral(trimmed);
+  return t4__namespace.stringLiteral(trimmed);
 }
 function toKeyNode(key) {
   if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key)) {
-    return t2__namespace.identifier(key);
+    return t4__namespace.identifier(key);
   }
-  return t2__namespace.stringLiteral(key);
+  return t4__namespace.stringLiteral(key);
 }
-function nodesToObject(nodes, warnings) {
+function nodesToObject(nodes, warnings, varReplacements) {
   const properties = [];
   for (const node of nodes ?? []) {
     if (node.type === "decl") {
       const normalized = node.prop.startsWith("--") ? node.prop : camelCaseProperty(node.prop);
-      properties.push(t2__namespace.objectProperty(toKeyNode(normalized), toValueNode(node.value)));
+      properties.push(
+        t4__namespace.objectProperty(toKeyNode(normalized), toValueNode(node.value, varReplacements))
+      );
       continue;
     }
     if (node.type === "rule") {
-      const nested = nodesToObject(node.nodes, warnings);
-      properties.push(t2__namespace.objectProperty(t2__namespace.stringLiteral(node.selector.trim()), nested));
+      const nested = nodesToObject(node.nodes, warnings, varReplacements);
+      properties.push(t4__namespace.objectProperty(t4__namespace.stringLiteral(node.selector.trim()), nested));
+      continue;
+    }
+    if (node.type === "atrule") {
+      const nested = nodesToObject(node.nodes, warnings, varReplacements);
+      const atRuleKey = `@${node.name}${node.params ? ` ${node.params}` : ""}`;
+      properties.push(t4__namespace.objectProperty(t4__namespace.stringLiteral(atRuleKey), nested));
       continue;
     }
     warnings.push({
       message: `Unsupported CSS node "${node.type}" skipped.`
     });
   }
-  return t2__namespace.objectExpression(properties);
+  return t4__namespace.objectExpression(properties);
 }
-function cssToObjectExpression(cssText, warnings) {
+function cssToObjectExpression(cssText, warnings, varReplacements) {
   try {
     const root = postcss__default.default.parse(cssText);
-    return nodesToObject(root.nodes, warnings);
+    return nodesToObject(root.nodes, warnings, varReplacements);
   } catch (error) {
     warnings.push({
       message: `Could not parse CSS template literal: ${error.message}`
@@ -85,30 +96,226 @@ function cssToObjectExpression(cssText, warnings) {
     return null;
   }
 }
+var PLACEHOLDER_PREFIX = "__ts_migrate_var_";
+function camelCaseProperty2(property) {
+  return property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+function placeholderToken(index) {
+  return `${PLACEHOLDER_PREFIX}${index}__`;
+}
+function extractSuffixFromQuasi(quasiText) {
+  const match = quasiText.match(/^([^;\n]*)/);
+  return match?.[1] ?? "";
+}
+function literalToCssValue(node) {
+  if (t4__namespace.isStringLiteral(node)) return node.value;
+  if (t4__namespace.isNumericLiteral(node)) return String(node.value);
+  return null;
+}
+function unwrapExpression(expression) {
+  if (t4__namespace.isParenthesizedExpression(expression)) {
+    return unwrapExpression(expression.expression);
+  }
+  return expression;
+}
+function extractCssPropertyBeforeInterpolation(quasiText) {
+  const match = quasiText.match(/([a-zA-Z-]+)\s*:\s*$/);
+  return match?.[1] ?? null;
+}
+function stripTrailingPropertyDeclaration(quasiText) {
+  return quasiText.replace(/[a-zA-Z-]+\s*:\s*$/, "");
+}
+function stripLeadingDeclarationRemainder(quasiText) {
+  const semiIdx = quasiText.indexOf(";");
+  if (semiIdx === -1) return quasiText;
+  return quasiText.slice(semiIdx + 1).trimStart();
+}
+function parsePropInterpolation(expression) {
+  if (!t4__namespace.isArrowFunctionExpression(expression)) return null;
+  const param = expression.params[0];
+  if (!param) return null;
+  const body = unwrapExpression(expression.body);
+  if (!t4__namespace.isExpression(body)) return null;
+  if (t4__namespace.isIdentifier(param)) {
+    if (t4__namespace.isMemberExpression(body) && !body.computed && t4__namespace.isIdentifier(body.object, { name: param.name }) && t4__namespace.isIdentifier(body.property)) {
+      return { propName: body.property.name };
+    }
+    return null;
+  }
+  if (t4__namespace.isObjectPattern(param) && t4__namespace.isIdentifier(body)) {
+    const propName = body.name;
+    const hasProp = param.properties.some((property) => {
+      if (!t4__namespace.isObjectProperty(property)) return false;
+      const keyName = t4__namespace.isIdentifier(property.key) ? property.key.name : t4__namespace.isStringLiteral(property.key) ? property.key.value : null;
+      return keyName === propName;
+    });
+    if (!hasProp) return null;
+    return { propName };
+  }
+  return null;
+}
+function parseBooleanTernaryInterpolation(expression) {
+  if (!t4__namespace.isArrowFunctionExpression(expression)) return null;
+  const param = expression.params[0];
+  if (!t4__namespace.isIdentifier(param)) return null;
+  const body = unwrapExpression(expression.body);
+  if (!t4__namespace.isConditionalExpression(body)) return null;
+  if (!t4__namespace.isMemberExpression(body.test) || body.test.computed || !t4__namespace.isIdentifier(body.test.object, { name: param.name }) || !t4__namespace.isIdentifier(body.test.property)) {
+    return null;
+  }
+  const trueValue = literalToCssValue(body.consequent);
+  const falseValue = literalToCssValue(body.alternate);
+  if (trueValue === null || falseValue === null) return null;
+  return {
+    propName: body.test.property.name,
+    trueValue,
+    falseValue
+  };
+}
+function parseTemplateInterpolations(template) {
+  const interpolations = [];
+  for (let i = 0; i < template.expressions.length; i++) {
+    const expression = template.expressions[i];
+    if (!t4__namespace.isExpression(expression)) return null;
+    const parsed = parsePropInterpolation(expression);
+    if (!parsed) return null;
+    const followingQuasi = template.quasis[i + 1]?.value.cooked ?? "";
+    interpolations.push({
+      index: i,
+      propName: parsed.propName,
+      suffix: extractSuffixFromQuasi(followingQuasi)
+    });
+  }
+  return interpolations;
+}
+function parseBooleanTemplateInterpolations(template) {
+  const interpolations = [];
+  for (let i = 0; i < template.expressions.length; i++) {
+    const expression = template.expressions[i];
+    if (!t4__namespace.isExpression(expression)) return null;
+    const parsed = parseBooleanTernaryInterpolation(expression);
+    if (!parsed) return null;
+    const quasiBefore = template.quasis[i]?.value.cooked ?? "";
+    const cssProperty = extractCssPropertyBeforeInterpolation(quasiBefore);
+    if (!cssProperty) return null;
+    interpolations.push({
+      index: i,
+      propName: parsed.propName,
+      trueValue: parsed.trueValue,
+      falseValue: parsed.falseValue,
+      cssProperty: camelCaseProperty2(cssProperty)
+    });
+  }
+  return interpolations;
+}
+function reconstructInterpolatedCss(template, interpolations) {
+  let result = "";
+  for (let i = 0; i < template.quasis.length; i++) {
+    let quasiText = template.quasis[i].value.cooked ?? "";
+    if (i > 0) {
+      const interpolation = interpolations[i - 1];
+      if (interpolation?.suffix && quasiText.startsWith(interpolation.suffix)) {
+        quasiText = quasiText.slice(interpolation.suffix.length);
+      }
+    }
+    result += quasiText;
+    if (i < interpolations.length) {
+      result += placeholderToken(interpolations[i].index);
+    }
+  }
+  return result;
+}
+function reconstructStaticCssWithoutVariants(template, booleanInterpolations) {
+  const skipIndices = new Set(booleanInterpolations.map((interpolation) => interpolation.index));
+  let result = "";
+  for (let i = 0; i < template.quasis.length; i++) {
+    let quasiText = template.quasis[i].value.cooked ?? "";
+    if (skipIndices.has(i)) {
+      quasiText = stripTrailingPropertyDeclaration(quasiText);
+    }
+    if (i > 0 && skipIndices.has(i - 1)) {
+      quasiText = stripLeadingDeclarationRemainder(quasiText);
+    }
+    result += quasiText;
+  }
+  return result.trim();
+}
+function toVarDebugName(componentName, propName) {
+  return `${componentName}${propName.charAt(0).toUpperCase()}${propName.slice(1)}`;
+}
+function toComponentConstName(componentName) {
+  if (!componentName) return componentName;
+  return componentName.charAt(0).toLowerCase() + componentName.slice(1);
+}
+function toCssValueNode(value) {
+  if (/^-?\d+(\.\d+)?$/.test(value.trim())) {
+    return t4__namespace.numericLiteral(Number(value));
+  }
+  return t4__namespace.stringLiteral(value);
+}
+function toKeyNode2(key) {
+  if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key)) {
+    return t4__namespace.identifier(key);
+  }
+  return t4__namespace.stringLiteral(key);
+}
+function buildVariantStyles(properties) {
+  return t4__namespace.objectExpression(
+    Object.entries(properties).map(
+      ([key, value]) => t4__namespace.objectProperty(toKeyNode2(key), toCssValueNode(value))
+    )
+  );
+}
+function buildVariantComponentConfig(baseObject, booleanInterpolations) {
+  const variantGroups = /* @__PURE__ */ new Map();
+  for (const interpolation of booleanInterpolations) {
+    const group = variantGroups.get(interpolation.propName) ?? { true: {}, false: {} };
+    group.true[interpolation.cssProperty] = interpolation.trueValue;
+    group.false[interpolation.cssProperty] = interpolation.falseValue;
+    variantGroups.set(interpolation.propName, group);
+  }
+  const variantsProperties = [...variantGroups.entries()].map(
+    ([propName, values]) => t4__namespace.objectProperty(
+      t4__namespace.identifier(propName),
+      t4__namespace.objectExpression([
+        t4__namespace.objectProperty(t4__namespace.identifier("true"), buildVariantStyles(values.true)),
+        t4__namespace.objectProperty(t4__namespace.identifier("false"), buildVariantStyles(values.false))
+      ])
+    )
+  );
+  const defaultVariantProperties = [...variantGroups.keys()].map(
+    (propName) => t4__namespace.objectProperty(t4__namespace.identifier(propName), t4__namespace.booleanLiteral(false))
+  );
+  return t4__namespace.objectExpression([
+    t4__namespace.objectProperty(t4__namespace.identifier("base"), baseObject),
+    t4__namespace.objectProperty(t4__namespace.identifier("variants"), t4__namespace.objectExpression(variantsProperties)),
+    t4__namespace.objectProperty(t4__namespace.identifier("defaultVariants"), t4__namespace.objectExpression(defaultVariantProperties))
+  ]);
+}
 
 // src/transform.ts
 function toKebabCase(input) {
   return input.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").toLowerCase();
 }
 function memberExpressionToJsxName(expression) {
-  if (t2__namespace.isIdentifier(expression)) {
-    return t2__namespace.jsxIdentifier(expression.name);
+  if (t4__namespace.isIdentifier(expression)) {
+    return t4__namespace.jsxIdentifier(expression.name);
   }
-  if (t2__namespace.isMemberExpression(expression) && !expression.computed) {
+  if (t4__namespace.isMemberExpression(expression) && !expression.computed) {
     const left = memberExpressionToJsxName(expression.object);
-    const right = t2__namespace.isIdentifier(expression.property) ? t2__namespace.jsxIdentifier(expression.property.name) : null;
+    const right = t4__namespace.isIdentifier(expression.property) ? t4__namespace.jsxIdentifier(expression.property.name) : null;
     if (!left || !right) return null;
-    return t2__namespace.jsxMemberExpression(left, right);
+    return t4__namespace.jsxMemberExpression(left, right);
   }
   return null;
 }
 function parseStyledTarget(tag, styledNames) {
-  if (t2__namespace.isMemberExpression(tag) && t2__namespace.isIdentifier(tag.object) && styledNames.has(tag.object.name) && t2__namespace.isIdentifier(tag.property)) {
-    return { kind: "intrinsic", jsxName: t2__namespace.jsxIdentifier(tag.property.name) };
+  if (t4__namespace.isMemberExpression(tag) && t4__namespace.isIdentifier(tag.object) && styledNames.has(tag.object.name) && t4__namespace.isIdentifier(tag.property)) {
+    return { kind: "intrinsic", jsxName: t4__namespace.jsxIdentifier(tag.property.name) };
   }
-  if (t2__namespace.isCallExpression(tag) && t2__namespace.isIdentifier(tag.callee) && styledNames.has(tag.callee.name)) {
+  if (t4__namespace.isCallExpression(tag) && t4__namespace.isIdentifier(tag.callee) && styledNames.has(tag.callee.name)) {
     const firstArg = tag.arguments[0];
-    if (!firstArg || !t2__namespace.isExpression(firstArg)) return null;
+    if (!firstArg || !t4__namespace.isExpression(firstArg)) return null;
     const jsxName = memberExpressionToJsxName(firstArg);
     if (!jsxName) return null;
     return { kind: "component", jsxName };
@@ -118,74 +325,77 @@ function parseStyledTarget(tag, styledNames) {
 function addWarning(warnings, message, nodeName) {
   warnings.push({ message, nodeName });
 }
-function createMergedClassExpression(existing, classNameIdentifier) {
-  return t2__namespace.callExpression(
-    t2__namespace.memberExpression(
-      t2__namespace.callExpression(
-        t2__namespace.memberExpression(
-          t2__namespace.arrayExpression([existing, classNameIdentifier]),
-          t2__namespace.identifier("filter")
+function createMergedClassExpression(existing, classNameExpression) {
+  return t4__namespace.callExpression(
+    t4__namespace.memberExpression(
+      t4__namespace.callExpression(
+        t4__namespace.memberExpression(
+          t4__namespace.arrayExpression([existing, classNameExpression]),
+          t4__namespace.identifier("filter")
         ),
-        [t2__namespace.identifier("Boolean")]
+        [t4__namespace.identifier("Boolean")]
       ),
-      t2__namespace.identifier("join")
+      t4__namespace.identifier("join")
     ),
-    [t2__namespace.stringLiteral(" ")]
+    [t4__namespace.stringLiteral(" ")]
   );
 }
-function updateClassNameAttribute(openingElement, classNameIdentifier) {
+function updateClassNameAttribute(openingElement, classNameExpression) {
   const existingAttr = openingElement.attributes.find(
-    (attribute) => t2__namespace.isJSXAttribute(attribute) && t2__namespace.isJSXIdentifier(attribute.name, { name: "className" })
+    (attribute) => t4__namespace.isJSXAttribute(attribute) && t4__namespace.isJSXIdentifier(attribute.name, { name: "className" })
   );
   if (!existingAttr) {
     openingElement.attributes.push(
-      t2__namespace.jsxAttribute(t2__namespace.jsxIdentifier("className"), t2__namespace.jsxExpressionContainer(classNameIdentifier))
+      t4__namespace.jsxAttribute(t4__namespace.jsxIdentifier("className"), t4__namespace.jsxExpressionContainer(classNameExpression))
     );
     return;
   }
   if (!existingAttr.value) {
-    existingAttr.value = t2__namespace.jsxExpressionContainer(classNameIdentifier);
+    existingAttr.value = t4__namespace.jsxExpressionContainer(classNameExpression);
     return;
   }
-  if (t2__namespace.isStringLiteral(existingAttr.value)) {
-    existingAttr.value = t2__namespace.jsxExpressionContainer(
-      createMergedClassExpression(t2__namespace.stringLiteral(existingAttr.value.value), classNameIdentifier)
+  if (t4__namespace.isStringLiteral(existingAttr.value)) {
+    existingAttr.value = t4__namespace.jsxExpressionContainer(
+      createMergedClassExpression(t4__namespace.stringLiteral(existingAttr.value.value), classNameExpression)
     );
     return;
   }
-  if (t2__namespace.isJSXExpressionContainer(existingAttr.value)) {
-    existingAttr.value = t2__namespace.jsxExpressionContainer(
+  if (t4__namespace.isJSXExpressionContainer(existingAttr.value)) {
+    existingAttr.value = t4__namespace.jsxExpressionContainer(
       createMergedClassExpression(
         existingAttr.value.expression,
-        classNameIdentifier
+        classNameExpression
       )
     );
   }
 }
-function ensureStylesImport(ast) {
+function ensureTypestylesImport(ast, needsVars) {
+  const requiredSpecifiers = /* @__PURE__ */ new Set(["styles"]);
+  if (needsVars) {
+    requiredSpecifiers.add("createVar");
+    requiredSpecifiers.add("assignVars");
+  }
   let typestylesImport = null;
   for (const statement of ast.program.body) {
-    if (t2__namespace.isImportDeclaration(statement) && statement.source.value === "typestyles") {
+    if (t4__namespace.isImportDeclaration(statement) && statement.source.value === "typestyles") {
       typestylesImport = statement;
       break;
     }
   }
+  const buildSpecifiers = (names) => [...names].map((name) => t4__namespace.importSpecifier(t4__namespace.identifier(name), t4__namespace.identifier(name)));
   if (!typestylesImport) {
     ast.program.body.unshift(
-      t2__namespace.importDeclaration(
-        [t2__namespace.importSpecifier(t2__namespace.identifier("styles"), t2__namespace.identifier("styles"))],
-        t2__namespace.stringLiteral("typestyles")
-      )
+      t4__namespace.importDeclaration(buildSpecifiers(requiredSpecifiers), t4__namespace.stringLiteral("typestyles"))
     );
     return;
   }
-  const hasStylesSpecifier = typestylesImport.specifiers.some(
-    (specifier) => t2__namespace.isImportSpecifier(specifier) && t2__namespace.isIdentifier(specifier.imported, { name: "styles" }) && t2__namespace.isIdentifier(specifier.local, { name: "styles" })
-  );
-  if (!hasStylesSpecifier) {
-    typestylesImport.specifiers.push(
-      t2__namespace.importSpecifier(t2__namespace.identifier("styles"), t2__namespace.identifier("styles"))
+  for (const name of requiredSpecifiers) {
+    const hasSpecifier = typestylesImport.specifiers.some(
+      (specifier) => t4__namespace.isImportSpecifier(specifier) && t4__namespace.isIdentifier(specifier.imported, { name }) && t4__namespace.isIdentifier(specifier.local, { name })
     );
+    if (!hasSpecifier) {
+      typestylesImport.specifiers.push(t4__namespace.importSpecifier(t4__namespace.identifier(name), t4__namespace.identifier(name)));
+    }
   }
 }
 function cleanupUnusedImports(ast) {
@@ -195,7 +405,7 @@ function cleanupUnusedImports(ast) {
     },
     ImportDeclaration(path) {
       const unusedLocals = path.node.specifiers.filter((specifier) => {
-        if (path.node.source.value === "typestyles" && t2__namespace.isImportSpecifier(specifier) && t2__namespace.isIdentifier(specifier.local, { name: "styles" })) {
+        if (path.node.source.value === "typestyles" && t4__namespace.isImportSpecifier(specifier) && (specifier.local.name === "styles" || specifier.local.name === "createVar" || specifier.local.name === "assignVars")) {
           return false;
         }
         const local = specifier.local.name;
@@ -212,6 +422,177 @@ function cleanupUnusedImports(ast) {
     }
   });
 }
+function createAssignVarValue(propExpression, suffix) {
+  if (!suffix) return propExpression;
+  if (t4__namespace.isStringLiteral(propExpression)) {
+    return t4__namespace.stringLiteral(`${propExpression.value}${suffix}`);
+  }
+  return t4__namespace.binaryExpression("+", propExpression, t4__namespace.stringLiteral(suffix));
+}
+function buildAssignVarsCall(propVars, propValues) {
+  const properties = propVars.filter((binding) => propValues.has(binding.propName)).map((binding) => {
+    const propExpression = propValues.get(binding.propName);
+    return t4__namespace.objectProperty(
+      t4__namespace.identifier(binding.varConstName),
+      createAssignVarValue(propExpression, binding.suffix),
+      true
+    );
+  });
+  return t4__namespace.callExpression(t4__namespace.identifier("assignVars"), [t4__namespace.objectExpression(properties)]);
+}
+function mergeStyleExpressions(existing, assignVarsCall) {
+  return t4__namespace.objectExpression([t4__namespace.spreadElement(existing), t4__namespace.spreadElement(assignVarsCall)]);
+}
+function updateStyleAttribute(openingElement, assignVarsCall) {
+  const existingAttr = openingElement.attributes.find(
+    (attribute) => t4__namespace.isJSXAttribute(attribute) && t4__namespace.isJSXIdentifier(attribute.name, { name: "style" })
+  );
+  if (!existingAttr) {
+    openingElement.attributes.push(
+      t4__namespace.jsxAttribute(t4__namespace.jsxIdentifier("style"), t4__namespace.jsxExpressionContainer(assignVarsCall))
+    );
+    return;
+  }
+  if (!existingAttr.value) {
+    existingAttr.value = t4__namespace.jsxExpressionContainer(assignVarsCall);
+    return;
+  }
+  if (t4__namespace.isJSXExpressionContainer(existingAttr.value)) {
+    existingAttr.value = t4__namespace.jsxExpressionContainer(
+      mergeStyleExpressions(existingAttr.value.expression, assignVarsCall)
+    );
+  }
+}
+function collectPropValuesFromJsx(openingElement, propNames) {
+  const values = /* @__PURE__ */ new Map();
+  for (const attribute of openingElement.attributes) {
+    if (!t4__namespace.isJSXAttribute(attribute) || !t4__namespace.isJSXIdentifier(attribute.name)) continue;
+    if (!propNames.has(attribute.name.name)) continue;
+    if (!attribute.value) {
+      values.set(attribute.name.name, t4__namespace.booleanLiteral(true));
+      continue;
+    }
+    if (t4__namespace.isStringLiteral(attribute.value)) {
+      values.set(attribute.name.name, t4__namespace.stringLiteral(attribute.value.value));
+      continue;
+    }
+    if (t4__namespace.isJSXExpressionContainer(attribute.value)) {
+      values.set(attribute.name.name, attribute.value.expression);
+    }
+  }
+  return values;
+}
+function removeStyledProps(openingElement, propNames) {
+  openingElement.attributes = openingElement.attributes.filter((attribute) => {
+    if (!t4__namespace.isJSXAttribute(attribute) || !t4__namespace.isJSXIdentifier(attribute.name)) return true;
+    return !propNames.has(attribute.name.name);
+  });
+}
+function buildComponentClassNameExpression(componentConstName, variantProps, propValues) {
+  const properties = variantProps.filter((propName) => propValues.has(propName)).map((propName) => t4__namespace.objectProperty(t4__namespace.identifier(propName), propValues.get(propName)));
+  if (properties.length === 0) {
+    return t4__namespace.callExpression(t4__namespace.identifier(componentConstName), []);
+  }
+  return t4__namespace.callExpression(t4__namespace.identifier(componentConstName), [t4__namespace.objectExpression(properties)]);
+}
+function migrateBooleanVariantTemplate(path, variableName, template, styledTarget, warnings, styledTransforms) {
+  const booleanInterpolations = parseBooleanTemplateInterpolations(template);
+  if (!booleanInterpolations) return false;
+  const staticCss = reconstructStaticCssWithoutVariants(template, booleanInterpolations);
+  const baseObject = cssToObjectExpression(staticCss, warnings);
+  if (!baseObject) {
+    addWarning(warnings, "Skipped because CSS could not be parsed.", variableName);
+    return false;
+  }
+  const componentConstName = path.scope.generateUidIdentifier(
+    toComponentConstName(variableName)
+  ).name;
+  const componentConfig = buildVariantComponentConfig(baseObject, booleanInterpolations);
+  const variantProps = [
+    ...new Set(booleanInterpolations.map((interpolation) => interpolation.propName))
+  ];
+  const declaration = path.parentPath;
+  if (!declaration.isVariableDeclaration()) return false;
+  declaration.node.declarations = [
+    t4__namespace.variableDeclarator(
+      t4__namespace.identifier(componentConstName),
+      t4__namespace.callExpression(t4__namespace.memberExpression(t4__namespace.identifier("styles"), t4__namespace.identifier("component")), [
+        t4__namespace.stringLiteral(toKebabCase(variableName)),
+        componentConfig
+      ])
+    )
+  ];
+  styledTransforms.set(variableName, {
+    originalName: variableName,
+    mode: "component",
+    classConstName: componentConstName,
+    target: styledTarget,
+    propVars: [],
+    variantProps
+  });
+  return true;
+}
+function migrateInterpolatedTemplate(path, variableName, template, styledTarget, warnings, styledTransforms) {
+  const interpolations = parseTemplateInterpolations(template);
+  if (!interpolations) {
+    addWarning(
+      warnings,
+      "Skipped template literal with unsupported interpolations. Only prop-based patterns like `${props => props.color}` are migrated.",
+      variableName
+    );
+    return false;
+  }
+  const cssText = reconstructInterpolatedCss(template, interpolations);
+  const propVars = interpolations.map((interpolation) => ({
+    propName: interpolation.propName,
+    varConstName: path.scope.generateUidIdentifier(
+      `${variableName}${interpolation.propName.charAt(0).toUpperCase()}${interpolation.propName.slice(1)}Var`
+    ).name,
+    suffix: interpolation.suffix
+  }));
+  const varReplacements = /* @__PURE__ */ new Map();
+  for (let i = 0; i < interpolations.length; i++) {
+    varReplacements.set(
+      placeholderToken(interpolations[i].index),
+      t4__namespace.identifier(propVars[i].varConstName)
+    );
+  }
+  const objectExpression4 = cssToObjectExpression(cssText, warnings, varReplacements);
+  if (!objectExpression4) {
+    addWarning(warnings, "Skipped because CSS could not be parsed.", variableName);
+    return false;
+  }
+  const classConstName = path.scope.generateUidIdentifier(`${variableName}Class`).name;
+  const varDeclarators = propVars.map(
+    (propVar) => t4__namespace.variableDeclarator(
+      t4__namespace.identifier(propVar.varConstName),
+      t4__namespace.callExpression(t4__namespace.identifier("createVar"), [
+        t4__namespace.stringLiteral(toVarDebugName(variableName, propVar.propName))
+      ])
+    )
+  );
+  const declaration = path.parentPath;
+  if (!declaration.isVariableDeclaration()) return false;
+  declaration.node.declarations = [
+    ...varDeclarators,
+    t4__namespace.variableDeclarator(
+      t4__namespace.identifier(classConstName),
+      t4__namespace.callExpression(t4__namespace.memberExpression(t4__namespace.identifier("styles"), t4__namespace.identifier("class")), [
+        t4__namespace.stringLiteral(toKebabCase(variableName)),
+        objectExpression4
+      ])
+    )
+  ];
+  styledTransforms.set(variableName, {
+    originalName: variableName,
+    mode: "class",
+    classConstName,
+    target: styledTarget,
+    propVars,
+    variantProps: []
+  });
+  return true;
+}
 function isOnlyJsxReferences(binding) {
   return binding.referencePaths.every((referencePath) => {
     const parent = referencePath.parentPath;
@@ -229,21 +610,22 @@ function migrateSource(filePath, source) {
   const styledNames = /* @__PURE__ */ new Set();
   const cssTagNames = /* @__PURE__ */ new Set();
   const styledTransforms = /* @__PURE__ */ new Map();
+  let needsVars = false;
   traverse__default.default(ast, {
     ImportDeclaration(path) {
       if (path.node.source.value === "styled-components" || path.node.source.value === "@emotion/styled") {
         for (const specifier of path.node.specifiers) {
-          if (t2__namespace.isImportDefaultSpecifier(specifier)) {
+          if (t4__namespace.isImportDefaultSpecifier(specifier)) {
             styledNames.add(specifier.local.name);
           }
-          if (t2__namespace.isImportSpecifier(specifier) && t2__namespace.isIdentifier(specifier.imported, { name: "css" })) {
+          if (t4__namespace.isImportSpecifier(specifier) && t4__namespace.isIdentifier(specifier.imported, { name: "css" })) {
             cssTagNames.add(specifier.local.name);
           }
         }
       }
       if (path.node.source.value === "@emotion/react" || path.node.source.value === "@emotion/css") {
         for (const specifier of path.node.specifiers) {
-          if (t2__namespace.isImportSpecifier(specifier) && t2__namespace.isIdentifier(specifier.imported, { name: "css" })) {
+          if (t4__namespace.isImportSpecifier(specifier) && t4__namespace.isIdentifier(specifier.imported, { name: "css" })) {
             cssTagNames.add(specifier.local.name);
           }
         }
@@ -252,27 +634,66 @@ function migrateSource(filePath, source) {
   });
   traverse__default.default(ast, {
     VariableDeclarator(path) {
-      if (!t2__namespace.isIdentifier(path.node.id)) return;
-      if (!t2__namespace.isTaggedTemplateExpression(path.node.init)) return;
+      if (!t4__namespace.isIdentifier(path.node.id)) return;
+      if (!t4__namespace.isTaggedTemplateExpression(path.node.init)) return;
       const variableName = path.node.id.name;
       const binding = path.scope.getBinding(variableName);
       if (!binding) return;
       const template = path.node.init.quasi;
-      if (template.expressions.length > 0) {
-        addWarning(
+      const hasInterpolations = template.expressions.length > 0;
+      const styledTarget = parseStyledTarget(path.node.init.tag, styledNames);
+      if (hasInterpolations) {
+        if (!styledTarget) {
+          addWarning(
+            warnings,
+            "Skipped template literal with interpolations. Only styled-components prop patterns are migrated.",
+            variableName
+          );
+          return;
+        }
+        const declaration = path.parentPath;
+        if (declaration.parentPath?.isExportNamedDeclaration() || declaration.parentPath?.isExportDefaultDeclaration()) {
+          addWarning(
+            warnings,
+            "Skipped exported styled component to avoid changing external API shape.",
+            variableName
+          );
+          return;
+        }
+        if (!isOnlyJsxReferences(binding)) {
+          addWarning(warnings, "Skipped styled component with non-JSX references.", variableName);
+          return;
+        }
+        if (migrateBooleanVariantTemplate(
+          path,
+          variableName,
+          template,
+          styledTarget,
           warnings,
-          "Skipped template literal with interpolations. Only static templates are migrated.",
-          variableName
-        );
+          styledTransforms
+        )) {
+          changed = true;
+          return;
+        }
+        if (migrateInterpolatedTemplate(
+          path,
+          variableName,
+          template,
+          styledTarget,
+          warnings,
+          styledTransforms
+        )) {
+          needsVars = true;
+          changed = true;
+        }
         return;
       }
       const cssText = template.quasis.map((quasi) => quasi.value.cooked ?? "").join("");
-      const objectExpression2 = cssToObjectExpression(cssText, warnings);
-      if (!objectExpression2) {
+      const objectExpression4 = cssToObjectExpression(cssText, warnings);
+      if (!objectExpression4) {
         addWarning(warnings, "Skipped because CSS could not be parsed.", variableName);
         return;
       }
-      const styledTarget = parseStyledTarget(path.node.init.tag, styledNames);
       if (styledTarget) {
         const declaration = path.parentPath;
         if (declaration.parentPath?.isExportNamedDeclaration() || declaration.parentPath?.isExportDefaultDeclaration()) {
@@ -288,23 +709,26 @@ function migrateSource(filePath, source) {
           return;
         }
         const classConstName = path.scope.generateUidIdentifier(`${variableName}Class`).name;
-        path.node.id = t2__namespace.identifier(classConstName);
-        path.node.init = t2__namespace.callExpression(
-          t2__namespace.memberExpression(t2__namespace.identifier("styles"), t2__namespace.identifier("class")),
-          [t2__namespace.stringLiteral(toKebabCase(variableName)), objectExpression2]
+        path.node.id = t4__namespace.identifier(classConstName);
+        path.node.init = t4__namespace.callExpression(
+          t4__namespace.memberExpression(t4__namespace.identifier("styles"), t4__namespace.identifier("class")),
+          [t4__namespace.stringLiteral(toKebabCase(variableName)), objectExpression4]
         );
         styledTransforms.set(variableName, {
           originalName: variableName,
+          mode: "class",
           classConstName,
-          target: styledTarget
+          target: styledTarget,
+          propVars: [],
+          variantProps: []
         });
         changed = true;
         return;
       }
-      if (t2__namespace.isIdentifier(path.node.init.tag) && cssTagNames.has(path.node.init.tag.name)) {
-        path.node.init = t2__namespace.callExpression(
-          t2__namespace.memberExpression(t2__namespace.identifier("styles"), t2__namespace.identifier("class")),
-          [t2__namespace.stringLiteral(toKebabCase(variableName)), objectExpression2]
+      if (t4__namespace.isIdentifier(path.node.init.tag) && cssTagNames.has(path.node.init.tag.name)) {
+        path.node.init = t4__namespace.callExpression(
+          t4__namespace.memberExpression(t4__namespace.identifier("styles"), t4__namespace.identifier("class")),
+          [t4__namespace.stringLiteral(toKebabCase(variableName)), objectExpression4]
         );
         changed = true;
       }
@@ -314,19 +738,36 @@ function migrateSource(filePath, source) {
     traverse__default.default(ast, {
       JSXElement(path) {
         const openingName = path.node.openingElement.name;
-        if (!t2__namespace.isJSXIdentifier(openingName)) return;
+        if (!t4__namespace.isJSXIdentifier(openingName)) return;
         const transform = styledTransforms.get(openingName.name);
         if (!transform) return;
         path.node.openingElement.name = transform.target.jsxName;
         if (path.node.closingElement) {
           path.node.closingElement.name = transform.target.jsxName;
         }
-        updateClassNameAttribute(path.node.openingElement, t2__namespace.identifier(transform.classConstName));
+        const classNameExpression = transform.mode === "component" ? buildComponentClassNameExpression(
+          transform.classConstName,
+          transform.variantProps,
+          collectPropValuesFromJsx(path.node.openingElement, new Set(transform.variantProps))
+        ) : t4__namespace.identifier(transform.classConstName);
+        updateClassNameAttribute(path.node.openingElement, classNameExpression);
+        if (transform.propVars.length > 0) {
+          const propNames = new Set(transform.propVars.map((propVar) => propVar.propName));
+          const propValues = collectPropValuesFromJsx(path.node.openingElement, propNames);
+          if (propValues.size > 0) {
+            const assignVarsCall = buildAssignVarsCall(transform.propVars, propValues);
+            updateStyleAttribute(path.node.openingElement, assignVarsCall);
+            removeStyledProps(path.node.openingElement, propNames);
+          }
+        }
+        if (transform.variantProps.length > 0) {
+          removeStyledProps(path.node.openingElement, new Set(transform.variantProps));
+        }
       }
     });
   }
   if (changed) {
-    ensureStylesImport(ast);
+    ensureTypestylesImport(ast, needsVars);
     cleanupUnusedImports(ast);
   }
   const output = generate__default.default(