css-shortener-2 v2.1.2

css-shortener-2

鉴于css-shortener已长时间不维护，此为个人fork 2.1.0版本之后的个人开源版本

Utility to shorten css class names. Saves more than 20% of Bootstrap! It also works with minified code.

Preview

/* 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;
}

/* 'ignore-' prefix gets trimmed off and the class will not be changed */
.ignore-stay-like-this { color: pink; }
/* AFTER */
p.a,
p.b {
  color: white;
}
.stay-like-this { color: pink; }

Table of contents

1. Quick Start
   1. API
   2. CLI
2. API Documentation
   1. Constructor
      • Options
   2. #importMap(map, override)
   3. #getMap()
   4. #replaceCss()
   5. #replaceHtml()
   6. #cssStream()
   7. #htmlStream()
3. CLI Documentation
4. Examples
   1. CSS filter for nunjucks and express

Quick Start

API

Install the package with npm install --save css-shortener

const fs = require('fs');
const CssShortener = require('css-shortener');

const cs = new CssShortener();

fs.createReadStream('input.css')
  .pipe(cs.cssStream())
  .pipe(fs.createWriteStream('output.css'))
  .on('finish', () => {
    fs.writeFile('map.json', JSON.stringify(cs.getMap()), () => {
      console.log('Done!');
    });
  });

CLI

Install the tool using npm install -g css-shortener

# Both ways produce the same result

cat input.css | css-shortener shorten --map map.json > output.css

css-shortener shorten -i input.css -o output.css --map map.json

API Documentation

Constructor

const options = {
  alphabet: 'abcdef',
  ignorePrefix: 'ignore-me-',
  trimIgnorePrefix: false
};
const cs = new CssShortener(options);

The options parameter can be omitted.

Options

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.

#getMap()

Returns the mapped class names

var map = cssShortener.getMap();

{
  "my-extremely-long-class-name": "a"
}

#replaceCss()

console.log(cssShortener.replaceCss('.my-extremely-long-class-name{color:black;}'));

// => '.a{color:black;}'

#replaceHtml()

console.log(cssShortener.replaceHtml('<div class="font-bold my-extremely-long-class-name">Test</div>'));

// => '<div class="font-bold a">Test</div>'

#cssStream()

Shortens the CSS class names.

const fs = require('fs');

fs.createReadStream('input.css')
  .pipe(cssShortener.cssStream())
  .pipe(fs.createWriteStream('output.css'))
  .on('finish', () => {
    fs.writeFile('map.json', JSON.stringify(cssShortener.getMap()), () => {
      console.log('Done!');
    });
  });

#htmlStream()

Replace mapped class names in HTML code.

const fs = require('fs');

cssShortener.importMap({'long-class':'a'}); // Import mappings
fs.createReadStream('index.html')
  .pipe(cssShortener.htmlStream())
  .pipe(fs.createWriteStream('index.output.html'));

<!-- index.html -->
<div class="long-class otherclass"></div>

<!-- index.output.html -->
<div class="a otherclass"></div>

otherclass wasn't touched since it is not a mapped class name.

CLI Documentation

Command shorten

Documentation coming soon. Meanwhile, see css-shortener --help.

Command html

Documentation coming soon. Meanwhile, see css-shortener --help.

Examples

CSS filter for nunjucks and express

const express = require('express');
const nunjucks = require('nunjucks');

const app = express();

const env = nunjucks.configure('your-views-folder', {express: app});

env.addFilter('css', function(str) {
  const classes = str.split(' ');
  let res = '';
  for (let c of classes) res += getShortenedCssClass(c) + ' ';
  return res.trim();
});

var map = JSON.parse(fs.readFileSync('./map.json'));

function getClassName(original) {
  let res = original;
  if (map[original] != null) res = map[original];
  return res;
}

<!-- BEFORE -->
<div class="{{'my-extremely-long-class-name'|css}}"></div>
<!-- RENDERED -->
<div class="a"></div>