Replace kleur with picocolors

.changeset/stupid-colts-post.md

@@ -0,0 +1,8 @@
+---
+'@astrojs/mdx': patch
+'@astrojs/rss': patch
+'astro': patch
+'@astrojs/db': patch
+---
+
+Reduces terminal text styling dependency size by switching from `kleur` to `picocolors`

packages/astro-rss/package.json

@@ -34,6 +34,6 @@
   },
   "dependencies": {
     "fast-xml-parser": "^5.3.0",
-    "kleur": "^4.1.5"
+    "picocolors": "^1.1.1"
   }
 }

packages/astro-rss/src/index.ts

@@ -1,6 +1,6 @@
 import { z } from 'astro/zod';
 import { XMLBuilder, XMLParser } from 'fast-xml-parser';
-import { yellow } from 'kleur/colors';
+import colors from 'picocolors';
 import { rssSchema } from './schema.js';
 import { createCanonicalURL, errorMap, isValidURL } from './util.js';
 
@@ -71,7 +71,7 @@ const rssOptionsValidator = z.object({
 		.transform((items) => {
 			if (!Array.isArray(items)) {
 				console.warn(
-					yellow(
+					colors.yellow(
 						'[RSS] Passing a glob result directly has been deprecated. Please migrate to the `pagesGlobToRssItems()` helper: https://docs.astro.build/en/guides/rss/',
 					),
 				);

packages/astro/package.json

@@ -138,14 +138,14 @@
     "http-cache-semantics": "^4.2.0",
     "import-meta-resolve": "^4.2.0",
     "js-yaml": "^4.1.0",
-    "kleur": "^4.1.5",
     "magic-string": "^0.30.18",
     "magicast": "^0.3.5",
     "mrmime": "^2.0.1",
     "neotraverse": "^0.6.18",
     "p-limit": "^6.2.0",
     "p-queue": "^8.1.0",
     "package-manager-detector": "^1.3.0",
+    "picocolors": "^1.1.1",
     "picomatch": "^4.0.3",
     "prompts": "^2.4.2",
     "rehype": "^13.0.2",

packages/astro/performance/content-benchmark.mjs

@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'node:url';
 import { parseArgs } from 'node:util';
-import { bold, cyan, dim } from 'kleur/colors';
+import colors from 'picocolors';
 import { loadFixture } from '../test/test-utils.js';
 import { generatePosts } from './scripts/generate-posts.mjs';
 
@@ -31,7 +31,9 @@ async function benchmark({ fixtures, templates, numPosts }) {
 		const now = performance.now();
 		console.info(`[${fixture}] Building...`);
 		await build();
-		console.info(cyan(`[${fixture}] Built in ${bold(getTimeStat(now, performance.now()))}.`));
+		console.info(
+			colors.cyan(`[${fixture}] Built in ${colors.bold(getTimeStat(now, performance.now()))}.`),
+		);
 	}
 }
 
@@ -56,7 +58,7 @@ async function benchmark({ fixtures, templates, numPosts }) {
 		if (test.includes('simple')) {
 			const fixtures = formats;
 			console.info(
-				`\n${bold('Simple')} ${dim(`${numPosts} posts (${formatsToString(fixtures)})`)}`,
+				`\n${colors.bold('Simple')} ${colors.dim(`${numPosts} posts (${formatsToString(fixtures)})`)}`,
 			);
 			process.env.ASTRO_PERFORMANCE_TEST_NAME = 'simple';
 			await benchmark({
@@ -73,7 +75,7 @@ async function benchmark({ fixtures, templates, numPosts }) {
 		if (test.includes('with-astro-components')) {
 			const fixtures = formats.filter((format) => format !== 'md');
 			console.info(
-				`\n${bold('With Astro components')} ${dim(
+				`\n${colors.bold('With Astro components')} ${colors.dim(
 					`${numPosts} posts (${formatsToString(fixtures)})`,
 				)}`,
 			);
@@ -91,7 +93,7 @@ async function benchmark({ fixtures, templates, numPosts }) {
 		if (test.includes('with-react-components')) {
 			const fixtures = formats.filter((format) => format !== 'md');
 			console.info(
-				`\n${bold('With React components')} ${dim(
+				`\n${colors.bold('With React components')} ${colors.dim(
 					`${numPosts} posts (${formatsToString(fixtures)})`,
 				)}`,
 			);

packages/astro/performance/package.json

@@ -10,7 +10,7 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "devDependencies": {
-    "kleur": "^4.1.5"
+  "dependencies": {
+    "picocolors": "^1.1.1"
   }
 }

packages/astro/src/assets/build/generate.ts

@@ -1,6 +1,6 @@
 import fs, { readFileSync } from 'node:fs';
 import { basename } from 'node:path/posix';
-import { dim, green } from 'kleur/colors';
+import colors from 'picocolors';
 import { getOutDirWithinCwd } from '../../core/build/common.js';
 import type { BuildPipeline } from '../../core/build/pipeline.js';
 import { getTimeStat } from '../../core/build/util.js';
@@ -143,7 +143,7 @@ export async function generateImagesForPath(
 		const count = `(${env.count.current}/${env.count.total})`;
 		env.logger.info(
 			null,
-			`  ${green('▶')} ${filepath} ${dim(statsText)} ${dim(timeIncrease)} ${dim(count)}`,
+			`  ${colors.green('▶')} ${filepath} ${colors.dim(statsText)} ${colors.dim(timeIncrease)} ${colors.dim(count)}`,
 		);
 		env.count.current++;
 	}

packages/astro/src/assets/fonts/vite-plugin-fonts.ts

@@ -2,7 +2,7 @@ import { mkdirSync, writeFileSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
 import { isAbsolute } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { bold } from 'kleur/colors';
+import colors from 'picocolors';
 import type { Plugin } from 'vite';
 import { getAlgorithm, shouldTrackCspHashes } from '../../core/csp/common.js';
 import { generateCspDigest } from '../../core/encryption.js';
@@ -185,7 +185,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 				});
 			},
 			defaults: DEFAULTS,
-			bold,
+			bold: colors.bold,
 			stringMatcher,
 		});
 		// We initialize shared variables here and reset them in buildEnd

packages/astro/src/cli/add/index.ts

@@ -3,10 +3,10 @@ import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import boxen from 'boxen';
 import { diffWords } from 'diff';
-import { bold, cyan, dim, green, magenta, red, yellow } from 'kleur/colors';
 import { type ASTNode, builders, generateCode, loadFile, type ProxifiedModule } from 'magicast';
 import { getDefaultExportOptions } from 'magicast/helpers';
 import { detect, resolveCommand } from 'package-manager-detector';
+import colors from 'picocolors';
 import prompts from 'prompts';
 import maxSatisfying from 'semver/ranges/max-satisfying.js';
 import type yargsParser from 'yargs-parser';
@@ -34,6 +34,8 @@ import { exec } from '../exec.js';
 import { createLoggerFromFlags, type Flags, flagsToAstroInlineConfig } from '../flags.js';
 import { fetchPackageJson, fetchPackageVersions } from '../install-package.js';
 
+const { bold, cyan, dim, green, magenta, red, yellow } = colors;
+
 interface AddOptions {
 	flags: Flags;
 }

packages/astro/src/cli/dev/index.ts

@@ -1,4 +1,4 @@
-import { cyan } from 'kleur/colors';
+import colors from 'picocolors';
 import devServer from '../../core/dev/index.js';
 import { printHelp } from '../../core/messages.js';
 import { type Flags, flagsToAstroInlineConfig } from '../flags.js';
@@ -27,7 +27,7 @@ export async function dev({ flags }: DevOptions) {
 					['--help (-h)', 'See all available flags.'],
 				],
 			},
-			description: `Check ${cyan(
+			description: `Check ${colors.cyan(
 				'https://docs.astro.build/en/reference/cli-reference/#astro-dev',
 			)} for more information.`,
 		});

packages/astro/src/cli/index.ts

@@ -1,4 +1,4 @@
-import * as colors from 'kleur/colors';
+import colors from 'picocolors';
 import yargs from 'yargs-parser';
 import { ASTRO_VERSION } from '../core/constants.js';
 
@@ -62,19 +62,19 @@ function resolveCommand(flags: yargs.Arguments): CLICommand {
 async function runCommand(cmd: string, flags: yargs.Arguments) {
 	const [
 		{ createLoggerFromFlags },
-		{ createKleurTextStyler },
+		{ createPicocolorsTextStyler },
 		{ createBuildTimeAstroVersionProvider },
 		{ createLoggerHelpDisplay },
 		{ createCliCommandRunner },
 	] = await Promise.all([
 		import('./flags.js'),
-		import('./infra/kleur-text-styler.js'),
+		import('./infra/picocolors-text-styler.js'),
 		import('./infra/build-time-astro-version-provider.js'),
 		import('./infra/logger-help-display.js'),
 		import('./infra/cli-command-runner.js'),
 	]);
 	const logger = createLoggerFromFlags(flags);
-	const textStyler = createKleurTextStyler();
+	const textStyler = createPicocolorsTextStyler();
 	const astroVersionProvider = createBuildTimeAstroVersionProvider();
 	const helpDisplay = createLoggerHelpDisplay({
 		logger,

packages/astro/src/cli/info/index.ts

@@ -1,6 +1,6 @@
 import { spawn, spawnSync } from 'node:child_process';
 import { arch, platform } from 'node:os';
-import * as colors from 'kleur/colors';
+import colors from 'picocolors';
 import prompts from 'prompts';
 import { resolveConfig } from '../../core/config/index.js';
 import { ASTRO_VERSION } from '../../core/constants.js';

packages/astro/src/cli/infra/picocolors-text-styler.ts

@@ -0,0 +1,6 @@
+import colors from 'picocolors';
+import type { TextStyler } from '../definitions.js';
+
+export function createPicocolorsTextStyler(): TextStyler {
+	return colors;
+}

packages/astro/src/cli/install-package.ts

@@ -1,14 +1,15 @@
 import { createRequire } from 'node:module';
 import boxen from 'boxen';
 import ci from 'ci-info';
-import { bold, cyan, dim, magenta } from 'kleur/colors';
 import { detect, resolveCommand } from 'package-manager-detector';
+import colors from 'picocolors';
 import prompts from 'prompts';
 import yoctoSpinner from 'yocto-spinner';
 import type { Logger } from '../core/logger/core.js';
 import { exec } from './exec.js';
 
 const require = createRequire(import.meta.url);
+const { bold, cyan, dim, magenta } = colors;
 
 type GetPackageOptions = {
 	skipAsk?: boolean;

packages/astro/src/cli/preferences/index.ts

@@ -2,7 +2,7 @@ import { fileURLToPath } from 'node:url';
 import { formatWithOptions } from 'node:util';
 import dlv from 'dlv';
 import { flattie } from 'flattie';
-import { bgGreen, black, bold, dim, yellow } from 'kleur/colors';
+import colors from 'picocolors';
 import { resolveConfig } from '../../core/config/config.js';
 import { createSettings } from '../../core/config/settings.js';
 import { collectErrorMetadata } from '../../core/errors/dev/utils.js';
@@ -13,6 +13,8 @@ import { coerce, isValidKey, type PreferenceKey } from '../../preferences/index.
 import type { AstroSettings } from '../../types/astro.js';
 import { createLoggerFromFlags, type Flags, flagsToAstroInlineConfig } from '../flags.js';
 
+const { bgGreen, black, bold, dim, yellow } = colors;
+
 interface PreferencesOptions {
 	flags: Flags;
 }
@@ -323,9 +325,11 @@ function annotatedFormat(mv: AnnotatedValue) {
 // this is the real formatting for annotated values
 function formatAnnotated(
 	mv: AnnotatedValue,
-	style: (value: string | number | boolean) => string = (v) => v.toString(),
+	style: (value: string) => string = (v) => v.toString(),
 ) {
-	return mv.annotation ? `${style(mv.value)} ${dim(mv.annotation)}` : style(mv.value);
+	return mv.annotation
+		? `${style(String(mv.value))} ${dim(mv.annotation)}`
+		: style(String(mv.value));
 }
 function formatTable(object: Record<string, AnnotatedValue>, columnLabels: [string, string]) {
 	const [colA, colB] = columnLabels;
@@ -335,7 +339,7 @@ function formatTable(object: Record<string, AnnotatedValue>, columnLabels: [stri
 		_i: number,
 		a: string,
 		b: AnnotatedValue,
-		style: (value: string | number | boolean) => string = (v) => v.toString(),
+		style: (value: string) => string = (v) => v.toString(),
 	): string {
 		return `${dim(chars.v)} ${style(a)} ${space(colALength - a.length - 2)} ${dim(
 			chars.v,

packages/astro/src/cli/preview/index.ts

@@ -1,4 +1,4 @@
-import { cyan } from 'kleur/colors';
+import colors from 'picocolors';
 import { printHelp } from '../../core/messages.js';
 import previewServer from '../../core/preview/index.js';
 import { type Flags, flagsToAstroInlineConfig } from '../flags.js';
@@ -25,7 +25,7 @@ export async function preview({ flags }: PreviewOptions) {
 					['--help (-h)', 'See all available flags.'],
 				],
 			},
-			description: `Starts a local server to serve your static dist/ directory. Check ${cyan(
+			description: `Starts a local server to serve your static dist/ directory. Check ${colors.cyan(
 				'https://docs.astro.build/en/reference/cli-reference/#astro-preview',
 			)} for more information.`,
 		});

packages/astro/src/content/loaders/glob.ts

@@ -1,8 +1,8 @@
 import { existsSync, promises as fs } from 'node:fs';
 import { relative } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { bold, green } from 'kleur/colors';
 import pLimit from 'p-limit';
+import colors from 'picocolors';
 import picomatch from 'picomatch';
 import { glob as tinyglobby } from 'tinyglobby';
 import type { ContentEntryRenderFunction, ContentEntryType } from '../../types/public/content.js';
@@ -300,15 +300,15 @@ export function glob(globOptions: GlobOptions): Loader {
 					: globOptions.pattern;
 
 				logger.warn(
-					`The glob() loader cannot be used for files in ${bold('src/content')} when legacy mode is enabled.`,
+					`The glob() loader cannot be used for files in ${colors.bold('src/content')} when legacy mode is enabled.`,
 				);
 				if (skipCount > 10) {
 					logger.warn(
-						`Skipped ${green(skippedFiles.length)} files that matched ${green(patternList)}.`,
+						`Skipped ${colors.green(skippedFiles.length)} files that matched ${colors.green(patternList)}.`,
 					);
 				} else {
-					logger.warn(`Skipped the following files that matched ${green(patternList)}:`);
-					skippedFiles.forEach((file) => logger.warn(`• ${green(file)}`));
+					logger.warn(`Skipped the following files that matched ${colors.green(patternList)}:`);
+					skippedFiles.forEach((file) => logger.warn(`• ${colors.green(file)}`));
 				}
 			}
 
@@ -335,7 +335,7 @@ export function glob(globOptions: GlobOptions): Loader {
 				const baseUrl = pathToFileURL(basePath);
 				const oldId = fileToIdMap.get(changedPath);
 				await syncData(entry, baseUrl, entryType, oldId);
-				logger.info(`Reloaded data from ${green(entry)}`);
+				logger.info(`Reloaded data from ${colors.green(entry)}`);
 			}
 
 			watcher.on('change', onChange);

packages/astro/src/content/server-listeners.ts

@@ -1,7 +1,7 @@
 import type fsMod from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { bold, cyan, underline } from 'kleur/colors';
+import colors from 'picocolors';
 import type { ViteDevServer } from 'vite';
 import { loadTSConfig } from '../core/config/tsconfig.js';
 import type { Logger } from '../core/logger/core.js';
@@ -29,7 +29,7 @@ export async function attachContentServerListeners({
 	} else if (fs.existsSync(contentPaths.contentDir)) {
 		logger.debug(
 			'content',
-			`Watching ${cyan(
+			`Watching ${colors.cyan(
 				contentPaths.contentDir.href.replace(settings.config.root.href, ''),
 			)} for changes`,
 		);
@@ -87,12 +87,12 @@ function warnAllowJsIsFalse({
 }) {
 	logger.warn(
 		'content',
-		`Make sure you have the ${bold('allowJs')} compiler option set to ${bold(
+		`Make sure you have the ${colors.bold('allowJs')} compiler option set to ${colors.bold(
 			'true',
-		)} in your ${bold(tsConfigFileName)} file to have autocompletion in your ${bold(
+		)} in your ${colors.bold(tsConfigFileName)} file to have autocompletion in your ${colors.bold(
 			contentConfigFileName,
-		)} file. See ${underline(
-			cyan('https://www.typescriptlang.org/tsconfig#allowJs'),
+		)} file. See ${colors.underline(
+			colors.cyan('https://www.typescriptlang.org/tsconfig#allowJs'),
 		)} for more information.`,
 	);
 }