Skip to main content

JavaScript functions to convert a string to kebab-case, i.e. its dash separated form.

const KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
const REVERSE_REGEX = /-[a-z\u00E0-\u00F6\u00F8-\u00FE]/g;

/**
 * Convert a string to kebab-case, i.e. its dash separated form.
 *
 * The difference between kebab-case and e.g. dashify is that this module
 * doesn't modify the string in any other way than transforming uppercased
 * letters to their lowercased counterparts prefixed with -. Thanks to this
 * there's also a reverse function to do the opposite, i.e. get back the
 * original value.
 *
 * This is used in Unistyle to transform JavaScript CSS properties to their CSS
 * counterparts without losing a possible browser prefix, e.g: WebkitTransform
 * -> -webkit-transform.
 *
 * @example
 *   kebabCaseReverse('-webkit-transform');
 *   // "WebkitTransform"
 *
 * @param {string} str The string to convert.
 * @return {string} The kebab cased string.
 *
 * @author Joakim Carlstein, https://github.com/joakimbeng/kebab-case
 * @copyright MIT
 */
function kebabCase(str) {
    return str.replace(KEBAB_REGEX, function(match) {
        return "-" + match.toLowerCase();
    });
};

/**
 * Reverse a previously kebab cased string, see kebabCase().
 *
 * @example
 *   kebabCaseReverse('-webkit-transform');
 *   // "WebkitTransform"
 *
 * @param {string} str The string to convert back.
 * @return {string} The "unkebab cased" string.
 *
 * @author Joakim Carlstein, https://github.com/joakimbeng/kebab-case
 * @copyright MIT
 */
function kebabCaseReverse function(str) {
    return str.replace(REVERSE_REGEX, function(match) {
        return match.slice(1).toUpperCase();
    });
};