Installation
Quick Take
Purpose
When we use atomic CSS in email templates, we generate around ten thousand CSS styles and email-comb
removes 99% of them, every unused class.
The challenge is, how do we report what was removed? We can’t list tens of thousands of CSS class names!
For example, consider this array atomic CSS class names coming from some report (for example, email-comb
output object’s key deletedFromHead
):
[
"wbr425-padding-top-1",
"wbr425-padding-top-2",
"main-title",
"wbr425-padding-top-3",
];
This npm library groups strings, in this case producing:
{
"wbr425-padding-top-*": 3,
"main-title": 1
}
Notice the “425″ in wbr425
(meaning width-breakpoint-425) was not replaced with a wildcard because it was constant on all input strings. This feature, retaining constant digits, was the reason why we got into hassle producing this library.
You see, the quickest, alternative algorithm is to replace all digits with ”*
“ and filter the unique values, but ”425
“ in wbr425
would be lost. That’s why we need this library.
API — groupStr()
The main function groupStr()
is imported like this:
It is a function which takes two arguments: an array of zero or more strings and an optional options object:
The optional options object has the following shape:
Key | Type | Default | Description |
---|---|---|---|
wildcard Type: String Default: * | |||
wildcard | String | * | What to use to mark grouped characters |
dedupePlease Type: Boolean Default: true | |||
dedupePlease | Boolean | true | By default, input array’s contents will be deduped. But that’s at a cost of performance, so if you’re 100% sure your strings will be unique, set it to false . |
Here are all defaults in one place for copying:
The function returns a plain object where each key is a grouped string and value is count, for example:
{
"a*-*": 2,
"b3-3": 1,
"c4-4": 1
}
API — version
You can import version
: