chore: remove chalk in favor of picocolors (#55992)

Similar to PR #53115, this PR removes `chalk` in favor of `picocolors`

bench/vercel/bench.js

@@ -1,8 +1,6 @@
 import { Command } from 'commander'
 import console from 'console'
 
-import chalk from 'chalk'
-
 import PQueue from 'p-queue'
 import {
   generateProjects,
@@ -11,6 +9,7 @@ import {
 } from './project-utils.js'
 import { printBenchmarkResults } from './chart.js'
 import { genRetryableRequest } from './gen-request.js'
+import { bold, red } from '../../packages/next/dist/lib/picocolors.js'
 
 const program = new Command()
 
@@ -60,15 +59,15 @@ try {
 
   const headBenchResults = await runBenchmark(headBenchmarkURL)
 
-  console.log(chalk.bold('Benchmark results for cold:'))
+  console.log(bold('Benchmark results for cold:'))
   printBenchmarkResults(
     {
       origin: benchResults,
       head: headBenchResults,
     },
     (r) => r.cold && r.firstByte <= TTFB_OUTLIERS_THRESHOLD && r.firstByte
   )
-  console.log(chalk.bold('Benchmark results for hot:'))
+  console.log(bold('Benchmark results for hot:'))
   printBenchmarkResults(
     {
       origin: benchResults,
@@ -77,7 +76,7 @@ try {
     (r) => !r.cold && r.firstByte <= TTFB_OUTLIERS_THRESHOLD && r.firstByte
   )
 } catch (err) {
-  console.log(chalk.red('Benchmark failed: ', err))
+  console.log(red('Benchmark failed: ', err))
 } finally {
   await cleanupProjectFolders()
 }

bench/vercel/project-utils.js

@@ -1,13 +1,13 @@
 import { config } from 'dotenv'
 
 import fetch from 'node-fetch'
-import chalk from 'chalk'
 import execa from 'execa'
 import path from 'path'
 import url from 'url'
 import { generatePackageJson } from './generate-package-json.js'
 import { Listr } from 'listr2'
 import { forceCrash } from './bench.js'
+import { red } from '../../packages/next/dist/lib/picocolors.js'
 
 config()
 
@@ -214,7 +214,7 @@ export async function deployProject(projectName, appFolder) {
 
     return deployRes.stdout
   } catch (err) {
-    console.log(chalk.red('Deployment failed: ', err))
+    console.log(red('Deployment failed: ', err))
     throw err
   }
 }

package.json

@@ -117,7 +117,6 @@
     "async-sema": "3.0.1",
     "browserslist": "4.20.2",
     "buffer": "5.6.0",
-    "chalk": "5.0.1",
     "cheerio": "0.22.0",
     "cookie": "0.4.1",
     "cors": "2.8.5",

packages/next/package.json

@@ -208,7 +208,6 @@
     "browserslist": "4.20.2",
     "buffer": "5.6.0",
     "bytes": "3.1.1",
-    "chalk": "2.4.2",
     "ci-info": "watson/ci-info#f43f6a1cefff47fb361c88cf4b943fdbcaafe540",
     "cli-select": "1.1.2",
     "client-only": "0.0.1",

packages/next/src/build/entries.ts

@@ -12,7 +12,7 @@ import type {
 import type { LoadedEnvFiles } from '@next/env'
 import type { AppLoaderOptions } from './webpack/loaders/next-app-loader'
 
-import chalk from 'next/dist/compiled/chalk'
+import { cyan } from '../lib/picocolors'
 import { posix, join, dirname, extname } from 'path'
 import { stringify } from 'querystring'
 import {
@@ -238,11 +238,11 @@ export function createPagesMapping({
 
       if (pageKey in result) {
         warn(
-          `Duplicate page detected. ${chalk.cyan(
+          `Duplicate page detected. ${cyan(
             join('pages', previousPages[pageKey])
-          )} and ${chalk.cyan(
-            join('pages', pagePath)
-          )} both resolve to ${chalk.cyan(pageKey)}.`
+          )} and ${cyan(join('pages', pagePath))} both resolve to ${cyan(
+            pageKey
+          )}.`
         )
       } else {
         previousPages[pageKey] = pagePath

packages/next/src/build/index.ts

@@ -9,7 +9,7 @@ import type { ExportOptions } from '../export'
 
 import '../lib/setup-exception-listeners'
 import { loadEnvConfig } from '@next/env'
-import chalk from 'next/dist/compiled/chalk'
+import { bold, yellow, green } from '../lib/picocolors'
 import crypto from 'crypto'
 import { isMatch, makeRe } from 'next/dist/compiled/micromatch'
 import { promises as fs, existsSync as fsExistsSync } from 'fs'
@@ -1815,8 +1815,8 @@ export default async function build(
 
       if (customAppGetInitialProps) {
         console.warn(
-          chalk.bold.yellow(`Warning: `) +
-            chalk.yellow(
+          bold(yellow(`Warning: `)) +
+            yellow(
               `You have opted-out of Automatic Static Optimization due to \`getInitialProps\` in \`pages/_app\`. This does not opt-out pages with \`getStaticProps\``
             )
         )
@@ -3316,7 +3316,7 @@ export default async function build(
 
       if (config.analyticsId) {
         console.log(
-          chalk.bold.green('Next.js Speed Insights') +
+          bold(green('Next.js Speed Insights')) +
             ' is enabled for this production build. ' +
             "You'll receive a Real Experience Score computed by all of your visitors."
         )

packages/next/src/build/output/index.ts

@@ -1,4 +1,4 @@
-import chalk from 'next/dist/compiled/chalk'
+import { bold, red, yellow } from '../../lib/picocolors'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import textTable from 'next/dist/compiled/text-table'
 import createStore from 'next/dist/compiled/unistore'
@@ -42,15 +42,15 @@ type BuildStatusStore = {
 }
 
 export function formatAmpMessages(amp: AmpPageStatus) {
-  let output = chalk.bold('Amp Validation') + '\n\n'
+  let output = bold('Amp Validation') + '\n\n'
   let messages: string[][] = []
 
-  const chalkError = chalk.red('error')
+  const chalkError = red('error')
   function ampError(page: string, error: AmpStatus) {
     messages.push([page, chalkError, error.message, error.specUrl || ''])
   }
 
-  const chalkWarn = chalk.yellow('warn')
+  const chalkWarn = yellow('warn')
   function ampWarn(page: string, warn: AmpStatus) {
     messages.push([page, chalkWarn, warn.message, warn.specUrl || ''])
   }

packages/next/src/build/output/log.ts

@@ -1,13 +1,13 @@
-import chalk from '../../lib/chalk'
+import { bold, green, magenta, red, yellow, white } from '../../lib/picocolors'
 
 export const prefixes = {
-  wait: chalk.white(chalk.bold('○')),
-  error: chalk.red(chalk.bold('⨯')),
-  warn: chalk.yellow(chalk.bold('⚠')),
-  ready: chalk.bold('▲'), // no color
-  info: chalk.white(chalk.bold(' ')),
-  event: chalk.green(chalk.bold('✓')),
-  trace: chalk.magenta(chalk.bold('»')),
+  wait: white(bold('○')),
+  error: red(bold('⨯')),
+  warn: yellow(bold('⚠')),
+  ready: bold('▲'), // no color
+  info: white(bold(' ')),
+  event: green(bold('✓')),
+  trace: magenta(bold('»')),
 } as const
 
 const LOGGING_METHOD = {

packages/next/src/build/utils.ts

@@ -22,7 +22,7 @@ import '../server/node-polyfill-fetch'
 import '../server/node-polyfill-crypto'
 import '../server/node-environment'
 
-import chalk from 'next/dist/compiled/chalk'
+import { green, yellow, red, cyan, bold, underline } from '../lib/picocolors'
 import getGzipSize from 'next/dist/compiled/gzip-size'
 import textTable from 'next/dist/compiled/text-table'
 import path from 'path'
@@ -368,22 +368,22 @@ export async function printTreeView(
   const getPrettySize = (_size: number): string => {
     const size = prettyBytes(_size)
     // green for 0-130kb
-    if (_size < 130 * 1000) return chalk.green(size)
+    if (_size < 130 * 1000) return green(size)
     // yellow for 130-170kb
-    if (_size < 170 * 1000) return chalk.yellow(size)
+    if (_size < 170 * 1000) return yellow(size)
     // red for >= 170kb
-    return chalk.red.bold(size)
+    return red(bold(size))
   }
 
   const MIN_DURATION = 300
   const getPrettyDuration = (_duration: number): string => {
     const duration = `${_duration} ms`
     // green for 300-1000ms
-    if (_duration < 1000) return chalk.green(duration)
+    if (_duration < 1000) return green(duration)
     // yellow for 1000-2000ms
-    if (_duration < 2000) return chalk.yellow(duration)
+    if (_duration < 2000) return yellow(duration)
     // red for >= 2000ms
-    return chalk.red.bold(duration)
+    return red(bold(duration))
   }
 
   const getCleanName = (fileName: string) =>
@@ -429,7 +429,7 @@ export async function printTreeView(
         routerType === 'app' ? 'Route (app)' : 'Route (pages)',
         'Size',
         'First Load JS',
-      ].map((entry) => chalk.underline(entry)) as [string, string, string]
+      ].map((entry) => underline(entry)) as [string, string, string]
     )
 
     filteredPages.forEach((item, i, arr) => {
@@ -475,14 +475,14 @@ export async function printTreeView(
         }`,
         pageInfo
           ? ampFirst
-            ? chalk.cyan('AMP')
+            ? cyan('AMP')
             : pageInfo.size >= 0
             ? prettyBytes(pageInfo.size)
             : ''
           : '',
         pageInfo
           ? ampFirst
-            ? chalk.cyan('AMP')
+            ? cyan('AMP')
             : pageInfo.size >= 0
             ? getPrettySize(pageInfo.totalSize)
             : ''
@@ -671,9 +671,9 @@ export async function printTreeView(
         usedSymbols.has('λ') && [
           'λ',
           '(Server)',
-          `server-side renders at runtime (uses ${chalk.cyan(
+          `server-side renders at runtime (uses ${cyan(
             'getInitialProps'
-          )} or ${chalk.cyan('getServerSideProps')})`,
+          )} or ${cyan('getServerSideProps')})`,
         ],
         usedSymbols.has('○') && [
           '○',
@@ -683,14 +683,14 @@ export async function printTreeView(
         usedSymbols.has('●') && [
           '●',
           '(SSG)',
-          `automatically generated as static HTML + JSON (uses ${chalk.cyan(
+          `automatically generated as static HTML + JSON (uses ${cyan(
             'getStaticProps'
           )})`,
         ],
         usedSymbols.has('ISR') && [
           '',
           '(ISR)',
-          `incremental static regeneration (uses revalidate in ${chalk.cyan(
+          `incremental static regeneration (uses revalidate in ${cyan(
             'getStaticProps'
           )})`,
         ],
@@ -716,7 +716,7 @@ export function printCustomRoutes({
   ) => {
     const isRedirects = type === 'Redirects'
     const isHeaders = type === 'Headers'
-    print(chalk.underline(type))
+    print(underline(type))
     print()
 
     /*

packages/next/src/build/webpack-build/impl.ts

@@ -1,5 +1,5 @@
 import { type webpack } from 'next/dist/compiled/webpack/webpack'
-import chalk from 'next/dist/compiled/chalk'
+import { red } from '../../lib/picocolors'
 import formatWebpackMessages from '../../client/dev/error-overlay/format-webpack-messages'
 import { nonNullable } from '../../lib/non-nullable'
 import {
@@ -277,7 +277,7 @@ export async function webpackBuildImpl(
     }
     let error = result.errors.filter(Boolean).join('\n\n')
 
-    console.error(chalk.red('Failed to compile.\n'))
+    console.error(red('Failed to compile.\n'))
 
     if (
       error.indexOf('private-next-pages') > -1 &&

packages/next/src/build/webpack-config.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactRefreshWebpackPlugin from 'next/dist/compiled/@next/react-refresh-utils/dist/ReactRefreshWebpackPlugin'
-import chalk from 'next/dist/compiled/chalk'
+import { yellow, bold } from '../lib/picocolors'
 import crypto from 'crypto'
 import { webpack } from 'next/dist/compiled/webpack/webpack'
 import path from 'path'
@@ -269,8 +269,8 @@ function createRSCAliases(
 const devtoolRevertWarning = execOnce(
   (devtool: webpack.Configuration['devtool']) => {
     console.warn(
-      chalk.yellow.bold('Warning: ') +
-        chalk.bold(`Reverting webpack devtool to '${devtool}'.\n`) +
+      yellow(bold('Warning: ')) +
+        bold(`Reverting webpack devtool to '${devtool}'.\n`) +
         'Changing the webpack devtool in development mode will cause severe performance regressions.\n' +
         'Read more: https://nextjs.org/docs/messages/improper-devtool'
     )
@@ -1455,7 +1455,6 @@ export default async function getBaseWebpackConfig(
                   {
                     '@builder.io/partytown': '{}',
                     'next/dist/compiled/etag': '{}',
-                    'next/dist/compiled/chalk': '{}',
                   },
                   getEdgePolyfilledModules(),
                   handleWebpackExternalForEdgeRuntime,
@@ -2969,8 +2968,8 @@ export default async function getBaseWebpackConfig(
     // only show warning for one build
     if (isNodeOrEdgeCompilation) {
       console.warn(
-        chalk.yellow.bold('Warning: ') +
-          chalk.bold(
+        yellow(bold('Warning: ')) +
+          bold(
             'Built-in CSS support is being disabled due to custom CSS configuration being detected.\n'
           ) +
           'See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled\n'

packages/next/src/build/webpack/config/blocks/css/messages.ts

@@ -1,33 +1,29 @@
-import chalk from 'next/dist/compiled/chalk'
+import { bold, cyan } from '../../../../../lib/picocolors'
 
 export function getGlobalImportError() {
-  return `Global CSS ${chalk.bold(
+  return `Global CSS ${bold(
     'cannot'
-  )} be imported from files other than your ${chalk.bold(
+  )} be imported from files other than your ${bold(
     'Custom <App>'
-  )}. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to ${chalk.cyan(
+  )}. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to ${cyan(
     'pages/_app.js'
   )}. Or convert the import to Component-Level CSS (CSS Modules).\nRead more: https://nextjs.org/docs/messages/css-global`
 }
 
 export function getGlobalModuleImportError() {
-  return `Global CSS ${chalk.bold(
-    'cannot'
-  )} be imported from within ${chalk.bold(
+  return `Global CSS ${bold('cannot')} be imported from within ${bold(
     'node_modules'
   )}.\nRead more: https://nextjs.org/docs/messages/css-npm`
 }
 
 export function getLocalModuleImportError() {
-  return `CSS Modules ${chalk.bold(
-    'cannot'
-  )} be imported from within ${chalk.bold(
+  return `CSS Modules ${bold('cannot')} be imported from within ${bold(
     'node_modules'
   )}.\nRead more: https://nextjs.org/docs/messages/css-modules-npm`
 }
 
 export function getCustomDocumentError() {
-  return `CSS ${chalk.bold('cannot')} be imported within ${chalk.cyan(
+  return `CSS ${bold('cannot')} be imported within ${cyan(
     'pages/_document.js'
-  )}. Please move global styles to ${chalk.cyan('pages/_app.js')}.`
+  )}. Please move global styles to ${cyan('pages/_app.js')}.`
 }