breaking: Replace kleur with styleText

.changeset/cold-carrots-raise.md

@@ -0,0 +1,8 @@
+---
+'create-svelte': major
+'svelte-migrate': major
+'@sveltejs/package': major
+'@sveltejs/kit': major
+---
+
+breaking: require Node v20.13 or newer, replace kleur with styleText

.github/workflows/ci.yml

@@ -26,7 +26,7 @@ jobs:
       - uses: pnpm/[email protected]
       - uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm run lint
@@ -39,10 +39,10 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - node-version: 18
+          - node-version: 20
             os: ubuntu-latest
             e2e-browser: 'chromium'
-          - node-version: 20
+          - node-version: 22
             os: ubuntu-latest
             e2e-browser: 'chromium'
     env:
@@ -79,27 +79,27 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - node-version: 18
+          - node-version: 20
             os: windows-2019 # slowness reported on newer versions https://github.com/actions/runner-images/issues/5166
             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-2019 # slowness reported on newer versions https://github.com/actions/runner-images/issues/5166
             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'
@@ -137,7 +137,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

@@ -41,7 +41,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@types/node": "^18.19.3",
+		"@types/node": "^20.13.0",
 		"typescript": "^5.3.3"
 	},
 	"dependencies": {

packages/adapter-cloudflare-workers/package.json

@@ -45,7 +45,7 @@
 	"devDependencies": {
 		"@cloudflare/kv-asset-handler": "^0.3.0",
 		"@sveltejs/kit": "workspace:^",
-		"@types/node": "^18.19.3",
+		"@types/node": "^20.13.0",
 		"typescript": "^5.3.3"
 	},
 	"peerDependencies": {

packages/adapter-cloudflare/package.json

@@ -46,7 +46,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"@types/node": "^18.19.3",
+		"@types/node": "^20.13.0",
 		"@types/ws": "^8.5.10",
 		"typescript": "^5.3.3"
 	},

packages/adapter-netlify/package.json

@@ -52,7 +52,7 @@
 		"@rollup/plugin-node-resolve": "^15.2.3",
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@types/node": "^18.19.3",
+		"@types/node": "^20.13.0",
 		"@types/set-cookie-parser": "^2.4.7",
 		"rollup": "^4.14.2",
 		"typescript": "^5.3.3",

packages/adapter-node/package.json

@@ -44,7 +44,7 @@
 		"@polka/url": "1.0.0-next.25",
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@types/node": "^18.19.3",
+		"@types/node": "^20.13.0",
 		"polka": "1.0.0-next.25",
 		"sirv": "^2.0.4",
 		"typescript": "^5.3.3",

packages/adapter-static/package.json

@@ -42,7 +42,7 @@
 		"@playwright/test": "^1.44.1",
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@types/node": "^18.19.3",
+		"@types/node": "^20.13.0",
 		"sirv": "^2.0.4",
 		"svelte": "^4.2.10",
 		"typescript": "^5.3.3",

packages/adapter-vercel/package.json

@@ -45,7 +45,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@types/node": "^18.19.3",
+		"@types/node": "^20.13.0",
 		"typescript": "^5.3.3",
 		"vitest": "^2.0.1"
 	},

packages/create-svelte/bin.js

@@ -1,16 +1,16 @@
 #!/usr/bin/env node
+import * as p from '@clack/prompts';
 import fs from 'node:fs';
 import path from 'node:path';
-import * as p from '@clack/prompts';
-import { bold, cyan, grey, yellow } from 'kleur/colors';
+import { styleText } from 'node:util';
 import { create } from './index.js';
 import { dist, package_manager } from './utils.js';
 
 const { version } = JSON.parse(fs.readFileSync(new URL('package.json', import.meta.url), 'utf-8'));
 let cwd = process.argv[2] || '.';
 
 console.log(`
-${grey(`create-svelte version ${version}`)}
+${styleText('grey', `create-svelte version ${version}`)}
 `);
 
 p.intro('Welcome to SvelteKit!');
