css, webpack-plugin: Replace chalk dependency with picocolors (#1385)

Author: askoufis

.changeset/odd-kings-raise.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/webpack-plugin': patch
+'@vanilla-extract/css': patch
+---
+
+Replace `chalk` dependency with `picocolors`

packages/css/package.json

@@ -109,15 +109,15 @@
   "dependencies": {
     "@emotion/hash": "^0.9.0",
     "@vanilla-extract/private": "^1.0.4",
-    "chalk": "^4.1.1",
     "css-what": "^6.1.0",
     "cssesc": "^3.0.0",
     "csstype": "^3.0.7",
     "dedent": "^1.5.1",
     "deep-object-diff": "^1.1.9",
     "deepmerge": "^4.2.2",
     "media-query-parser": "^2.0.2",
-    "modern-ahocorasick": "^1.0.0"
+    "modern-ahocorasick": "^1.0.0",
+    "picocolors": "^1.0.0"
   },
   "devDependencies": {
     "@types/cssesc": "^3.0.0"

packages/css/src/validateContract.ts

@@ -1,6 +1,6 @@
 import { Contract, walkObject } from '@vanilla-extract/private';
 import { diff } from 'deep-object-diff';
-import chalk from 'chalk';
+import pc from 'picocolors';
 
 const normaliseObject = (obj: Contract) => walkObject(obj, () => '');
 
@@ -20,11 +20,11 @@ function diffLine(value: string, nesting: number, type?: '+' | '-') {
 
   if (process.env.NODE_ENV !== 'test') {
     if (type === '-') {
-      return chalk.red(line);
+      return pc.red(line);
     }
 
     if (type === '+') {
-      return chalk.green(line);
+      return pc.green(line);
     }
   }
 

packages/webpack-plugin/package.json

@@ -57,9 +57,9 @@
   },
   "dependencies": {
     "@vanilla-extract/integration": "^7.0.0",
-    "chalk": "^4.1.1",
     "debug": "^4.3.1",
-    "loader-utils": "^2.0.0"
+    "loader-utils": "^2.0.0",
+    "picocolors": "^1.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.5",

packages/webpack-plugin/src/logger.ts

@@ -1,8 +1,8 @@
 import createDebug from 'debug';
-import chalk from 'chalk';
+import pc from 'picocolors';
 
 export const formatResourcePath = (i: string) =>
-  chalk.blue(`"${i.replace(/.*\//, '')}"`);
+  pc.blue(`"${i.replace(/.*\//, '')}"`);
 
 createDebug.formatters.r = (r: string) => formatResourcePath(r);