breaking: Replace kleur with styleText

.changeset/cold-carrots-raise.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/package': major
+'@sveltejs/kit': major
+---
+
+breaking: require Node v20.12 or newer, replace kleur with styleText

.github/workflows/ci.yml

@@ -51,15 +51,15 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - node-version: 18
-            os: ubuntu-latest
-            e2e-browser: 'chromium'
           - node-version: 20
             os: ubuntu-latest
             e2e-browser: 'chromium'
           - node-version: 22
             os: ubuntu-latest
             e2e-browser: 'chromium'
+          - node-version: 24
+            os: ubuntu-latest
+            e2e-browser: 'chromium'
     env:
       KIT_E2E_BROWSER: ${{matrix.e2e-browser}}
     steps:
@@ -94,27 +94,27 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - node-version: 18
+          - node-version: 20
             os: windows-latest
             e2e-browser: 'chromium'
             mode: 'dev'
-          - node-version: 18
+          - node-version: 20
             os: ubuntu-latest
             e2e-browser: 'firefox'
             mode: 'dev'
-          - node-version: 18
+          - node-version: 20
             os: macOS-latest
             e2e-browser: 'webkit'
             mode: 'dev'
-          - node-version: 18
+          - node-version: 20
             os: windows-latest
             e2e-browser: 'chromium'
             mode: 'build'
-          - node-version: 18
+          - node-version: 20
             os: ubuntu-latest
             e2e-browser: 'firefox'
             mode: 'build'
-          - node-version: 18
+          - node-version: 20
             os: macOS-latest
             e2e-browser: 'webkit'
             mode: 'build'
@@ -186,7 +186,7 @@ jobs:
       - uses: pnpm/[email protected]
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm playwright install chromium

packages/adapter-auto/package.json

@@ -42,7 +42,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "catalog:",
-		"@types/node": "^18.19.48",
+		"@types/node": "catalog:",
 		"typescript": "^5.3.3",
 		"vitest": "catalog:"
 	},

packages/adapter-cloudflare/package.json

@@ -47,7 +47,7 @@
 	"devDependencies": {
 		"@playwright/test": "catalog:",
 		"@sveltejs/kit": "workspace:^",
-		"@types/node": "^18.19.48",
+		"@types/node": "catalog:",
 		"esbuild": "^0.25.4",
 		"typescript": "^5.3.3"
 	},

packages/adapter-netlify/package.json

@@ -52,7 +52,7 @@
 		"@rollup/plugin-node-resolve": "^16.0.0",
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "catalog:",
-		"@types/node": "^18.19.48",
+		"@types/node": "catalog:",
 		"@types/set-cookie-parser": "^2.4.7",
 		"rollup": "^4.14.2",
 		"typescript": "^5.3.3",

packages/adapter-node/package.json

@@ -45,7 +45,7 @@
 		"@polka/url": "^1.0.0-next.28",
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "catalog:",
-		"@types/node": "^18.19.48",
+		"@types/node": "catalog:",
 		"polka": "^1.0.0-next.28",
 		"sirv": "^3.0.0",
 		"typescript": "^5.3.3",

packages/adapter-static/package.json

@@ -42,7 +42,7 @@
 		"@playwright/test": "catalog:",
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "catalog:",
-		"@types/node": "^18.19.48",
+		"@types/node": "catalog:",
 		"sirv": "^3.0.0",
 		"svelte": "^5.23.1",
 		"typescript": "^5.3.3",

packages/adapter-vercel/package.json

@@ -46,7 +46,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "catalog:",
-		"@types/node": "^18.19.48",
+		"@types/node": "catalog:",
 		"typescript": "^5.3.3",
 		"vitest": "catalog:"
 	},

packages/enhanced-img/package.json

@@ -45,7 +45,7 @@
 	"devDependencies": {
 		"@sveltejs/vite-plugin-svelte": "catalog:",
 		"@types/estree": "^1.0.5",
-		"@types/node": "^18.19.48",
+		"@types/node": "catalog:",
 		"rollup": "^4.27.4",
 		"svelte": "^5.23.1",
 		"typescript": "^5.6.3",

packages/kit/package.json

@@ -24,7 +24,6 @@
 		"cookie": "^0.6.0",
 		"devalue": "^5.1.0",
 		"esm-env": "^1.2.2",
-		"kleur": "^4.1.5",
 		"magic-string": "^0.30.5",
 		"mrmime": "^2.0.0",
 		"sade": "^1.8.1",
@@ -36,7 +35,7 @@
 		"@playwright/test": "catalog:",
 		"@sveltejs/vite-plugin-svelte": "catalog:",
 		"@types/connect": "^3.4.38",
-		"@types/node": "^18.19.48",
+		"@types/node": "catalog:",
 		"@types/set-cookie-parser": "^2.4.7",
 		"dts-buddy": "^0.6.1",
 		"rollup": "^4.14.2",
@@ -103,6 +102,6 @@
 	},
 	"types": "types/index.d.ts",
 	"engines": {
-		"node": ">=18.13"
+		"node": ">=20.12"
 	}
 }