@@ -123,27 +123,27 @@ await create(cwd, {
 p.outro('Your project is ready!');
 
 if (!options.types && options.template === 'skeletonlib') {
-	const warning = yellow('▲');
+	const warning = styleText('yellow', '▲');
 	console.log(
 		`${warning} You chose to not add type checking, but TypeScript will still be installed in order to generate type definitions when building the library\n`
 	);
 }
 
 console.log('Install more integrations with:');
-console.log(bold(cyan('  npx svelte-add')));
+console.log(styleText(['bold', 'cyan'], '  npx svelte-add'));
 
 console.log('\nNext steps:');
 let i = 1;
 
 const relative = path.relative(process.cwd(), cwd);
 if (relative !== '') {
-	console.log(`  ${i++}: ${bold(cyan(`cd ${relative}`))}`);
+	console.log(`  ${i++}: ${styleText(['bold', 'cyan'], `cd ${relative}`)}`);
 }
 
-console.log(`  ${i++}: ${bold(cyan(`${package_manager} install`))}`);
+console.log(`  ${i++}: ${styleText(['bold', 'cyan'], `${package_manager} install`)}`);
 // prettier-ignore
-console.log(`  ${i++}: ${bold(cyan('git init && git add -A && git commit -m "Initial commit"'))} (optional)`);
-console.log(`  ${i++}: ${bold(cyan(`${package_manager} run dev -- --open`))}`);
+console.log(`  ${i++}: ${styleText(['bold', 'cyan'],'git init && git add -A && git commit -m "Initial commit"')} (optional)`);
+console.log(`  ${i++}: ${styleText(['bold', 'cyan'], `${package_manager} run dev -- --open`)}`);
 
-console.log(`\nTo close the dev server, hit ${bold(cyan('Ctrl-C'))}`);
-console.log(`\nStuck? Visit us at ${cyan('https://svelte.dev/chat')}`);
+console.log(`\nTo close the dev server, hit ${styleText(['bold', 'cyan'], 'Ctrl-C')}`);
+console.log(`\nStuck? Visit us at ${styleText('cyan', 'https://svelte.dev/chat')}`);

packages/create-svelte/package.json

@@ -22,8 +22,7 @@
 	"bin": "./bin.js",
 	"main": "./index.js",
 	"dependencies": {
-		"@clack/prompts": "^0.7.0",
-		"kleur": "^4.1.5"
+		"@clack/prompts": "^0.7.0"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.44.1",

packages/enhanced-img/package.json

@@ -42,7 +42,7 @@
 	},
 	"devDependencies": {
 		"@types/estree": "^1.0.5",
-		"@types/node": "^18.19.3",
+		"@types/node": "^20.13.0",
 		"estree-walker": "^3.0.3",
 		"rollup": "^4.14.2",
 		"svelte": "^4.2.10",

packages/kit/package.json

@@ -23,7 +23,6 @@
 		"devalue": "^5.0.0",
 		"esm-env": "^1.0.0",
 		"import-meta-resolve": "^4.1.0",
-		"kleur": "^4.1.5",
 		"magic-string": "^0.30.5",
 		"mrmime": "^2.0.0",
 		"sade": "^1.8.1",
@@ -35,7 +34,7 @@
 		"@playwright/test": "^1.44.1",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@types/connect": "^3.4.38",
-		"@types/node": "^18.19.3",
+		"@types/node": "^20.13.0",
 		"@types/set-cookie-parser": "^2.4.7",
 		"dts-buddy": "0.4.6",
 		"rollup": "^4.14.2",
@@ -102,6 +101,6 @@
 	},
 	"types": "types/index.d.ts",
 	"engines": {
-		"node": ">=18.13"
+		"node": ">=20.13"
 	}
 }

packages/kit/src/cli.js

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-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';
@@ -11,9 +11,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';
@@ -164,11 +163,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,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import colors from 'kleur';
+import { styleText } from 'node:util';
 import { lookup } from 'mrmime';
 import { list_files, runtime_directory } from '../../utils.js';
 import { posixify, resolve_entry } from '../../../utils/filesystem.js';
@@ -234,12 +234,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
@@ -114,12 +114,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

@@ -5,7 +5,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 {{
@@ -88,12 +88,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)}`
+			)
 		);
 	}