Replace Chalk by Picocolors

Kocal · Kocal · commit 1c08412ab152 · 2024-09-07T18:10:51.000+02:00
diff --git a/bin/encore.js b/bin/encore.js
@@ -12,7 +12,7 @@
 
 const parseRuntime = require('../lib/config/parse-runtime');
 const context = require('../lib/context');
-const chalk = require('chalk');
+const pc = require('picocolors');
 const logger = require('../lib/logger');
 
 const runtimeConfig = parseRuntime(
@@ -41,7 +41,7 @@ if (indexPublicArgument !== -1) {
 
 if (!runtimeConfig.isValidCommand) {
     if (runtimeConfig.command) {
-        console.log(chalk.bgRed.white(`Invalid command "${runtimeConfig.command}"`));
+        console.log(pc.bgRed(pc.white(`Invalid command "${runtimeConfig.command}"`)));
         console.log();
     }
     showUsageInstructions();
@@ -72,26 +72,26 @@ if (runtimeConfig.useDevServer) {
 function showUsageInstructions() {
     const validCommands = ['dev', 'prod', 'production', 'dev-server'];
 
-    console.log(`usage ${chalk.green('encore')} [${ validCommands.map(command => chalk.green(command)).join('|') }]`);
+    console.log(`usage ${pc.green('encore')} [${ validCommands.map(command => pc.green(command)).join('|') }]`);
     console.log();
     console.log('encore is a thin executable around the webpack or webpack-dev-server executables');
     console.log();
     console.log('Commands:');
-    console.log(`    ${chalk.green('dev')}        : runs webpack for development`);
+    console.log(`    ${pc.green('dev')}        : runs webpack for development`);
     console.log('       - Supports any webpack options (e.g. --watch)');
     console.log();
-    console.log(`    ${chalk.green('dev-server')} : runs webpack-dev-server`);
-    console.log(`       - ${chalk.yellow('--host')} The hostname/ip address the webpack-dev-server will bind to`);
-    console.log(`       - ${chalk.yellow('--port')} The port the webpack-dev-server will bind to`);
-    console.log(`       - ${chalk.yellow('--keep-public-path')} Do not change the public path (it is usually prefixed by the dev server URL)`);
-    console.log(`       - ${chalk.yellow('--public')} The public url for entry asset in entrypoints.json`);
+    console.log(`    ${pc.green('dev-server')} : runs webpack-dev-server`);
+    console.log(`       - ${pc.yellow('--host')} The hostname/ip address the webpack-dev-server will bind to`);
+    console.log(`       - ${pc.yellow('--port')} The port the webpack-dev-server will bind to`);
+    console.log(`       - ${pc.yellow('--keep-public-path')} Do not change the public path (it is usually prefixed by the dev server URL)`);
+    console.log(`       - ${pc.yellow('--public')} The public url for entry asset in entrypoints.json`);
     console.log('       - Supports any webpack-dev-server options');
     console.log();
-    console.log(`    ${chalk.green('production')} : runs webpack for production`);
+    console.log(`    ${pc.green('production')} : runs webpack for production`);
     console.log('       - Supports any webpack options (e.g. --watch)');
     console.log();
-    console.log(chalk.yellow('    encore dev --watch'));
-    console.log(chalk.yellow('    encore dev-server'));
-    console.log(chalk.yellow('    encore production'));
+    console.log(pc.yellow('    encore dev --watch'));
+    console.log(pc.yellow('    encore dev-server'));
+    console.log(pc.yellow('    encore production'));
     console.log();
 }
diff --git a/lib/EncoreProxy.js b/lib/EncoreProxy.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const chalk = require('chalk');
+const pc = require('picocolors');
 const levenshtein = require('fastest-levenshtein');
 const prettyError = require('./utils/pretty-error');
 
@@ -76,9 +76,9 @@ module.exports = {
                         }
                     }
 
-                    let errorMessage = `${chalk.red(`Encore.${prop}`)} is not a recognized property or method.`;
+                    let errorMessage = `${pc.red(`Encore.${prop}`)} is not a recognized property or method.`;
                     if (minDistance < (prop.length / 3)) {
-                        errorMessage += ` Did you mean ${chalk.green(`Encore.${similarProperty}`)}?`;
+                        errorMessage += ` Did you mean ${pc.green(`Encore.${similarProperty}`)}?`;
                     }
 
                     // Prettify the error message.
diff --git a/lib/friendly-errors/asset-output-display-plugin.js b/lib/friendly-errors/asset-output-display-plugin.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const chalk = require('chalk');
+const pc = require('picocolors');
 
 function AssetOutputDisplayPlugin(outputPath, friendlyErrorsPlugin) {
     this.outputPath = outputPath;
@@ -21,7 +21,7 @@ AssetOutputDisplayPlugin.prototype.apply = function(compiler) {
         // completely reset messages key to avoid adding more and more messages
         // when using watch
         this.friendlyErrorsPlugin.compilationSuccessInfo.messages = [
-            `${chalk.yellow(Object.keys(compilation.assets).length)} files written to ${chalk.yellow(this.outputPath)}`
+            `${pc.yellow(Object.keys(compilation.assets).length)} files written to ${pc.yellow(this.outputPath)}`
         ];
 
         callback();
diff --git a/lib/friendly-errors/formatters/missing-css-file.js b/lib/friendly-errors/formatters/missing-css-file.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const chalk = require('chalk');
+const pc = require('picocolors');
 
 function formatErrors(errors) {
     if (errors.length === 0) {
@@ -19,7 +19,7 @@ function formatErrors(errors) {
     let messages = [];
 
     messages.push(
-        chalk.red('Module build failed: Module not found:')
+        pc.red('Module build failed: Module not found:')
     );
     for (let error of errors) {
         messages.push(`"${error.file}" contains a reference to the file "${error.ref}".`);
diff --git a/lib/friendly-errors/formatters/missing-loader.js b/lib/friendly-errors/formatters/missing-loader.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const chalk = require('chalk');
+const pc = require('picocolors');
 const loaderFeatures = require('../../features');
 
 function formatErrors(errors) {
@@ -24,7 +24,7 @@ function formatErrors(errors) {
 
         if (error.loaderName) {
             let neededCode = `Encore.${loaderFeatures.getFeatureMethod(error.loaderName)}`;
-            fixes.push(`Add ${chalk.green(neededCode)} to your webpack.config.js file.`);
+            fixes.push(`Add ${pc.green(neededCode)} to your webpack.config.js file.`);
 
             const packageRecommendations = loaderFeatures.getMissingPackageRecommendations(error.loaderName);
 
@@ -42,15 +42,15 @@ function formatErrors(errors) {
             messages.push('');
         } else {
             messages = messages.concat([
-                chalk.red(`Error loading ${chalk.yellow(error.file)}`),
+                pc.red(`Error loading ${pc.yellow(error.file)}`),
                 ''
             ]);
         }
 
         if (error.loaderName) {
-            messages.push(`${chalk.bgGreen.black('', 'FIX', '')} To ${loaderFeatures.getFeatureDescription(error.loaderName)}:`);
+            messages.push(`${pc.bgGreen(pc.black('FIX'))} To ${loaderFeatures.getFeatureDescription(error.loaderName)}:`);
         } else {
-            messages.push(`${chalk.bgGreen.black('', 'FIX', '')} To load "${error.file}":`);
+            messages.push(`${pc.bgGreen(pc.black('FIX'))} To load "${error.file}":`);
         }
 
         let index = 0;
diff --git a/lib/friendly-errors/formatters/missing-postcss-config.js b/lib/friendly-errors/formatters/missing-postcss-config.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const chalk = require('chalk');
+const pc = require('picocolors');
 
 function formatErrors(errors) {
     if (errors.length === 0) {
@@ -21,13 +21,13 @@ function formatErrors(errors) {
     // the error over and over again is not helpful
 
     messages.push(
-        chalk.red('Module build failed: Error: No PostCSS Config found')
+        pc.red('Module build failed: Error: No PostCSS Config found')
     );
     messages.push('');
-    messages.push(`${chalk.bgGreen.black('', 'FIX', '')} Create a ${chalk.yellow('postcss.config.js')} file at the root of your project.`);
+    messages.push(`${pc.bgGreen(pc.black('FIX'))} Create a ${pc.yellow('postcss.config.js')} file at the root of your project.`);
     messages.push('');
     messages.push('Here is an example to get you started!');
-    messages.push(chalk.yellow(`
+    messages.push(pc.yellow(`
 // postcss.config.js
 module.exports = {
   plugins: {
diff --git a/lib/logger.js b/lib/logger.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const chalk = require('chalk');
+const pc = require('picocolors');
 
 const messagesKeys = [
     'debug',
@@ -47,26 +47,26 @@ module.exports = {
         messages.debug.push(message);
 
         if (config.isVerbose) {
-            log(`${chalk.bgBlack.white(' DEBUG ')} ${message}`);
+            log(`${pc.bgBlack(pc.white(' DEBUG '))} ${message}`);
         }
     },
 
     recommendation(message) {
         messages.recommendation.push(message);
 
-        log(`${chalk.bgBlue.white(' RECOMMEND ')} ${message}`);
+        log(`${pc.bgBlue(pc.white(' RECOMMEND '))} ${message}`);
     },
 
     warning(message) {
         messages.warning.push(message);
 
-        log(`${chalk.bgYellow.black(' WARNING ')} ${chalk.yellow(message)}`);
+        log(`${pc.bgYellow(pc.black(' WARNING '))} ${pc.yellow(message)}`);
     },
 
     deprecation(message) {
         messages.deprecation.push(message);
 
-        log(`${chalk.bgYellow.black(' DEPRECATION ')} ${chalk.yellow(message)}`);
+        log(`${pc.bgYellow(pc.black(' DEPRECATION '))} ${pc.yellow(message)}`);
     },
 
     getMessages() {
diff --git a/lib/package-helper.js b/lib/package-helper.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const chalk = require('chalk');
+const pc = require('picocolors');
 const fs = require('fs');
 const logger = require('./logger');
 const semver = require('semver');
@@ -52,14 +52,14 @@ function getInstallCommand(packageConfigs) {
     });
 
     if (hasPnpmLockfile) {
-        return chalk.yellow(`pnpm add ${packageInstallStrings.join(' ')} --save-dev`);
+        return pc.yellow(`pnpm add ${packageInstallStrings.join(' ')} --save-dev`);
     }
 
     if (hasYarnLockfile) {
-        return chalk.yellow(`yarn add ${packageInstallStrings.join(' ')} --dev`);
+        return pc.yellow(`yarn add ${packageInstallStrings.join(' ')} --dev`);
     }
 
-    return chalk.yellow(`npm install ${packageInstallStrings.join(' ')} --save-dev`);
+    return pc.yellow(`npm install ${packageInstallStrings.join(' ')} --save-dev`);
 }
 
 function isPackageInstalled(packageConfig) {
@@ -101,9 +101,9 @@ function getMissingPackageRecommendations(packagesConfig, requestedFeature = nul
         return;
     }
 
-    const missingPackageNamesChalked = missingPackageConfigs.map(function(packageConfigs) {
+    const missingPackageNamesPicocolorsed = missingPackageConfigs.map(function(packageConfigs) {
         const packageNames = packageConfigs.map(packageConfig => {
-            return chalk.green(packageConfig.name);
+            return pc.green(packageConfig.name);
         });
 
         let missingPackages = packageNames[0];
@@ -115,9 +115,9 @@ function getMissingPackageRecommendations(packagesConfig, requestedFeature = nul
         return missingPackages;
     });
 
-    let message = `Install ${missingPackageNamesChalked.join(' & ')}`;
+    let message = `Install ${missingPackageNamesPicocolorsed.join(' & ')}`;
     if (requestedFeature) {
-        message += ` to use ${chalk.green(requestedFeature)}`;
+        message += ` to use ${pc.green(requestedFeature)}`;
     }
 
     const installCommand = getInstallCommand(missingPackageConfigs);
@@ -159,11 +159,11 @@ function getInvalidPackageVersionRecommendations(packagesConfig) {
 
         if (semver.gtr(version, packageConfig.version)) {
             return [
-                `Webpack Encore requires version ${chalk.green(packageConfig.version)} of ${chalk.green(packageConfig.name)}. Your version ${chalk.green(version)} is too new. The related feature *may* still work properly. If you have issues, try downgrading the library, or upgrading Encore.`
+                `Webpack Encore requires version ${pc.green(packageConfig.version)} of ${pc.green(packageConfig.name)}. Your version ${pc.green(version)} is too new. The related feature *may* still work properly. If you have issues, try downgrading the library, or upgrading Encore.`
             ];
         } else {
             return [
-                `Webpack Encore requires version ${chalk.green(packageConfig.version)} of ${chalk.green(packageConfig.name)}, but your version (${chalk.green(version)}) is too old. The related feature will probably *not* work correctly.`
+                `Webpack Encore requires version ${pc.green(packageConfig.version)} of ${pc.green(packageConfig.name)}, but your version (${pc.green(version)}) is too old. The related feature will probably *not* work correctly.`
             ];
         }
     };
diff --git a/package.json b/package.json
@@ -30,11 +30,11 @@
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.1",
     "assets-webpack-plugin": "7.0.*",
     "babel-loader": "^9.1.3",
-    "chalk": "^4.0.0",
     "css-loader": "^6.7.0",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "fastest-levenshtein": "^1.0.16",
     "mini-css-extract-plugin": "^2.6.0",
+    "picocolors": "^1.1.0",
     "pretty-error": "^4.0.0",
     "resolve-url-loader": "^5.0.0",
     "semver": "^7.3.2",
diff --git a/test/bin/encore.js b/test/bin/encore.js
@@ -207,7 +207,8 @@ module.exports = Encore.getWebpackConfig();
         const binPath = path.resolve(__dirname, '../', '../', 'bin', 'encore.js');
         exec(`node ${binPath} dev --context=${testDir}`, { cwd: testDir }, (err, stdout, stderr) => {
             expect(err).not.to.be.null;
-            expect(stdout).to.contain('is not a recognized property or method');
+            expect(stdout).to.contain('is not a recognized property');
+            expect(stdout).to.contain('or method');
             expect(stdout).to.contain('Did you mean');
             done();
         });
diff --git a/yarn.lock b/yarn.lock
@@ -5435,7 +5435,7 @@ periscopic@^3.1.0:
     estree-walker "^3.0.0"
     is-reference "^3.0.0"
 
-picocolors@^1.0.0, picocolors@^1.0.1:
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
   integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`
`10`	`10`	`'use strict';`
`11`	`11`
`12`		`-const chalk = require('chalk');`
	`12`	`+const pc = require('picocolors');`
`13`	`13`	`const levenshtein = require('fastest-levenshtein');`
`14`	`14`	`const prettyError = require('./utils/pretty-error');`
`15`	`15`
`@@ -76,9 +76,9 @@ module.exports = {`
`76`	`76`	`}`
`77`	`77`	`}`
`78`	`78`
`79`		- let errorMessage = `${chalk.red(`Encore.${prop}`)} is not a recognized property or method.`;
	`79`	+ let errorMessage = `${pc.red(`Encore.${prop}`)} is not a recognized property or method.`;
`80`	`80`	`if (minDistance < (prop.length / 3)) {`
`81`		- errorMessage += ` Did you mean ${chalk.green(`Encore.${similarProperty}`)}?`;
	`81`	+ errorMessage += ` Did you mean ${pc.green(`Encore.${similarProperty}`)}?`;
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`// Prettify the error message.`