packages/kit/src/cli.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
-import colors from 'kleur';
+import { styleText } from 'node:util';
 import sade from 'sade';
 import { load_config } from './core/config/index.js';
 import { coalesce_to_error } from './utils/error.js';
@@ -12,9 +12,9 @@ function handle_error(e) {
 
 	if (error.name === 'SyntaxError') throw error;
 
-	console.error(colors.bold().red(`> ${error.message}`));
+	console.error(styleText(['bold', 'red'], `> ${error.message}`));
 	if (error.stack) {
-		console.error(colors.gray(error.stack.split('\n').slice(1).join('\n')));
+		console.error(styleText('grey', error.stack.split('\n').slice(1).join('\n')));
 	}
 
 	process.exit(1);

packages/kit/src/core/adapt/builder.js

@@ -1,8 +1,7 @@
-import colors from 'kleur';
 import { createReadStream, createWriteStream, existsSync, statSync } from 'node:fs';
 import { extname, resolve } from 'node:path';
 import { pipeline } from 'node:stream';
-import { promisify } from 'node:util';
+import { promisify, styleText } from 'node:util';
 import zlib from 'node:zlib';
 import { copy, rimraf, mkdirp } from '../../utils/filesystem.js';
 import { generate_manifest } from '../generate_manifest/index.js';
@@ -165,11 +164,10 @@ export function create_builder({
 
 			if (existsSync(dest)) {
 				console.log(
-					colors
-						.bold()
-						.yellow(
-							`Overwriting ${dest} with fallback page. Consider using a different name for the fallback.`
-						)
+					styleText(
+						['bold', 'yellow'],
+						`Overwriting ${dest} with fallback page. Consider using a different name for the fallback.`
+					)
 				);
 			}
 

packages/kit/src/core/adapt/index.js

@@ -1,4 +1,4 @@
-import colors from 'kleur';
+import { styleText } from 'node:util';
 import { create_builder } from './builder.js';
 
 /**
@@ -22,7 +22,7 @@ export async function adapt(
 	// This is only called when adapter is truthy, so the cast is safe
 	const { name, adapt } = /** @type {import('@sveltejs/kit').Adapter} */ (config.kit.adapter);
 
-	console.log(colors.bold().cyan(`\n> Using ${name}`));
+	console.log(styleText(['bold', 'cyan'], `\n> Using ${name}`));
 
 	const builder = create_builder({
 		config,

packages/kit/src/core/sync/create_manifest_data/index.js

@@ -1,13 +1,13 @@
+import { lookup } from 'mrmime';
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
-import colors from 'kleur';
-import { lookup } from 'mrmime';
-import { list_files, runtime_directory } from '../../utils.js';
+import { styleText } from 'node:util';
 import { posixify, resolve_entry } from '../../../utils/filesystem.js';
 import { parse_route_id } from '../../../utils/routing.js';
-import { sort_routes } from './sort.js';
+import { list_files, runtime_directory } from '../../utils.js';
 import { isSvelte5Plus } from '../utils.js';
+import { sort_routes } from './sort.js';
 
 /**
  * Generates the manifest data used for the client-side manifest and types generation.
@@ -236,12 +236,11 @@ function create_routes_and_nodes(cwd, config, fallback) {
 						);
 					if (typo) {
 						console.log(
-							colors
-								.bold()
-								.yellow(
-									`Missing route file prefix. Did you mean +${file.name}?` +
-										` at ${path.join(dir, file.name)}`
-								)
+							styleText(
+								['bold', 'yellow'],
+								`Missing route file prefix. Did you mean +${file.name}?` +
+									` at ${path.join(dir, file.name)}`
+							)
 						);
 					}
 

packages/kit/src/core/sync/write_client_manifest.js

@@ -2,7 +2,7 @@ import path from 'node:path';
 import { relative_path, resolve_entry } from '../../utils/filesystem.js';
 import { s } from '../../utils/misc.js';
 import { dedent, isSvelte5Plus, write_if_changed } from './utils.js';
-import colors from 'kleur';
+import { styleText } from 'node:util';
 
 /**
  * Writes the client manifest to disk. The manifest is used to power the router. It contains the
@@ -126,12 +126,11 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 	const typo = resolve_entry('src/+hooks.client');
 	if (typo) {
 		console.log(
-			colors
-				.bold()
-				.yellow(
-					`Unexpected + prefix. Did you mean ${typo.split('/').at(-1)?.slice(1)}?` +
-						` at ${path.resolve(typo)}`
-				)
+			styleText(
+				['bold', 'yellow'],
+				`Unexpected + prefix. Did you mean ${typo.split('/').at(-1)?.slice(1)}?` +
+					` at ${path.resolve(typo)}`
+			)
 		);
 	}
 

packages/kit/src/core/sync/write_server.js

@@ -6,7 +6,7 @@ import { s } from '../../utils/misc.js';
 import { load_error_page, load_template } from '../config/index.js';
 import { runtime_directory } from '../utils.js';
 import { isSvelte5Plus, write_if_changed } from './utils.js';
-import colors from 'kleur';
+import { styleText } from 'node:util';
 
 /**
  * @param {{
@@ -103,12 +103,11 @@ export function write_server(config, output) {
 	const typo = resolve_entry('src/+hooks.server');
 	if (typo) {
 		console.log(
-			colors
-				.bold()
-				.yellow(
-					`Unexpected + prefix. Did you mean ${typo.split('/').at(-1)?.slice(1)}?` +
-						` at ${path.resolve(typo)}`
-				)
+			styleText(
+				['bold', 'yellow'],
+				`Unexpected + prefix. Did you mean ${typo.split('/').at(-1)?.slice(1)}?` +
+					` at ${path.resolve(typo)}`
+			)
 		);
 	}
 

packages/kit/src/core/sync/write_tsconfig.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
-import colors from 'kleur';
+import { styleText } from 'node:util';
 import { posixify } from '../../utils/filesystem.js';
 import { write_if_changed } from './utils.js';
 
@@ -162,22 +162,22 @@ function validate_user_config(cwd, out, config) {
 
 		if (baseUrl || paths) {
 			console.warn(
-				colors
-					.bold()
-					.yellow(
-						`You have specified a baseUrl and/or paths in your ${config.kind} which interferes with SvelteKit's auto-generated tsconfig.json. ` +
-							'Remove it to avoid problems with intellisense. For path aliases, use `kit.alias` instead: https://svelte.dev/docs/kit/configuration#alias'
-					)
+				styleText(
+					['bold', 'yellow'],
+					`You have specified a baseUrl and/or paths in your ${config.kind} which interferes with SvelteKit's auto-generated tsconfig.json. ` +
+						'Remove it to avoid problems with intellisense. For path aliases, use `kit.alias` instead: https://svelte.dev/docs/kit/configuration#alias'
+				)
 			);
 		}
 	} else {
 		let relative = posixify(path.relative('.', out));
 		if (!relative.startsWith('./')) relative = './' + relative;
 
 		console.warn(
-			colors
-				.bold()
-				.yellow(`Your ${config.kind} should extend the configuration generated by SvelteKit:`)
+			styleText(
+				['bold', 'yellow'],
+				`Your ${config.kind} should extend the configuration generated by SvelteKit:`
+			)
 		);
 		console.warn(`{\n  "extends": "${relative}"\n}`);
 	}

packages/kit/src/core/utils.js

@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
 import { fileURLToPath } from 'node:url';
-import colors from 'kleur';
+import { styleText } from 'node:util';
 import { posixify, to_fs } from '../utils/filesystem.js';
 
 /**
@@ -34,11 +34,10 @@ export function logger({ verbose }) {
 	/** @param {string} msg */
 	const err = (msg) => console.error(msg.replace(/^/gm, '  '));
 
-	log.success = (msg) => log(colors.green(`✔ ${msg}`));
-	log.error = (msg) => err(colors.bold().red(msg));
-	log.warn = (msg) => log(colors.bold().yellow(msg));
-
-	log.minor = verbose ? (msg) => log(colors.grey(msg)) : noop;
+	log.success = (msg) => log(styleText('green', `✔ ${msg}`));
+	log.error = (msg) => err(styleText(['bold', 'red'], msg));
+	log.warn = (msg) => log(styleText(['bold', 'yellow'], msg));
+	log.minor = verbose ? (msg) => log(styleText('grey', msg)) : noop;
 	log.info = verbose ? log : noop;
 
 	return log;