Variable Name Conversion

To easily convert a variable name to camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, etc.

Supports strong typing hints of TypeScript for static strings.

Installation

# npm
npm install variable-name-conversion

# yarn
yarn add variable-name-conversion

# pnpm
pnpm add variable-name-conversion

# bun
bun add variable-name-conversion

Usage

Value with Type

import VariableName from "variable-name-conversion";

const camel = new VariableName("hello_world").camel; //=> "helloWorld"
const kebab = new VariableName("fooBarBaz").kebab; //=> "foo-bar-baz"

Type only

Useful when you want to use static string type conversion without introduce runtime.

import type VariableName from "variable-name-conversion";

type Camel = VariableName<"hello_world">["camel"]; //=> "helloWorld"
type Kebab = VariableName<"fooBarBaz">["kebab"]; //=> "foo-bar-baz"

Cases

Case | Example | Notes --- | --- | --- camel | camelCase pascal | PascalCase kebab | kebab-case snake | snake_case const | CONSTANT_CASE train | Train-Case cobol | COBOL-CASE pascalSnake | Pascal_Snake_Case camelSnake | camel_Snake_Case dot | dot.case path | path/case pathAlt | path\alt\case lower | lowercase | With no separators. upper | UPPERCASE | With no separators. words | word case | Separated by spaces, all in lowercase. sentence | Sentence case | Separated by spaces, with only the first letter of the sentence capitalized. title | Title Case | Separated by spaces, with all first letters of words capitalized. cssVar | --css-custom-property-name-form | kebab-case with two dashes as the prefix. cssProp | css-property-name-form-webkit-css-property-name-form | Just like kebab-case, but if the first word is in "webkit", "moz", "ms", "o", and some other historical vendor prefixes, it will use one dash as the prefix.

Options

keepCase

Should it maintain case sensitivity when converting to kebab-case, snake_case, etc.?

Default: false

Example:

const snakeI = new VariableName("XMLHttpRequest").snake; //=> "xml_http_request"
const snakeS = new VariableName("XMLHttpRequest", true).snake; //=> "XML_Http_Request"

const camelI = new VariableName("XMLHttpRequest").camel; //=> "xmlHttpRequest"
const camelS = new VariableName("XMLHttpRequest", true).camel; //=> "XMLHttpRequest"

type SnakeI = VariableName<"XMLHttpRequest">["snake"]; //=> "xml_http_request"
type SnakeS = VariableName<"XMLHttpRequest", true>["snake"]; //=> "XML_Http_Request"

type CamelI = VariableName<"XMLHttpRequest">["camel"]; //=> "xmlHttpRequest"
type CamelS = VariableName<"XMLHttpRequest", true>["camel"]; //=> "XMLHttpRequest"

With numbers

Special case when handling value mixed with numbers.

Example:

const snake1 = new VariableName("resolve404Error").snake; //=> "resolve_404_error"
const snake2 = new VariableName("watch3d1080pVideo").snake; //=> "watch_3d_1080p_video"

type Snake1 = VariableName<"resolve404Error">["snake"]; //=> "resolve_404_error"
type Snake2 = VariableName<"watch3d1080pVideo">["snake"]; //=> "watch_3d_1080p_video"

areAllUpper

Check if the letters of the string are all uppercase.

Example:

const upper = VariableName.areAllUpper("XML"); //=> true
const notUpper = VariableName.areAllUpper("Xml"); //=> false

type Upper = VariableName.areAllUpper<"XML">; //=> true
type NotUpper = VariableName.areAllUpper<"Xml">; //=> false

Supported Vendor Prefixes

• -webkit-: Safari, Chrome, Microsoft Edge, Opera (and other WebKit-based browsers)
• -moz-: Mozilla FireFox (Gecko-based browsers)
• -ms-: Internet Explorer, Microsoft Edge Legacy
• -o-, -xv-: Opera Presto
• -khtml-, -konq-: KDE, Konqueror browser
• -atsc-: Advanced Television Standards Committee
• -wap-: The WAP Forum
• -apple-: Webkit supports properties using the -apple- prefixes as well
• -ah-: Antenna House
• -hp-: Hewlett Packard
• -ro-: Real Objects
• -rim-: Research In Motion
• -tc-: Tall Components
• -fx-: Java FX

Reference

License

variable-name-conversion is available under the MIT License. See the LICENSE file for more info.