string-uglify^3.2.2

No dependencies whatsoever. This package declares no dependencies or devDependencies.

Permalink to InstallationInstallation

Permalink to Quick TakeQuick Take

Permalink to ExamplesExamples

• Preserve mappings for duplicate names
• Preserve an empty names array
• Uglify names without class or ID prefixes
• Keep existing short names reserved
• Uglify one name by its array index

Idea

This library shortens an array of names. CSS class and ID prefixes are preserved:

[".module", ".class1", ".class2"];

The result is:

[".q", ".f", ".g"];

Deterministic algorithm

uglifyArr() is deterministic: the same complete input always produces the same output.

The mapping is also designed to be stable when a list changes. Each input name has a preferred short name, so unchanged entries often keep their output when other entries are added or removed. This stability is not guaranteed: two names can prefer the same output, and collision resolution depends on the complete input array.

In practice, this reduces unrelated version-control changes when you edit HTML or CSS.

For example, consider CSS classes based on the NATO phonetic alphabet, including .oscar. In a second array, keep .oscar but replace the surrounding names. For these two inputs, .oscar maps to .k both times:

const input1 = [
  ".alpha",
  ".bravo",
  ".charlie",
  ".delta",
  ".echo",
  ".foxtrot",
  ".golf",
  ".hotel",
  ".india",
  ".juliett",
  ".kilo",
  ".lima",
  ".mike",
  ".november",
  ".oscar", // <---- here
  ".papa",
  ".quebec",
  ".romeo",
  ".sierra",
  ".tango",
  ".uniform",
  ".victor",
  ".whiskey",
  ".xray",
  ".yankee",
  ".zulu",
];
const output1 = uglifyArr(input1);
console.log(`\n\n\n the first array:`);
console.log(input1.map((val, i) => `${val} - ${output1[i]}`).join("\n"));
// => the first array:
//
// .alpha - .s
// .bravo - .m
// .charlie - .u
// .delta - .w
// .echo - .t
// .foxtrot - .e
// .golf - .c
// .hotel - .o
// .india - .r
// .juliett - .j
// .kilo - .jj
// .lima - .x
// .mike - .a
// .november - .y
// .oscar - .k // <---- here
// .papa - .w6
// .quebec - .z
// .romeo - .uq
// .sierra - .q
// .tango - .l
// .uniform - .i
// .victor - .h
// .whiskey - .m0
// .xray - .e4
// .yankee - .h9
// .zulu - .qg

const input2 = [
  ".abandon",
  ".ability",
  ".able",
  ".about",
  ".above",
  ".abroad",
  ".absence",
  ".absent",
  ".absolute",
  ".abstract",
  ".abuse",
  ".abusive",

  ".oscar", // <---- here

  ".academic",
  ".accept",
  ".acceptable",
  ".acceptance",
  ".access",
  ".accident",
  ".accompany",
  ".according",
  ".account",
  ".accountant",
  ".accurate",
];

const output2 = uglifyArr(input2);
console.log(`\n\n\n the second array:`);
console.log(input2.map((val, i) => `${val} - ${output2[i]}`).join("\n"));
// => the second array:
//
// .abandon - .p
// .ability - .q
// .able - .i
// .about - .n
// .above - .z
// .abroad - .np
// .absence - .nl
// .absent - .h
// .absolute - .zj
// .abstract - .o
// .abuse - .c
// .abusive - .r
// .oscar - .k // <---- here
// .academic - .v
// .accept - .u
// .acceptable - .i4
// .acceptance - .l
// .access - .w
// .accident - .pj
// .accompany - .n3
// .according - .wm
// .account - .pd
// .accountant - .a
// .accurate - .cw

Other features

• Both functions expect an array of strings. Invalid containers and non-string array entries throw a TypeError with a string-uglify error identifier. An empty array is valid.
• Include dots and hashes (.a and #a) or omit them. If you shorten only classes or only IDs, you can omit the prefix.
• Input names do not need to be unique. Repeated names receive the same output, although removing duplicates avoids unnecessary work.
• The function does not mutate the input array.

API — uglifyArr()

This function returns a copy of a given array with each string uglified.

Pass an array in which every item is a string. uglifyArr() throws a package-labelled TypeError for a non-array value, a sparse array, or an array containing a non-string item. A valid empty array returns a new empty array.

The main function uglifyArr() is imported like this:

It takes one argument:

If the input includes dots or hashes, the output preserves each prefix:

uglifyArr([".class1", "#id2", ".class2", "#id9"]);
// => [".f", "#e", ".g", "#l"]

Names without prefixes produce results without prefixes:

uglifyArr(["name1", "name2", "name3"]);
// => ["y", "z", "a"]

API — uglifyById()

This function shortens the array and returns the item at the requested index.

The main function uglifyById() is imported like this:

It takes two arguments:

It returns one shortened string from the requested position.

The first argument follows the same string-array rules as uglifyArr(). The second argument must be an integer that points to an existing array item. Invalid arrays and members throw TypeError; invalid index types throw TypeError; out-of-range indices throw RangeError.

Each uglifyById() call processes the complete array. When you need more than one result, call uglifyArr() once and read the required array elements.

API — version

You can import version:

API — types

This package is written in TypeScript and exports the type Obj — a plain object with string keys and values of any type.

import type { Obj } from "string-uglify";

Uglification vs Minification

Some people use “minification” and “uglification” interchangeably, but they describe different transformations.

Uglification: .class1 { display: block; } → .fj { display: block; } (rename class or ID names to make them shorter)

Minification: .class1 { display: block; } → .class1{display:block} (remove optional CSS whitespace and punctuation)

This library won’t minify.

If you need an integrated HTML/CSS minification tool, consider html-crush.

Permalink to changelogChangelog