Apply suggestions from @43081j's code review.

dreyfus92 · 43081j · web-flow · commit bb53ac591713 · 2025-10-15T19:31:09.000-05:00
Co-authored-by: James Garbutt &lt;43081j@users.noreply.github.com&gt;
diff --git a/packages/core/src/prompts/autocomplete.ts b/packages/core/src/prompts/autocomplete.ts
@@ -71,7 +71,7 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 
 	get userInputWithCursor() {
 		if (!this.userInput) {
-			return styleText('inverse', styleText('hidden', '_'));
+			return styleText(['inverse', 'hidden'], '_');
 		}
 		if (this._cursor >= this.userInput.length) {
 			return `${this.userInput}█`;
diff --git a/packages/core/src/prompts/password.ts b/packages/core/src/prompts/password.ts
@@ -18,7 +18,7 @@ export default class PasswordPrompt extends Prompt<string> {
 		}
 		const userInput = this.userInput;
 		if (this.cursor >= userInput.length) {
-			return `${this.masked}${styleText('inverse', styleText('hidden', '_'))}`;
+			return `${this.masked}${styleText(['inverse', 'hidden'], '_')}`;
 		}
 		const masked = this.masked;
 		const s1 = masked.slice(0, this.cursor);
diff --git a/packages/core/src/prompts/text.ts b/packages/core/src/prompts/text.ts
@@ -1,4 +1,3 @@
-// import color from 'picocolors';
 import { styleText } from 'node:util';
 import Prompt, { type PromptOptions } from './prompt.js';
 
diff --git a/packages/core/test/prompts/password.test.ts b/packages/core/test/prompts/password.test.ts
@@ -66,7 +66,7 @@ describe('PasswordPrompt', () => {
 			instance.prompt();
 			input.emit('keypress', 'x', { name: 'x' });
 			expect(instance.userInputWithCursor).to.equal(
-				`•${styleText('inverse', styleText('hidden', '_'))}`
+				`•${styleText(['inverse', 'hidden'], '_')}`
 			);
 		});
 
@@ -95,7 +95,7 @@ describe('PasswordPrompt', () => {
 			instance.prompt();
 			input.emit('keypress', 'x', { name: 'x' });
 			expect(instance.userInputWithCursor).to.equal(
-				`X${styleText('inverse', styleText('hidden', '_'))}`
+				`X${styleText(['inverse', 'hidden'], '_')}`
 			);
 		});
 	});
diff --git a/packages/prompts/src/autocomplete.ts b/packages/prompts/src/autocomplete.ts
@@ -108,7 +108,7 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
 
 				case 'cancel': {
 					const userInputText = userInput
-						? `  ${styleText('strikethrough', styleText('dim', userInput))}`
+						? `  ${styleText(['strikethrough', 'dim'], userInput)}`
 						: '';
 					return `${headings.join('\n')}\n${styleText('gray', S_BAR)}${userInputText}`;
 				}
