/* 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
.
#importMap(map, override)
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.
#map
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>