@typestyles/migrate 0.4.0 → 0.5.1

package/dist/cli.cjs

@@ -302,7 +302,7 @@ function buildVariantStyles(properties) {
     )
   );
 }
-function buildVariantComponentConfig(baseObject, booleanInterpolations) {
+function buildVariantRecipeInput(name, baseObject, booleanInterpolations) {
   const variantGroups = /* @__PURE__ */ new Map();
   for (const interpolation of booleanInterpolations) {
     const group = variantGroups.get(interpolation.propName) ?? { true: {}, false: {} };
@@ -319,13 +319,24 @@ function buildVariantComponentConfig(baseObject, booleanInterpolations) {
       ])
     )
   );
-  const defaultVariantProperties = [...variantGroups.keys()].map(
-    (propName) => t4__namespace.objectProperty(t4__namespace.identifier(propName), t4__namespace.booleanLiteral(false))
+  const axisProperties = [...variantGroups.keys()].map(
+    (propName) => t4__namespace.objectProperty(
+      t4__namespace.identifier(propName),
+      t4__namespace.callExpression(t4__namespace.memberExpression(t4__namespace.identifier("variant"), t4__namespace.identifier("boolean")), [
+        t4__namespace.objectExpression([t4__namespace.objectProperty(t4__namespace.identifier("default"), 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))
+    t4__namespace.objectProperty(t4__namespace.identifier("name"), t4__namespace.stringLiteral(name)),
+    t4__namespace.objectProperty(t4__namespace.identifier("variants"), t4__namespace.objectExpression(axisProperties)),
+    t4__namespace.objectProperty(
+      t4__namespace.identifier("styles"),
+      t4__namespace.objectExpression([
+        t4__namespace.objectProperty(t4__namespace.identifier("base"), baseObject),
+        t4__namespace.objectProperty(t4__namespace.identifier("variants"), t4__namespace.objectExpression(variantsProperties))
+      ])
+    )
   ]);
 }
 
@@ -405,17 +416,38 @@ function updateClassNameAttribute(openingElement, classNameExpression) {
     );
   }
 }
-function ensureTypestylesImport(ast, needsVars) {
-  const requiredSpecifiers = /* @__PURE__ */ new Set(["styles"]);
-  if (needsVars) {
+function hasLocalBinding(ast, name) {
+  for (const statement of ast.program.body) {
+    if (!t4__namespace.isVariableDeclaration(statement)) continue;
+    for (const declarator of statement.declarations) {
+      if (t4__namespace.isIdentifier(declarator.id) && declarator.id.name === name) return true;
+      if (t4__namespace.isObjectPattern(declarator.id)) {
+        for (const prop of declarator.id.properties) {
+          if (t4__namespace.isObjectProperty(prop) && t4__namespace.isIdentifier(prop.value) && prop.value.name === name) {
+            return true;
+          }
+        }
+      }
+    }
+  }
+  return false;
+}
+function ensureTypestylesRuntime(ast, needs) {
+  const requiredSpecifiers = /* @__PURE__ */ new Set(["createTypeStyles"]);
+  if (needs.recipe) requiredSpecifiers.add("variant");
+  if (needs.vars) {
     requiredSpecifiers.add("createVar");
     requiredSpecifiers.add("assignVars");
   }
   let typestylesImport = null;
-  for (const statement of ast.program.body) {
-    if (t4__namespace.isImportDeclaration(statement) && statement.source.value === "typestyles") {
-      typestylesImport = statement;
-      break;
+  let lastImportIndex = -1;
+  for (let i = 0; i < ast.program.body.length; i++) {
+    const statement = ast.program.body[i];
+    if (t4__namespace.isImportDeclaration(statement)) {
+      lastImportIndex = i;
+      if (statement.source.value === "typestyles" && typestylesImport == null) {
+        typestylesImport = statement;
+      }
     }
   }
   const buildSpecifiers = (names) => [...names].map((name) => t4__namespace.importSpecifier(t4__namespace.identifier(name), t4__namespace.identifier(name)));
@@ -423,16 +455,36 @@ function ensureTypestylesImport(ast, needsVars) {
     ast.program.body.unshift(
       t4__namespace.importDeclaration(buildSpecifiers(requiredSpecifiers), t4__namespace.stringLiteral("typestyles"))
     );
-    return;
+    lastImportIndex = 0;
+  } else {
+    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)));
+      }
+    }
   }
-  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 })
+  const destructureProps = [];
+  if (needs.style && !hasLocalBinding(ast, "style")) {
+    destructureProps.push(
+      t4__namespace.objectProperty(t4__namespace.identifier("style"), t4__namespace.identifier("style"), false, true)
+    );
+  }
+  if (needs.recipe && !hasLocalBinding(ast, "recipe")) {
+    destructureProps.push(
+      t4__namespace.objectProperty(t4__namespace.identifier("recipe"), t4__namespace.identifier("recipe"), false, true)
     );
-    if (!hasSpecifier) {
-      typestylesImport.specifiers.push(t4__namespace.importSpecifier(t4__namespace.identifier(name), t4__namespace.identifier(name)));
-    }
   }
