feat(color-mode): mode-to-color-mode-pseudos

bin/cli.ts

@@ -194,27 +194,35 @@ export async function run() {
     });
   }
 
-  await updateDependencies();
+  // await updateDependencies();
 
   const answer = await askQuestions(cli);
 
   const filesBeforeExpansion = cli.input[1] || answer.files;
   const files = expandFilePathsIfNeeded([filesBeforeExpansion]);
   const codemods = cli.input[0] || answer.codemods;
+  console.log(files, codemods);
 
   if (!files.length) {
     log.error(`No files found matching ${files.join(" ")}`);
     return null;
   }
 
   // It's important to run this last after all transformations are done
-  codemods.push("core-to-react");
 
-  for (const codemod of codemods) {
+  if (typeof codemods === "string") {
     runTransform({
       files,
-      codemod,
+      codemod: codemods,
       flags: cli.flags,
     });
+  } else {
+    for (const codemod of codemods) {
+      runTransform({
+        files,
+        codemod,
+        flags: cli.flags,
+      });
+    }
   }
 }

transforms/__testfixtures__/mode-to-color-mode-pseudos/basic.input.tsx

@@ -0,0 +1,55 @@
+import { mode } from "@chakra-ui/theme-tools";
+import type { SystemStyleFunction } from "@chakra-ui/theme-tools";
+
+const replacesInsideObject: SystemStyleFunction = (props) => {
+  return {
+    transform: "translate(25%, 25%)",
+    borderRadius: "full",
+    border: "0.2em solid",
+    borderColor: mode("white", "gray.800")(props),
+  };
+};
+
+const createsVariablesIfOutsideObject: SystemStyleFunction = (props) => {
+  const borderColor = mode("white", "gray.800")(props);
+  const bgColor = mode("white", "gray.800")(props);
+
+  return {
+    borderColor,
+    bg: bgColor,
+  };
+};
+
+const mergesWithExisting: SystemStyleFunction = (props) => {
+  const borderColor = mode("white", "gray.800")(props);
+
+  return {
+    _light: {
+      color: "red.500",
+    },
+    borderColor,
+  };
+};
+
+const worksWithNestedObjects: SystemStyleFunction = (props) => {
+  const borderColor = mode("white", "gray.800")(props);
+
+  return {
+    _focus: {
+      _light: {
+        color: "red.500",
+      },
+      borderColor,
+    },
+  };
+};
+
+const usesExistingVariable: SystemStyleFunction = (props) => {
+  const colorDark = "red.500";
+  const colorLight = "blue.500";
+  const borderColor = mode(colorDark, colorLight)(props);
+
+  return {
+    borderColor,
+  };
+};

transforms/__testfixtures__/mode-to-color-mode-pseudos/basic.output.tsx

@@ -0,0 +1,83 @@
+import "@chakra-ui/theme-tools";
+import type { SystemStyleFunction } from "@chakra-ui/theme-tools";
+
+const replacesInsideObject: SystemStyleFunction = (props) => {
+  return {
+    transform: "translate(25%, 25%)",
+    borderRadius: "full",
+    border: "0.2em solid",
+
+    _light: {
+      borderColor: "white"
+    },
+
+    _dark: {
+      borderColor: "gray.800"
+    }
+  };
+};
+
+const createsVariablesIfOutsideObject: SystemStyleFunction = (props) => {
+  const borderColorLight = "white";
+  const borderColorDark = "gray.800";
+  const bgColorDark = "gray.800";
+  const bgColorLight = "white";
+
+  return {
+    _light: {
+      borderColor: borderColorLight,
+      bg: bgColorLight
+    },
+    _dark: {
+      borderColor: borderColorDark,
+      bg: bgColorDark
+    },
+  };
+};
+
+const mergesWithExisting: SystemStyleFunction = (props) => {
+  const borderColorLight = "white";
+  const borderColorDark = "gray.800";
+
+  return {
+    _light: {
+      color: "red.500",
+      borderColor: borderColorLight
+    },
+    _dark: {
+      borderColor: borderColorDark
+    },
+  };
+};
+
+const worksWithNestedObjects: SystemStyleFunction = (props) => {
+  const borderColorLight = "white";
+  const borderColorDark = "gray.800";
+
+  return {
+    _focus: {
+      _light: {
+        color: "red.500",
+        borderColor: borderColorLight
+      },
+      _dark: {
+        borderColor: borderColorDark
+      },
+    },
+  };
+};
+
+const usesExistingVariable: SystemStyleFunction = (props) => {
+  const colorDark = "red.500";
+  const colorLight = "blue.500";
+
+  return {
+    _light: {
+      borderColor: colorDark
+    },
+
+    _dark: {
+      borderColor: colorLight
+    }
+  };
+};

transforms/__tests__/mode-to-color-mode-pseudos.ts

@@ -0,0 +1,20 @@
+/* global jest */
+
+jest.autoMockOff();
+
+import { defineTest } from "jscodeshift/dist/testUtils";
+
+/**
+ * List of all test fixtures with an input and
+ * output pair for each.
+ */
+const fixtures = ["basic"] as const;
+const name = "mode-to-color-mode-pseudos";
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineTest(__dirname, name, null, `${name}/${test}`, {
+      parser: "tsx",
+    }),
+  );
+});