chore(packages): update picocolors import (#9753)

### Description

Update how we're importing CJS (this PR moves picocolors only) libraries
to prepare to move our packages to ESM

### Testing Instructions

<!--
  Give a quick description of steps to test your changes.
-->

packages/create-turbo/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import path from "node:path";
 import childProcess from "node:child_process";
-import { bold, cyan, green, red } from "picocolors";
+import picocolors from "picocolors";
 import { setupTestFixtures, spyConsole, spyExit } from "@turbo/test-utils";
 import { logger } from "@turbo/utils";
 import type { PackageManager } from "@turbo/utils";
@@ -50,7 +50,7 @@ describe("create-turbo", () => {
   ])(
     "outputs expected console messages when using $packageManager (option)",
     async ({ packageManager }) => {
-      const { root } = useFixture({ fixture: `create-turbo` });
+      const { root } = useFixture({ fixture: "create-turbo" });
 
       const availableScripts = ["build", "test", "dev"];
 
@@ -93,24 +93,30 @@ describe("create-turbo", () => {
         telemetry,
       });
 
-      const expected = `${bold(
+      const expected = `${picocolors.bold(
         logger.turboGradient(">>> Success!")
-      )} Created your Turborepo at ${green(
+      )} Created your Turborepo at ${picocolors.green(
         path.relative(process.cwd(), root)
       )}`;
       expect(mockConsole.log).toHaveBeenCalledWith(expected);
       expect(mockConsole.log).toHaveBeenCalledWith();
-      expect(mockConsole.log).toHaveBeenCalledWith(bold("To get started:"));
+      expect(mockConsole.log).toHaveBeenCalledWith(
+        picocolors.bold("To get started:")
+      );
 
-      expect(mockConsole.log).toHaveBeenCalledWith(cyan("Library packages"));
+      expect(mockConsole.log).toHaveBeenCalledWith(
+        picocolors.cyan("Library packages")
+      );
 
       expect(mockConsole.log).toHaveBeenCalledWith(
         "- Run commands with Turborepo:"
       );
 
       availableScripts.forEach((script) => {
         expect(mockConsole.log).toHaveBeenCalledWith(
-          expect.stringContaining(cyan(`${packageManager} run ${script}`))
+          expect.stringContaining(
+            picocolors.cyan(`${packageManager} run ${script}`)
+          )
         );
       });
 
@@ -133,7 +139,7 @@ describe("create-turbo", () => {
   ])(
     "outputs expected console messages when using $packageManager (arg)",
     async ({ packageManager }) => {
-      const { root } = useFixture({ fixture: `create-turbo` });
+      const { root } = useFixture({ fixture: "create-turbo" });
 
       const availableScripts = ["build", "test", "dev"];
 
@@ -176,24 +182,30 @@ describe("create-turbo", () => {
         telemetry,
       });
 
-      const expected = `${bold(
+      const expected = `${picocolors.bold(
         logger.turboGradient(">>> Success!")
-      )} Created your Turborepo at ${green(
+      )} Created your Turborepo at ${picocolors.green(
         path.relative(process.cwd(), root)
       )}`;
       expect(mockConsole.log).toHaveBeenCalledWith(expected);
       expect(mockConsole.log).toHaveBeenCalledWith();
-      expect(mockConsole.log).toHaveBeenCalledWith(bold("To get started:"));
+      expect(mockConsole.log).toHaveBeenCalledWith(
+        picocolors.bold("To get started:")
+      );
 
-      expect(mockConsole.log).toHaveBeenCalledWith(cyan("Library packages"));
+      expect(mockConsole.log).toHaveBeenCalledWith(
+        picocolors.cyan("Library packages")
+      );
 
       expect(mockConsole.log).toHaveBeenCalledWith(
         "- Run commands with Turborepo:"
       );
 
       availableScripts.forEach((script) => {
         expect(mockConsole.log).toHaveBeenCalledWith(
-          expect.stringContaining(cyan(`${packageManager} run ${script}`))
+          expect.stringContaining(
+            picocolors.cyan(`${packageManager} run ${script}`)
+          )
         );
       });
 
@@ -208,7 +220,7 @@ describe("create-turbo", () => {
   );
 
   it("throws correct error message when a download error is encountered", async () => {
-    const { root } = useFixture({ fixture: `create-turbo` });
+    const { root } = useFixture({ fixture: "create-turbo" });
     const packageManager = "pnpm";
     const mockAvailablePackageManagers = jest
       .spyOn(turboUtils, "getAvailablePackageManagers")
@@ -248,13 +260,13 @@ describe("create-turbo", () => {
     expect(mockConsole.error).toHaveBeenCalledTimes(2);
     expect(mockConsole.error).toHaveBeenNthCalledWith(
       1,
-      logger.turboRed(bold(">>>")),
-      red("Unable to download template from GitHub")
+      logger.turboRed(picocolors.bold(">>>")),
+      picocolors.red("Unable to download template from GitHub")
     );
     expect(mockConsole.error).toHaveBeenNthCalledWith(
       2,
-      logger.turboRed(bold(">>>")),
-      red("Could not connect")
+      logger.turboRed(picocolors.bold(">>>")),
+      picocolors.red("Could not connect")
     );
     expect(mockExit.exit).toHaveBeenCalledWith(1);
 

packages/create-turbo/src/cli.ts

@@ -2,7 +2,7 @@
 
 import http from "node:http";
 import https from "node:https";
-import { bold } from "picocolors";
+import picocolors from "picocolors";
 import { Command, Option } from "commander";
 import { logger } from "@turbo/utils";
 import {
@@ -27,9 +27,9 @@ const createTurboCli = new Command();
 
 // create
 createTurboCli
-  .name(bold(logger.turboGradient("create-turbo")))
+  .name(picocolors.bold(logger.turboGradient("create-turbo")))
   .description("Create a new Turborepo")
-  .usage(`${bold("<project-directory>")} [options]`)
+  .usage(`${picocolors.bold("<project-directory>")} [options]`)
   .hook("preAction", async (_, thisAction) => {
     const { telemetry } = await initTelemetry<"create-turbo">({
       packageInfo: {

packages/create-turbo/src/commands/create/index.ts

@@ -1,5 +1,5 @@
 import path from "node:path";
-import { bold, red, cyan, green, dim } from "picocolors";
+import picocolors from "picocolors";
 import type { Project } from "@turbo/workspaces";
 import {
   getWorkspaceDetails,
@@ -39,18 +39,18 @@ function handleErrors(
   telemetry?.trackCommandStatus({ command: "create", status: "error" });
   // handle errors from ../../transforms
   if (err instanceof TransformError) {
-    error(bold(err.transform), red(err.message));
+    error(picocolors.bold(err.transform), picocolors.red(err.message));
     if (err.fatal) {
       process.exit(1);
     }
     // handle errors from @turbo/workspaces
   } else if (err instanceof ConvertError && err.type !== "unknown") {
-    error(red(err.message));
+    error(picocolors.red(err.message));
     process.exit(1);
     // handle download errors from @turbo/utils
   } else if (err instanceof DownloadError) {
-    error(red("Unable to download template from GitHub"));
-    error(red(err.message));
+    error(picocolors.red("Unable to download template from GitHub"));
+    error(picocolors.red(err.message));
     process.exit(1);
   }
 
@@ -209,14 +209,16 @@ export async function create(
     let lastGroup: string | undefined;
     workspacesForDisplay.forEach(({ group, title, description }, idx) => {
       if (idx === 0 || group !== lastGroup) {
-        logger.log(cyan(group));
+        logger.log(picocolors.cyan(group));
       }
-      logger.log(` - ${bold(title)}${description ? `: ${description}` : ""}`);
+      logger.log(
+        ` - ${picocolors.bold(title)}${description ? `: ${description}` : ""}`
+      );
       lastGroup = group;
     });
   } else {
-    logger.log(cyan("apps"));
-    logger.log(` - ${bold(projectName)}`);
+    logger.log(picocolors.cyan("apps"));
+    logger.log(` - ${picocolors.bold(projectName)}`);
   }
 
   // run install
@@ -252,20 +254,22 @@ export async function create(
 
   if (projectDirIsCurrentDir) {
     logger.log(
-      `${bold(turboGradient(">>> Success!"))} Your new Turborepo is ready.`
+      `${picocolors.bold(
+        turboGradient(">>> Success!")
+      )} Your new Turborepo is ready.`
     );
   } else {
     logger.log(
-      `${bold(turboGradient(">>> Success!"))} Created your Turborepo at ${green(
-        relativeProjectDir
-      )}`
+      `${picocolors.bold(
+        turboGradient(">>> Success!")
+      )} Created your Turborepo at ${picocolors.green(relativeProjectDir)}`
     );
   }
 
   if (!isMaintainedByCoreTeam) {
     logger.log();
     logger.log(
-      dim(
+      picocolors.dim(
         "Note: This is a community-maintained example. If you experience a problem, please submit a pull request with a fix. GitHub Issues will be closed."
       )
     );
@@ -275,27 +279,29 @@ export async function create(
   const packageManagerMeta = getPackageManagerMeta(projectPackageManager);
   if (packageManagerMeta && hasPackageJson) {
     logger.log();
-    logger.log(bold("To get started:"));
+    logger.log(picocolors.bold("To get started:"));
     if (!projectDirIsCurrentDir) {
       logger.log(
-        `- Change to the directory: ${cyan(`cd ${relativeProjectDir}`)}`
+        `- Change to the directory: ${picocolors.cyan(
+          `cd ${relativeProjectDir}`
+        )}`
       );
     }
     logger.log(
-      `- Enable Remote Caching (recommended): ${cyan(
+      `- Enable Remote Caching (recommended): ${picocolors.cyan(
         `${packageManagerMeta.executable} turbo login`
       )}`
     );
-    logger.log(`   - Learn more: https://turbo.build/repo/remote-cache`);
+    logger.log("   - Learn more: https://turbo.build/repo/remote-cache");
     logger.log();
     logger.log("- Run commands with Turborepo:");
     availableScripts
       .filter((script) => SCRIPTS_TO_DISPLAY[script])
       .forEach((script) => {
         logger.log(
-          `   - ${cyan(`${packageManagerMeta.command} run ${script}`)}: ${
-            SCRIPTS_TO_DISPLAY[script]
-          } all apps and packages`
+          `   - ${picocolors.cyan(
+            `${packageManagerMeta.command} run ${script}`
+          )}: ${SCRIPTS_TO_DISPLAY[script]} all apps and packages`
         );
       });
     logger.log("- Run a command twice to hit cache");

packages/create-turbo/src/utils/notifyUpdate.ts

@@ -1,4 +1,4 @@
-import { yellow, bold } from "picocolors";
+import picocolors from "picocolors";
 import checkForUpdate from "update-check";
 import { logger } from "@turbo/utils";
 import cliPkgJson from "../../package.json";
@@ -10,7 +10,11 @@ export async function notifyUpdate(): Promise<void> {
     const res = await update;
     if (res?.latest) {
       logger.log();
-      logger.log(yellow(bold("A new version of `create-turbo` is available!")));
+      logger.log(
+        picocolors.yellow(
+          picocolors.bold("A new version of `create-turbo` is available!")
+        )
+      );
       logger.log();
     }
     process.exit();

packages/turbo-codemod/src/cli.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { red } from "picocolors";
+import picocolors from "picocolors";
 import { logger } from "@turbo/utils";
 import { Command } from "commander";
 import cliPkg from "../package.json";
@@ -69,7 +69,7 @@ codemodCli
   .then(notifyUpdate)
   .catch(async (reason) => {
     logger.log();
-    logger.log(red("Unexpected error. Please report it as a bug:"));
+    logger.log(picocolors.red("Unexpected error. Please report it as a bug:"));
     logger.log(reason);
 
     logger.log();