/* BEFORE */
p.this-class-is-extremely-long-and-definitely-needs-to-be-shortened,
p.why-is-this-so-long-if-it-just-makes-white-text {
color: white;
}
/* AFTER */
p.a,
p.b {
color: white;
}import { CssShortener } from 'css-shortener';
const shortener = new CssShortener();
console.log(shortener.shortenClassName('long-class'));
// Output: a
console.log(shortener.map);
// Output: {
// "long-class": "a"
// }const options = {
alphabet: 'abcdef',
};
const shortener = new CssShortener(options);The options parameter can be omitted.
| Option | Type | Optionality | Description | Default value |
|---|---|---|---|---|
| alphabet | string | optional | The alphabet is used to generate the new class names. | 'abcefghijklmnopqrstuvwxyz0123456789_-' |
Note that there is no d in the default alphabet to avoid generation of the combination ad.
Imports mappings into the shortener
cssShortener.importMap(
{
'my-extremely-long-class-name': 'a',
},
false
);If override is true, class names that are already mapped will be overridden.
The override parameter can be omitted.
Returns the mapped class names
var map = cssShortener.getMap();{
"my-extremely-long-class-name": "a"
}const express = require('express');
const nunjucks = require('nunjucks');
const cssMap = JSON.parse(fs.readFileSync('./cssMap.json'));
const app = express();
const env = nunjucks.configure('your-views-folder', { express: app });
env.addFilter('css', function(str) {
return str
.split(' ')
.map(c => (cssMap[c] != null ? cssMap[c] : c))
.join(' ');
});<!-- BEFORE -->
<div class="{{'my-extremely-long-class-name'|css}}"></div>
<!-- RENDERED -->
<div class="a"></div>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent