From 6e0df055f49b08158b570898cc816aad35f1a003 Mon Sep 17 00:00:00 2001 From: LitoMore Date: Wed, 12 Oct 2022 17:35:02 +0800 Subject: [PATCH] Export styles from `ansi-styles` (#567) --- readme.md | 10 +-- source/index.d.ts | 104 ++++++++++++++-------- source/index.js | 18 ++-- source/index.test-d.ts | 28 ++++-- source/vendor/ansi-styles/index.d.ts | 46 ++++++++++ source/vendor/ansi-styles/index.js | 128 ++++++++++++++------------- 6 files changed, 219 insertions(+), 115 deletions(-) diff --git a/readme.md b/readme.md index 5431631..f18b2aa 100644 --- a/readme.md +++ b/readme.md @@ -210,19 +210,19 @@ Explicit 256/Truecolor mode can be enabled using the `--color=256` and `--color= `chalkStderr` contains a separate instance configured with color support detected for `stderr` stream instead of `stdout`. Override rules from `supportsColor` apply to this too. `supportsColorStderr` is exposed for convenience. -### modifiers, foregroundColors, backgroundColors, and colors +### modifierNames, foregroundColorNames, backgroundColorNames, and colorNames -All supported style strings are exposed as an array of strings for convenience. `colors` is the combination of `foregroundColors` and `backgroundColors`. +All supported style strings are exposed as an array of strings for convenience. `colorNames` is the combination of `foregroundColorNames` and `backgroundColorNames`. This can be useful if you wrap Chalk and need to validate input: ```js -import {modifiers, foregroundColors} from 'chalk'; +import {modifierNames, foregroundColorNames} from 'chalk'; -console.log(modifiers.includes('bold')); +console.log(modifierNames.includes('bold')); //=> true -console.log(foregroundColors.includes('pink')); +console.log(foregroundColorNames.includes('pink')); //=> false ``` diff --git a/source/index.d.ts b/source/index.d.ts index b0acc0f..b0cd2ae 100644 --- a/source/index.d.ts +++ b/source/index.d.ts @@ -1,45 +1,9 @@ // TODO: Make it this when TS suports that. +// import {ModifierName, ForegroundColor, BackgroundColor, ColorName} from '#ansi-styles'; // import {ColorInfo, ColorSupportLevel} from '#supports-color'; +import {ModifierName, ForegroundColorName, BackgroundColorName, ColorName} from './vendor/ansi-styles/index.js'; import {ColorInfo, ColorSupportLevel} from './vendor/supports-color/index.js'; -type BasicColor = 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'magenta' | 'cyan' | 'white'; -type BrightColor = `${BasicColor}Bright`; -type Grey = 'gray' | 'grey'; - -/** -Basic foreground colors. - -[More colors here.](https://github.com/chalk/chalk/blob/main/readme.md#256-and-truecolor-color-support) -*/ - -export type ForegroundColor = BasicColor | BrightColor | Grey; - -/** -Basic background colors. - -[More colors here.](https://github.com/chalk/chalk/blob/main/readme.md#256-and-truecolor-color-support) -*/ -export type BackgroundColor = `bg${Capitalize}`; - -/** -Basic colors. - -[More colors here.](https://github.com/chalk/chalk/blob/main/readme.md#256-and-truecolor-color-support) -*/ -export type Color = ForegroundColor | BackgroundColor; - -export type Modifiers = - | 'reset' - | 'bold' - | 'dim' - | 'italic' - | 'underline' - | 'overline' - | 'inverse' - | 'hidden' - | 'strikethrough' - | 'visible'; - export interface Options { /** Specify the color support for Chalk. @@ -277,6 +241,12 @@ export const supportsColor: ColorInfo; export const chalkStderr: typeof chalk; export const supportsColorStderr: typeof supportsColor; +export { + ModifierName, ForegroundColorName, BackgroundColorName, ColorName, + modifierNames, foregroundColorNames, backgroundColorNames, colorNames, +// } from '#ansi-styles'; +} from './vendor/ansi-styles/index.js'; + export { ColorInfo, ColorSupport, @@ -284,9 +254,67 @@ export { // } from '#supports-color'; } from './vendor/supports-color/index.js'; +// TODO: Remove these aliases in the next major version +/** +@deprecated Use `ModifierName` instead. + +Basic modifier names. +*/ +export type Modifiers = ModifierName; + +/** +@deprecated Use `ForegroundColorName` instead. + +Basic foreground color names. + +[More colors here.](https://github.com/chalk/chalk/blob/main/readme.md#256-and-truecolor-color-support) +*/ +export type ForegroundColor = ForegroundColorName; + +/** +@deprecated Use `BackgroundColorName` instead. + +Basic background color names. + +[More colors here.](https://github.com/chalk/chalk/blob/main/readme.md#256-and-truecolor-color-support) +*/ +export type BackgroundColor = BackgroundColorName; + +/** +@deprecated Use `ColorName` instead. + +Basic color names. The combination of foreground and background color names. + +[More colors here.](https://github.com/chalk/chalk/blob/main/readme.md#256-and-truecolor-color-support) +*/ +export type Color = ColorName; + +/** +@deprecated Use `modifierNames` instead. + +Basic modifier names. +*/ export const modifiers: readonly Modifiers[]; + +/** +@deprecated Use `foregroundColorNames` instead. + +Basic foreground color names. +*/ export const foregroundColors: readonly ForegroundColor[]; + +/** +@deprecated Use `backgroundColorNames` instead. + +Basic background color names. +*/ export const backgroundColors: readonly BackgroundColor[]; + +/** +@deprecated Use `colorNames` instead. + +Basic color names. The combination of foreground and background color names. +*/ export const colors: readonly Color[]; export default chalk; diff --git a/source/index.js b/source/index.js index 340eb10..8bc993d 100644 --- a/source/index.js +++ b/source/index.js @@ -204,14 +204,22 @@ Object.defineProperties(createChalk.prototype, styles); const chalk = createChalk(); export const chalkStderr = createChalk({level: stderrColor ? stderrColor.level : 0}); +export { + modifierNames, + foregroundColorNames, + backgroundColorNames, + colorNames, + + // TODO: Remove these aliases in the next major version + modifierNames as modifiers, + foregroundColorNames as foregroundColors, + backgroundColorNames as backgroundColors, + colorNames as colors, +} from './vendor/ansi-styles/index.js'; + export { stdoutColor as supportsColor, stderrColor as supportsColorStderr, }; -export const modifiers = Object.keys(ansiStyles.modifier); -export const foregroundColors = Object.keys(ansiStyles.color); -export const backgroundColors = Object.keys(ansiStyles.bgColor); -export const colors = [...foregroundColors, ...backgroundColors]; - export default chalk; diff --git a/source/index.test-d.ts b/source/index.test-d.ts index a1ef854..e729675 100644 --- a/source/index.test-d.ts +++ b/source/index.test-d.ts @@ -1,5 +1,9 @@ -import {expectType, expectAssignable, expectError} from 'tsd'; -import chalk, {Chalk, ChalkInstance, Color, ColorInfo, ColorSupport, ColorSupportLevel, chalkStderr, supportsColor, supportsColorStderr} from './index.js'; +import {expectType, expectAssignable, expectError, expectDeprecated} from 'tsd'; +import chalk, { + Chalk, ChalkInstance, ColorInfo, ColorSupport, ColorSupportLevel, chalkStderr, supportsColor, supportsColorStderr, + ModifierName, ForegroundColorName, BackgroundColorName, ColorName, + Modifiers, +} from './index.js'; // - supportsColor - expectType(supportsColor); @@ -141,6 +145,20 @@ expectType(chalk.underline``); expectType(chalk.red.bgGreen.bold`Hello {italic.blue ${name}}`); expectType(chalk.strikethrough.cyanBright.bgBlack`Works with {reset {bold numbers}} {bold.red ${1}}`); -// -- Color types == -expectAssignable('red'); -expectError('hotpink'); +// -- Modifiers types +expectAssignable('strikethrough'); +expectError('delete'); + +// -- Foreground types +expectAssignable('red'); +expectError('pink'); + +// -- Background types +expectAssignable('bgRed'); +expectError('bgPink'); + +// -- Color types -- +expectAssignable('red'); +expectAssignable('bgRed'); +expectError('hotpink'); +expectError('bgHotpink'); diff --git a/source/vendor/ansi-styles/index.d.ts b/source/vendor/ansi-styles/index.d.ts index 7518d2a..58f133a 100644 --- a/source/vendor/ansi-styles/index.d.ts +++ b/source/vendor/ansi-styles/index.d.ts @@ -180,6 +180,52 @@ export interface ConvertColor { hexToAnsi(hex: string): number; } +/** +Basic modifier names. +*/ +export type ModifierName = keyof Modifier; + +/** +Basic foreground color names. + +[More colors here.](https://github.com/chalk/chalk/blob/main/readme.md#256-and-truecolor-color-support) +*/ +export type ForegroundColorName = keyof ForegroundColor; + +/** +Basic background color names. + +[More colors here.](https://github.com/chalk/chalk/blob/main/readme.md#256-and-truecolor-color-support) +*/ +export type BackgroundColorName = keyof BackgroundColor; + +/** +Basic color names. The combination of foreground and background color names. + +[More colors here.](https://github.com/chalk/chalk/blob/main/readme.md#256-and-truecolor-color-support) +*/ +export type ColorName = ForegroundColorName | BackgroundColorName; + +/** +Basic modifier names. +*/ +export const modifierNames: readonly ModifierName[]; + +/** +Basic foreground color names. +*/ +export const foregroundColorNames: readonly ForegroundColorName[]; + +/** +Basic background color names. +*/ +export const backgroundColorNames: readonly BackgroundColorName[]; + +/* +Basic color names. The combination of foreground and background color names. +*/ +export const colorNames: readonly ColorName[]; + declare const ansiStyles: { readonly modifier: Modifier; readonly color: ColorBase & ForegroundColor; diff --git a/source/vendor/ansi-styles/index.js b/source/vendor/ansi-styles/index.js index 50e9dfa..bd1010c 100644 --- a/source/vendor/ansi-styles/index.js +++ b/source/vendor/ansi-styles/index.js @@ -6,68 +6,67 @@ const wrapAnsi256 = (offset = 0) => code => `\u001B[${38 + offset};5;${code}m`; const wrapAnsi16m = (offset = 0) => (red, green, blue) => `\u001B[${38 + offset};2;${red};${green};${blue}m`; +const styles = { + modifier: { + reset: [0, 0], + // 21 isn't widely supported and 22 does the same thing + bold: [1, 22], + dim: [2, 22], + italic: [3, 23], + underline: [4, 24], + overline: [53, 55], + inverse: [7, 27], + hidden: [8, 28], + strikethrough: [9, 29], + }, + color: { + black: [30, 39], + red: [31, 39], + green: [32, 39], + yellow: [33, 39], + blue: [34, 39], + magenta: [35, 39], + cyan: [36, 39], + white: [37, 39], + + // Bright color + blackBright: [90, 39], + gray: [90, 39], // Alias of `blackBright` + grey: [90, 39], // Alias of `blackBright` + redBright: [91, 39], + greenBright: [92, 39], + yellowBright: [93, 39], + blueBright: [94, 39], + magentaBright: [95, 39], + cyanBright: [96, 39], + whiteBright: [97, 39], + }, + bgColor: { + bgBlack: [40, 49], + bgRed: [41, 49], + bgGreen: [42, 49], + bgYellow: [43, 49], + bgBlue: [44, 49], + bgMagenta: [45, 49], + bgCyan: [46, 49], + bgWhite: [47, 49], + + // Bright color + bgBlackBright: [100, 49], + bgGray: [100, 49], // Alias of `bgBlackBright` + bgGrey: [100, 49], // Alias of `bgBlackBright` + bgRedBright: [101, 49], + bgGreenBright: [102, 49], + bgYellowBright: [103, 49], + bgBlueBright: [104, 49], + bgMagentaBright: [105, 49], + bgCyanBright: [106, 49], + bgWhiteBright: [107, 49], + }, +}; + function assembleStyles() { const codes = new Map(); - const styles = { - modifier: { - reset: [0, 0], - // 21 isn't widely supported and 22 does the same thing - bold: [1, 22], - dim: [2, 22], - italic: [3, 23], - underline: [4, 24], - overline: [53, 55], - inverse: [7, 27], - hidden: [8, 28], - strikethrough: [9, 29], - }, - color: { - black: [30, 39], - red: [31, 39], - green: [32, 39], - yellow: [33, 39], - blue: [34, 39], - magenta: [35, 39], - cyan: [36, 39], - white: [37, 39], - - // Bright color - blackBright: [90, 39], - redBright: [91, 39], - greenBright: [92, 39], - yellowBright: [93, 39], - blueBright: [94, 39], - magentaBright: [95, 39], - cyanBright: [96, 39], - whiteBright: [97, 39], - }, - bgColor: { - bgBlack: [40, 49], - bgRed: [41, 49], - bgGreen: [42, 49], - bgYellow: [43, 49], - bgBlue: [44, 49], - bgMagenta: [45, 49], - bgCyan: [46, 49], - bgWhite: [47, 49], - - // Bright color - bgBlackBright: [100, 49], - bgRedBright: [101, 49], - bgGreenBright: [102, 49], - bgYellowBright: [103, 49], - bgBlueBright: [104, 49], - bgMagentaBright: [105, 49], - bgCyanBright: [106, 49], - bgWhiteBright: [107, 49], - }, - }; - - // Alias bright black as gray (and grey) - styles.color.gray = styles.color.blackBright; - styles.bgColor.bgGray = styles.bgColor.bgBlackBright; - styles.color.grey = styles.color.blackBright; - styles.bgColor.bgGrey = styles.bgColor.bgBlackBright; for (const [groupName, group] of Object.entries(styles)) { for (const [styleName, style] of Object.entries(group)) { @@ -129,12 +128,12 @@ function assembleStyles() { }, hexToRgb: { value(hex) { - const matches = /(?[a-f\d]{6}|[a-f\d]{3})/i.exec(hex.toString(16)); + const matches = /[a-f\d]{6}|[a-f\d]{3}/i.exec(hex.toString(16)); if (!matches) { return [0, 0, 0]; } - let {colorString} = matches.groups; + let [colorString] = matches; if (colorString.length === 3) { colorString = [...colorString].map(character => character + character).join(''); @@ -217,3 +216,8 @@ function assembleStyles() { const ansiStyles = assembleStyles(); export default ansiStyles; + +export const modifierNames = Object.keys(styles.modifier); +export const foregroundColorNames = Object.keys(styles.color); +export const backgroundColorNames = Object.keys(styles.bgColor); +export const colorNames = [...foregroundColorNames, ...backgroundColorNames];