diff --git a/packages/prompts/src/confirm.ts b/packages/prompts/src/confirm.ts
@@ -34,8 +34,8 @@ export const confirm = (opts: ConfirmOptions) => {
 					return `${title}${styleText('gray', S_BAR)}  ${styleText('dim', value)}`;
 				case 'cancel':
 					return `${title}${styleText('gray', S_BAR)}  ${styleText(
-						'strikethrough',
-						styleText('dim', value)
+						['strikethrough', 'dim'],
+						value
 					)}\n${styleText('gray', S_BAR)}`;
 				default: {
 					return `${title}${styleText('cyan', S_BAR)}  ${
diff --git a/packages/prompts/src/group-multi-select.ts b/packages/prompts/src/group-multi-select.ts
@@ -1,4 +1,3 @@
-// import color from 'picocolors';
 import { styleText } from 'node:util';
 import { GroupMultiSelectPrompt } from '@clack/core';
 
@@ -67,7 +66,7 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 			}`;
 		}
 		if (state === 'cancelled') {
-			return `${styleText('strikethrough', styleText('dim', label))}`;
+			return `${styleText(['strikethrough', 'dim'], label)}`;
 		}
 		if (state === 'active-selected') {
 			return `${spacingPrefix}${styleText('dim', prefix)}${styleText('green', S_CHECKBOX_SELECTED)} ${label}${
@@ -98,9 +97,9 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 					'reset',
 					styleText(
 						'dim',
-						`Press ${styleText('gray', styleText('bgWhite', styleText('inverse', ' space ')))} to select, ${styleText(
+						`Press ${styleText(['gray', 'bgWhite', 'inverse'], ' space ')} to select, ${styleText(
 							'gray',
-							styleText('bgWhite', styleText('inverse', ' enter '))
+							styleText(['bgWhite', 'inverse'], ' enter ')
 						)} to submit`
 					)
 				)}`;
diff --git a/packages/prompts/src/multi-select.ts b/packages/prompts/src/multi-select.ts
@@ -77,7 +77,7 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
 					'reset',
 					styleText(
 						'dim',
-						`Press ${styleText('gray', styleText('bgWhite', styleText('inverse', ' space ')))} to select, ${styleText(
+						`Press ${styleText(['gray', 'bgWhite', 'inverse'], ' space ')} to select, ${styleText(
 							'gray',
 							styleText('bgWhite', styleText('inverse', ' enter '))
 						)} to submit`
diff --git a/packages/prompts/src/password.ts b/packages/prompts/src/password.ts
@@ -16,7 +16,6 @@ export const password = (opts: PasswordOptions) => {
 		input: opts.input,
 		output: opts.output,
 		render() {
-			// const title = `${color.gray(S_BAR)}\n${symbol(this.state)}  ${opts.message}\n`;
 			const title = `${styleText('gray', S_BAR)}\n${symbol(this.state)}  ${opts.message}\n`;
 			const userInput = this.userInputWithCursor;
 			const masked = this.masked;
@@ -38,7 +37,7 @@ export const password = (opts: PasswordOptions) => {
 				}
 				case 'cancel': {
 					const maskedText = masked
-						? `  ${styleText('strikethrough', styleText('dim', masked))}`
+						? `  ${styleText(['strikethrough', 'dim'], masked)}`
 						: '';
 					return `${title}${styleText('gray', S_BAR)}${maskedText}${
 						masked ? `\n${styleText('gray', S_BAR)}` : ''
diff --git a/packages/prompts/src/select-key.ts b/packages/prompts/src/select-key.ts
@@ -13,14 +13,14 @@ export const selectKey = <Value extends string>(opts: SelectOptions<Value>) => {
 			return `${styleText('dim', label)}`;
 		}
 		if (state === 'cancelled') {
-			return `${styleText('strikethrough', styleText('dim', label))}`;
+			return `${styleText(['strikethrough', 'dim'], label)}`;
 		}
 		if (state === 'active') {
-			return `${styleText('bgCyan', styleText('gray', ` ${option.value} `))} ${label} ${
+			return `${styleText(['bgCyan', 'gray'], ` ${option.value} `)} ${label} ${
 				option.hint ? styleText('dim', `(${option.hint})`) : ''
 			}`;
 		}
-		return `${styleText('gray', styleText('bgWhite', styleText('inverse', ` ${option.value} `)))} ${label} ${
+		return `${styleText(['gray', 'bgWhite', 'inverse'], ` ${option.value} `)} ${label} ${
 			option.hint ? styleText('dim', `(${option.hint})`) : ''
 		}`;
 	};
diff --git a/packages/prompts/src/select.ts b/packages/prompts/src/select.ts
@@ -89,7 +89,7 @@ export const select = <Value>(opts: SelectOptions<Value>) => {
 					option.hint ? ` ${styleText('dim', `(${option.hint})`)}` : ''
 				}`;
 			case 'cancelled':
-				return `${styleText('strikethrough', styleText('dim', label))}`;
+				return `${styleText(['strikethrough', 'dim'], label)}`;
 			default:
 				return `${styleText('dim', S_RADIO_INACTIVE)} ${styleText('dim', label)}`;
 		}
diff --git a/packages/prompts/src/text.ts b/packages/prompts/src/text.ts
@@ -23,7 +23,7 @@ export const text = (opts: TextOptions) => {
 			const title = `${styleText('gray', S_BAR)}\n${symbol(this.state)}  ${opts.message}\n`;
 			const placeholder = opts.placeholder
 				? styleText('inverse', opts.placeholder[0]) + styleText('dim', opts.placeholder.slice(1))
-				: styleText('inverse', styleText('hidden', '_'));
+				: styleText(['inverse', 'hidden'], '_');
 			const userInput = !this.userInput ? placeholder : this.userInputWithCursor;
 			const value = this.value ?? '';
 
@@ -40,7 +40,7 @@ export const text = (opts: TextOptions) => {
 					return `${title}${styleText('gray', S_BAR)}${valueText}`;
 				}
 				case 'cancel': {
-					const valueText = value ? `  ${styleText('strikethrough', styleText('dim', value))}` : '';
+					const valueText = value ? `  ${styleText(['strikethrough', 'dim'], value)}` : '';
 					return `${title}${styleText('gray', S_BAR)}${valueText}${value.trim() ? `\n${styleText('gray', S_BAR)}` : ''}`;
 				}
 				default:

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<`
`71`	`71`
`72`	`72`	`get userInputWithCursor() {`
`73`	`73`	`if (!this.userInput) {`
`74`		`- return styleText('inverse', styleText('hidden', '_'));`
	`74`	`+ return styleText(['inverse', 'hidden'], '_');`
`75`	`75`	`}`
`76`	`76`	`if (this._cursor >= this.userInput.length) {`
`77`	`77`	return `${this.userInput}█`;
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export default class PasswordPrompt extends Prompt<string> {`
`18`	`18`	`}`
`19`	`19`	`const userInput = this.userInput;`
`20`	`20`	`if (this.cursor >= userInput.length) {`
`21`		- return `${this.masked}${styleText('inverse', styleText('hidden', '_'))}`;
	`21`	+ return `${this.masked}${styleText(['inverse', 'hidden'], '_')}`;
`22`	`22`	`}`
`23`	`23`	`const masked = this.masked;`
`24`	`24`	`const s1 = masked.slice(0, this.cursor);`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-// import color from 'picocolors';`
`2`	`1`	`import { styleText } from 'node:util';`
`3`	`2`	`import Prompt, { type PromptOptions } from './prompt.js';`
`4`	`3`
Original file line number	Diff line number	Diff line change
`@@ -108,7 +108,7 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {`
`108`	`108`
`109`	`109`	`case 'cancel': {`
`110`	`110`	`const userInputText = userInput`
`111`		- ? ` ${styleText('strikethrough', styleText('dim', userInput))}`
	`111`	+ ? ` ${styleText(['strikethrough', 'dim'], userInput)}`
`112`	`112`	`: '';`
`113`	`113`	return `${headings.join('\n')}\n${styleText('gray', S_BAR)}${userInputText}`;
`114`	`114`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,14 +13,14 @@ export const selectKey = <Value extends string>(opts: SelectOptions<Value>) => {`
`13`	`13`	return `${styleText('dim', label)}`;
`14`	`14`	`}`
`15`	`15`	`if (state === 'cancelled') {`
`16`		- return `${styleText('strikethrough', styleText('dim', label))}`;
	`16`	+ return `${styleText(['strikethrough', 'dim'], label)}`;
`17`	`17`	`}`
`18`	`18`	`if (state === 'active') {`
`19`		- return `${styleText('bgCyan', styleText('gray', ` ${option.value} `))} ${label} ${
	`19`	+ return `${styleText(['bgCyan', 'gray'], ` ${option.value} `)} ${label} ${
`20`	`20`	option.hint ? styleText('dim', `(${option.hint})`) : ''
`21`	`21`	}`;
`22`	`22`	`}`
`23`		- return `${styleText('gray', styleText('bgWhite', styleText('inverse', ` ${option.value} `)))} ${label} ${
	`23`	+ return `${styleText(['gray', 'bgWhite', 'inverse'], ` ${option.value} `)} ${label} ${
`24`	`24`	option.hint ? styleText('dim', `(${option.hint})`) : ''
`25`	`25`	}`;
`26`	`26`	`};`