+  if (destructureProps.length === 0) return;
+  const factoryDecl = t4__namespace.variableDeclaration("const", [
+    t4__namespace.variableDeclarator(
+      t4__namespace.objectPattern(destructureProps),
+      t4__namespace.callExpression(t4__namespace.identifier("createTypeStyles"), [])
+    )
+  ]);
+  ast.program.body.splice(lastImportIndex + 1, 0, factoryDecl);
 }
 function cleanupUnusedImports(ast) {
   traverse__default.default(ast, {
@@ -441,7 +493,7 @@ function cleanupUnusedImports(ast) {
     },
     ImportDeclaration(path) {
       const unusedLocals = path.node.specifiers.filter((specifier) => {
-        if (path.node.source.value === "typestyles" && t4__namespace.isImportSpecifier(specifier) && (specifier.local.name === "styles" || specifier.local.name === "createVar" || specifier.local.name === "assignVars")) {
+        if (path.node.source.value === "typestyles" && t4__namespace.isImportSpecifier(specifier) && (specifier.local.name === "createTypeStyles" || specifier.local.name === "createVar" || specifier.local.name === "assignVars")) {
           return false;
         }
         const local = specifier.local.name;
@@ -526,10 +578,8 @@ function removeStyledProps(openingElement, propNames) {
 }
 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)]);
+  const call = properties.length === 0 ? t4__namespace.callExpression(t4__namespace.identifier(componentConstName), []) : t4__namespace.callExpression(t4__namespace.identifier(componentConstName), [t4__namespace.objectExpression(properties)]);
+  return t4__namespace.memberExpression(call, t4__namespace.identifier("className"));
 }
 function migrateBooleanVariantTemplate(path, variableName, template, styledTarget, warnings, styledTransforms) {
   const booleanInterpolations = parseBooleanTemplateInterpolations(template);
@@ -543,7 +593,11 @@ function migrateBooleanVariantTemplate(path, variableName, template, styledTarge
   const componentConstName = path.scope.generateUidIdentifier(
     toComponentConstName(variableName)
   ).name;
-  const componentConfig = buildVariantComponentConfig(baseObject, booleanInterpolations);
+  const recipeInput = buildVariantRecipeInput(
+    toKebabCase(variableName),
+    baseObject,
+    booleanInterpolations
+  );
   const variantProps = [
     ...new Set(booleanInterpolations.map((interpolation) => interpolation.propName))
   ];
@@ -552,10 +606,7 @@ function migrateBooleanVariantTemplate(path, variableName, template, styledTarge
   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
-      ])
+      t4__namespace.callExpression(t4__namespace.identifier("recipe"), [recipeInput])
     )
   ];
   styledTransforms.set(variableName, {
@@ -613,7 +664,7 @@ function migrateInterpolatedTemplate(path, variableName, template, styledTarget,
     ...varDeclarators,
     t4__namespace.variableDeclarator(
       t4__namespace.identifier(classConstName),
-      t4__namespace.callExpression(t4__namespace.memberExpression(t4__namespace.identifier("styles"), t4__namespace.identifier("class")), [
+      t4__namespace.callExpression(t4__namespace.identifier("style"), [
         t4__namespace.stringLiteral(toKebabCase(variableName)),
         objectExpression4
       ])
@@ -647,6 +698,8 @@ function migrateSource(filePath, source) {
   const cssTagNames = /* @__PURE__ */ new Set();
   const styledTransforms = /* @__PURE__ */ new Map();
   let needsVars = false;
+  let needsStyle = false;
+  let needsRecipe = false;
   traverse__default.default(ast, {
     ImportDeclaration(path) {
       if (path.node.source.value === "styled-components" || path.node.source.value === "@emotion/styled") {
@@ -708,6 +761,7 @@ function migrateSource(filePath, source) {
           warnings,
           styledTransforms
         )) {
+          needsRecipe = true;
           changed = true;
           return;
         }
@@ -720,6 +774,7 @@ function migrateSource(filePath, source) {
           styledTransforms
         )) {
           needsVars = true;
+          needsStyle = true;
           changed = true;
         }
         return;
@@ -746,10 +801,10 @@ function migrateSource(filePath, source) {
         }
         const classConstName = path.scope.generateUidIdentifier(`${variableName}Class`).name;
         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]
-        );
+        path.node.init = t4__namespace.callExpression(t4__namespace.identifier("style"), [
+          t4__namespace.stringLiteral(toKebabCase(variableName)),
+          objectExpression4
+        ]);
         styledTransforms.set(variableName, {
           originalName: variableName,
           mode: "class",
@@ -758,14 +813,16 @@ function migrateSource(filePath, source) {
           propVars: [],
           variantProps: []
         });
+        needsStyle = true;
         changed = true;
         return;
       }
       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]
-        );
+        path.node.init = t4__namespace.callExpression(t4__namespace.identifier("style"), [
+          t4__namespace.stringLiteral(toKebabCase(variableName)),
+          objectExpression4
+        ]);
+        needsStyle = true;
         changed = true;
       }
     }
@@ -803,7 +860,11 @@ function migrateSource(filePath, source) {
     });
   }
   if (changed) {
-    ensureTypestylesImport(ast, needsVars);
+    ensureTypestylesRuntime(ast, {
+      style: needsStyle,
+      recipe: needsRecipe,
+      vars: needsVars
+    });
     cleanupUnusedImports(ast);
   }
   const output = generate__default.default(