Wondering what’s next for npm?Check out our public roadmap! »

    css-shortener

    2.1.1 • Public • Published

    css-shortener

    Build Status Coverage Status npm npm GitHub issues

    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
      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

    Option Type Optionality Description Default value
    alphabet string optional The alphabet is used to generate the new class names. 'abcefghijklmnopqrstuvwxyz0123456789_-'
    ignorePrefix string optional Classes starting with this prefix will be omited from replacing. Set to undefined to disable. 'ignore-'
    trimIgnorePrefix boolean optional If true, the prefix will be trimmed off of the matched classes. true

    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>

    Install

    npm i css-shortener

    DownloadsWeekly Downloads

    16

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    32 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar