https://github.com/mbrandau/css-shortener
Utility to shorten CSS class names
https://github.com/mbrandau/css-shortener
css css-shortener minify shortener
Last synced: 6 months ago
JSON representation
Utility to shorten CSS class names
- Host: GitHub
- URL: https://github.com/mbrandau/css-shortener
- Owner: mbrandau
- License: mit
- Created: 2018-02-09T10:00:25.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2025-11-29T05:52:25.000Z (7 months ago)
- Last Synced: 2025-12-01T06:30:07.167Z (7 months ago)
- Topics: css, css-shortener, minify, shortener
- Language: TypeScript
- Homepage:
- Size: 383 KB
- Stars: 10
- Watchers: 0
- Forks: 1
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# css-shortener
[](https://github.com/mbrandau/css-shortener/actions/workflows/main.yml) [](https://www.npmjs.com/package/css-shortener) [](https://www.npmjs.com/package/css-shortener) [](https://github.com/mbrandau/css-shortener/issues)
### Preview
```css
/* 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;
}
```
## Table of contents
1. [Quick Start](#quick-start)
2. [API Documentation](#api-documentation)
1. [Constructor](#constructor)
- [Options](#options)
2. [`#importMap(map, override)`](#importmapmap-override)
3. [`#map`](#map)
3. [Examples](#examples)
1. [CSS filter for nunjucks and express](#css-filter-for-nunjucks-and-express)
## Quick Start
```js
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"
// }
```
## API Documentation
### Constructor
```js
const options = {
alphabet: 'abcdef',
};
const shortener = new CssShortener(options);
```
The `options` parameter can be omitted.
#### Options
| 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
```js
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
```js
var map = cssShortener.getMap();
```
```json
{
"my-extremely-long-class-name": "a"
}
```
## Examples
### CSS filter for nunjucks and express
```js
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(' ');
});
```
```html
```